[Javascript] sort() 함수의 함정

Array.sort()

 프로그래머스 알고리즘을 풀던 중 한 가지 사실을 알게 되었다.

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);

다음 코드의 결과는 [1, 4, 21, 30, 100000] 일 것 같았다.

하지만  [1, 100000, 21, 30, 4]를 리턴하게 된다.

그 이유는 javascript의 sort 함수는 아스키 코드를 기준으로 정렬하기 때문에 위와 같은 결과가 나오게 된다.

---

Compare Function

 MDN 설명에 따르면, compare function을 제공하지 않으면 위에서 언급했던 것처럼, 아스키코드를 기준으로 정렬한다.

따라서 원하는 정렬을 위해서는 compare function을 제공해야 한다.

 

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

a와 b가 비교되는 두 요소라면,

• compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬합니다. 즉, a가 먼저 옵니다.
• compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 인덱스로 소트 합니다.
• compareFunction(a, b)이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다.

 

문자열 대신 숫자를 비교하기 위해 compare 함수는 a에서 b를 빼서 제공하면 됩니다. 위의 조건들을 지키면 다음 함수는 배열을 오름차순으로 정렬합니다.

function compareNumbers(a, b) {
  return a - b;
}

위의 함수를 아래처럼 적용해보면 잘 적용되는 것들을 확인할 수 있다.

var numbers = [1, 30, 4, 21, 100000];
numbers.sort(function(a, b) {
  return a - b;
});
console.log(numbers);

// [1, 4, 21, 30, 100000]

 

 

compareFunction의 세 조건을 잘 생각해보면 내림차순으로도 정렬하도록 커스터마이징 할 수 있다.

첫 번째 예시와 반대로 b - a로만 바꾸어주면 숫자를 비교하면서 내림차순으로 정렬하게 된다.

var numbers = [1, 30, 4, 21, 100000];
numbers.sort(function(a, b) {
  return b - a;
});
console.log(numbers);

// [100000, 30, 21, 4, 1]

 

 

그 밖에도 map in list, map의 경우에도 custom 함수를 제공해서 소팅할 수 있다.

MDN 홈페이지에서 확인 가능하다.

---

참고

developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort