sort() 메서드를 사용해 숫자 배열을 오름차순으로, 내림차순으로 정렬하는 방법에 대해 정리한다.

sort() 메서드의 compareFunction(a, b)

MDN에서 sort() 메서드에 전달하는 선택적 인자인 compareFunction를 아래와 같이 설명한다.

정렬 순서를 정의하는 함수이다.
생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니코드 코드 포인트 값에 따라 정렬된다.

즉, sort() 메서드에 이 함수를 전달하지 않으면 요소를 문자열로 변환하여 문자열 순서로 비교해 배열을 정렬한다. 다음과 같은 경우 숫자 10000이 2보다 앞에 정렬되는 것을 확인할 수 있다.

const arr = [1, 3, 5, 10000, 2];
console.log(arr.sort());
// [ 1, 10000, 2, 3, 5 ]

따라서 숫자 배열을 제대로 정렬하려면 compareFunction에 정렬을 수행하는 함수를 전달해야 한다. compareFunction을 전달하면 배열 요소는 이 함수의 반환 값에 따라 정렬된다. a와 b가 비교되는 두 배열 요소인 경우라면 아래와 같은 방법으로 배열을 정렬한다.

• compareFunction(a, b)의 반환 값이 0보다 작은 경우
  • a를 b보다 앞에 정렬한다.
• compareFunction(a, b)의 반환 값이 0인 경우
  • a와 b를 서로에 대해 변경하지 않고, 다른 요소에 대해 정렬한다.
• compareFunction(a, b)의 반환 값이 0보다 큰 경우
  • b를 a보다 앞에 정렬한다.

compareFunction을 사용하면 숫자 배열을 오름차순 또는 내림차순으로 정렬할 수 있습니다.

숫자 배열 오름차순 정렬하기

아래와 같이 sort() 메서드에 compareFunction을 전달하면 숫자 배열을 오름차순으로 정렬한다.

const arr = [1, 3, 5, 10000, 2].sort((a, b) => a - b);
console.log(arr);  // [1, 2, 3, 5, 10000]

compareFunction으로 전달한 함수의 반환 값에 따라 두 배열 요소를 정렬한다. 먼저 배열 요소 1과 3을 정렬하는 경우는 아래와 같이 진행된다.

• 인자로 전달한 함수의 매개변수 a, b에 1과 3을 각각 전달한다.
• a - b의 결과는 -2로 0보다 작다.
• 함수의 반환값이 0보다 작으므로 a를 b보다 앞에 정렬하기 때문에 1을 3보다 앞에 위치시킨다.

다음으로, 배열 요소 10000과 2를 정렬하는 경우는 아래와 같이 진행된다.

• 인자로 전달한 함수의 매개변수 a, b에 10000과 2를 각각 전달한다.
• a - b의 결과는 9998로 0보다 크다.
• 함수의 반환값이 0보다 큰 경우 b를 a보다 앞에 정렬하기 때문에 2를 10000보다 앞에 위치시킨다.(10000이 2 보다 뒤에 위치하게 되는 것)

위와 같은 방식으로 숫자 배열을 오름차순으로 정렬한다.

숫자 배열 내림차순 정렬하기

아래와 같이 sort() 메서드에 compareFunction을 전달하면 숫자 배열을 내림차순으로 정렬한다.

const arr = [1, 3, 5, 10000, 2].sort((a, b) => b - a);
console.log(arr);

오름차순 정렬의 경우와 다르게 compareFunction은 b - a의 값을 반환한다.

먼저 1과 3을 정렬하는 경우는 아래와 같이 진행된다.

• 인자로 전달한 함수의 매개변수 a, b에 각각 1과 3을 전달한다.
• b - a의 결과는 2로 0보다 크다.
• 함수의 반환값이 0보다 큰 경우 b를 a보다 앞에 정렬하기 때문에 3을 1보다 앞에 위치시킨다.

다음으로 5와 10000을 정렬하는 경우는 아래와 같이 진행된다.

• 인자로 전달한 함수의 매개변수 a, b에 각각 5와 10000을 전달한다.
• b - a의 결과는 9995로 0보다 크다.
• 함수의 반환값이 0보다 큰 경우 b를 a보다 앞에 정렬하기 때문에 10000을 5보다 앞에 위치시킨다.

위와 같은 방식으로 숫자 배열을 내림차순으로 정렬한다.

정리

• sort() 메서드에 compareFunction 함수를 인자로 전달하지 않으면, 배열의 요소를 문자열로 변환하여 문자열 순서대로 배열을 정렬한다.
• compareFunction 함수의 특징을 사용해 sort() 메서드로 숫자 배열을 오름차순 또는 내림차순으로 정렬할 수 있다.

참고

• Array.prototype.sort()