본문 바로가기
Study/JavaScript

JS ) Sort() 정렬에서 CompareFunction 의 필요성

by JongIk 2022. 2. 28.
반응형

Sort()

배열에서 자주 쓰이는 sort() 함수는 기본적으로 정렬 순서가 유니코드의 코드 포인트를 따르게 되어 있습니다.

  • 한 자리 수의 숫자들로 이루어진 배열 정렬

    var numbers = [2,3,5,1,4];
    numbers.sort();
    console.log(numbers); // [1,2,3,4,5]
  • 문자로 이루어진 배열의 정렬

var characters = ["b", "e", "s", "d", "a"];
characters.sort();
for(let x of characters){
  console.log(x); // ['a','b','d','e','s']
}

따라서 문자열로 이루어진 배열이나 한 자리 수의 숫자들로 이루어진 배열들에서는 문제가 없지만, 두 자리 수 이상의 숫자가 포함된 경우에는 원하는 조건으로 정렬이 되지 않을 수 있습니다.

var numbers = [4, 200, 51, 1234, 3];
numbers.sort();
console.log(numbers); // [1234, 200, 3, 4, 51]
  • 숫자의 크기를 기준으로 오름차순 정렬하려고 했을 때 단순히 sort() 함수만 사용한다면 위와 같이 유니코드 순서로 정렬된 결과를 볼 수 있습니다.

  • 이러한 문제를 해결하기 위해서는 sort() 함수의 매개변수 compareFunction 을 이용해야 합니다.


compareFunction

  • compareFunction 은 정렬 순서를 정의하는 함수로, 생략하게 되면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니코드 값에 따라 정렬됩니다.

  • 반환 값은 복사본이 만들어지지 않고, 원 배열이 정렬됩니다.

  • compareFunction 이 제공되면 배열 요소는 compare 함수의 반환 값에 따라 정렬됩니다.

a 와 b 가 비교되는 두 요소 일때

  • compareFunction(a,b) 이 0 보다 작은 경우, a 를 b 보다 낮은 색인으로 정렬하게 되어 a 가 먼저 오게 됩니다.
    => 오름차순 정렬

  • compareFunction(a,b) 이 0을 반환하면 a 와 b 를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다.

  • compareFunction(a,b) 이 0 보다 큰 경우, 내림차순으로 정렬하게 됩니다.

위의 정보를 확인하고 다시 숫자 배열을 오름차순, 내림차순 정렬 해보겠습니다.

  • 오름차순 정렬
var numbers = [4, 200, 51, 1234, 3];
numbers.sort(function(a,b){
    return a - b;
});
console.log(numbers); // [3, 4, 51, 200, 1234]
  • 내림차순 정렬
var numbers = [4, 200, 51, 1234, 3];
numbers.sort(function (a, b) {
  return b - a;
});
console.log(numbers); // [ 1234, 200, 51, 4, 3 ]

반응형

'Study > JavaScript' 카테고리의 다른 글

JavaScript ) 간단한 click Counter 만들어보기  (0) 2022.03.16
JS ) 함수를 생성하는 방법  (0) 2022.03.13
JavaScript ) fetch vs axios  (0) 2022.01.29
ES6 ) 비구조화 할당  (0) 2022.01.28
JavaScript ) 다차원 배열 생성  (0) 2022.01.27

댓글