[자바스크립트] sort()

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// expected output: Array [1, 100000, 21, 30, 4]

이게 무슨 일이람

파이썬에서 알던 sort() 함수가 아니닷

[1, 30, 4, 21, 100000]을 sort() 했는데 [1, 100000, 21, 30, 4]이 나오다니..?

 

WHY..?

자바스크립트의 sort() 메서드는 '문자열 타입'의 유니코드 포인트를 기준으로 비교하는데..

[apple, abc, banana]를 sort()하면 [abc, apple, banana]가 나오듯이

[1, 100, 20]을 sort() 하면 [1, 100, 20]이 나온다.

그것이 문자열이니까

 

그래서 해결책은..?

// 오름차순
const array1 = [1, 30, 4, 21, 100000];
array1.sort((a, b) => a - b);
// expected output : [1, 4, 21, 30, 100000]

// 내림차순
const array2 = [1, 30, 4, 21, 100000];
array2.sort((a, b) => b - a);
// expected output : [100000, 30, 21, 4, 1]

우선 해결책을 제시했으니 이제 왜 그런지를 알아보자.

 

앞서 자바스크립트 sort() 메서드의 기본 동작(배열의 각 요소가 문자열 변환 유니코드 값에 따라 정렬되는)은 알아보았다. 그리고 자바스크립트 sort() 메서드에는 optional 매개변수인 compareFunction이 있다.

 

optional하게 사용하는 compareFunction이 없으면 sort() 기본 동작으로 작동하고 compareFunction이 있다면 배열 요소는 compare 함수의 반환 값에 따라 정렬된다. a와 b가 비교되는 두 요소라면,

compareFn(a, b) return value	sort order
> 0	sort a after b
< 0	sort a before b
=== 0	keep original

function compareFn(a, b) {
  if (a < b) {
    return -1;
  }
  if (a > b) {
    return 1;
  }
  // a === b
  return 0;
}

이제 comapreFunction을 이용한 정렬 예시를 들어보자면

[20, 10] 배열이 있다고 할 때

compareFn(20, 10)

a = 20, b = 10

-> a-b = 10

-> positivie

-> sort a after b

-> a를 b 다음으로

-> [10, 20]

 

그리고 위의 compareFn을 Arrow Function으로 변환하면

sort(function compareFn(a, b){
	return a-b
})

sort((a, b) => a - b)