JavaScript 숫자 배열을 정렬할 때 주의할 점

💡 들어가며

JavaScript Array에서 제공하는 sort() 메소드로 숫자 배열을 정렬할 때 주의할 점에 대해서 이야기해보겠습니다.

sort()로 정렬하기

sort() 메소드는 인자로 compareFunction을 받습니다.

compareFunction(a,b)의 수행 결과를 r이라고 할 때
r < 0이면 a가 먼저 오도록 정렬되고
r > 0이면 b가 먼저 오도록 정렬되며
r = 0이면 순서를 변경하지 않습니다.

const arr1 = [3, 2, 4, 1, 5, 7, 6];
const arr2 = [3, 2, 4, 1, 5, 7, 6];

arr1.sort((a, b) => a - b);
console.log(arr1); // [ 1, 2, 3, 4, 5, 6, 7 ]

arr2.sort((a, b) => b - a);
console.log(arr2); // [ 7, 6, 5, 4, 3, 2, 1 ]

❗️ 주의할 점

compareFunction은 optional이기 때문에 생략이 가능한데
compareFunction이 생략된 경우 오름차순으로 정렬하는 것 처럼 보입니다.

const arr1 = [3, 2, 4, 1, 5, 7, 6];
const arr3 = [3, 2, 4, 1, 5, 7, 6];

arr1.sort((a, b) => a - b);
console.log(arr1); // [ 1, 2, 3, 4, 5, 6, 7 ]

arr3.sort();
console.log(arr3); // [ 1, 2, 3, 4, 5, 6, 7 ]

하지만 compareFunction이 생략된 경우 오름차순으로 정렬한다는 설명은 일부만 맞는 설명입니다.
MDN Array.prototype.sort()에서는 아래와 같이 설명하고 있습니다.

compareFunction이 제공되지 않은 경우
배열의 각 요소를 문자열로 변환하고
변환된 각 요소의 유니코드 코드 포인트 순서를 기준으로 비교하여 정렬합니다.

예를 들어 바나나는 체리 앞에 옵니다.
단순 숫자를 비교한 경우 9가 80보다 앞에 오지만
문자열로 변환된 숫자의 유니코드를 비교하기 때문에 80이 9보다 앞에 옵니다.

간단한 예시로 확인해보겠습니다.

const arr3 = [3, 2, 4, 1, 5, 7, 6];
const arr4 = [3, 211, 411, 1111, 51, 71, 611];

arr3.sort();
console.log(arr3); // [ 1, 2, 3, 4, 5, 6, 7 ]

arr4.sort();
console.log(arr4); // [ 1111, 211, 3, 411, 51, 611, 71 ]

한 자리 숫자는 문자열로 변환한 후 유니코드로 비교해도 정렬 결과가 같지만
여러 자리 숫자의 경우 예시와 같이 다른 결과가 나옵니다.

✏️ 마치며

쉽고 간단하지만 자주 사용되는 문법이고
logic이나 application의 규모가 커질 수록 디버깅을 통한 문제 원인 파악이 어려워지는 점을 감안했을 때
잘 숙지해두면 좋은 내용인 것 같습니다 😊

Reference
Array.prototype.sort() - MDN