자바스크립트 배열 정렬 완벽 가이드: sort() 메서드와 비교 함수 활용법

자바스크립트는 배열을 정렬할 수 있도록 강력한 내장 함수를 제공합니다. 기본적으로 sort() 메서드는 요소를 알파벳(문자열) 순서로 정렬합니다.

예를 들어 다음과 같습니다.

예제

let arr1 = ["Zebra", "Bear", "Tiger"];
arr1.sort();
console.log(arr1);

출력

[ 'Bear', 'Tiger', 'Zebra' ]

이번에는 숫자 배열의 예를 살펴보겠습니다.

예제

let arr1 = [1, 8, 31, 21];
arr1.sort();
console.log(arr1);

출력

[ 1, 21, 31, 8 ]

예상과 다른 결과가 출력되었습니다. 그 이유는 sort() 메서드가 기본적으로 모든 요소를 문자열로 변환한 뒤 알파벳 순서로 비교하기 때문입니다. 원하는 방식대로 정렬하려면 비교 함수(compare function)를 직접 전달해야 합니다. 비교 함수는 두 개의 인수를 받아 어느 값이 더 크고 작은지 판단하며, 그 결과에 따라 정렬 순서가 결정됩니다.

따라서 숫자 배열을 오름차순으로 정렬하려면 다음과 같이 작성해야 합니다.

예제

let arr1 = [1, 8, 31, 21];
arr1.sort((a, b) => a - b);
console.log(arr1);

출력

[ 1, 8, 21, 31 ]

이러한 비교 함수는 객체 배열 정렬처럼 더 복잡한 상황에서도 유용하게 활용할 수 있습니다. 어떤 속성(키)을 기준으로 정렬할지 직접 지정할 수 있기 때문입니다. 예를 들어 이름순으로 사람 목록을 정렬하는 코드는 다음과 같습니다.

예제

let people = [{
    name: "Zoe",
    age: 35
}, {
    name: "Richard",
    age: 21
}, {
    name: "Agnes",
    age: 25
}];
people.sort((a, b) => {
    let nameA = a.name.toUpperCase(); // 대소문자 구분 없이 비교
    let nameB = b.name.toUpperCase(); // 대소문자 구분 없이 비교
    if (nameA < nameB) {
        return -1;
    }
    if (nameA > nameB) {
        return 1;
    } // 이름이 같은 경우
    return 0;
});
console.log(people)

출력

[ { name: 'Agnes', age: 25 },
{ name: 'Richard', age: 21 },
{ name: 'Zoe', age: 35 } ]

훨씬 더 복잡한 구조의 객체도 같은 방식으로 정렬할 수 있습니다. 핵심은 비교 함수를 어떻게 구성하느냐에 달려 있습니다.

원본 배열 유지하면서 정렬하기

앞서 살펴본 것처럼 sort() 메서드는 원본 배열 자체를 변경(in-place)합니다. 원본 배열의 순서를 그대로 유지하면서 새롭게 정렬된 배열을 얻고 싶다면, 먼저 복사본을 만든 뒤 정렬을 적용하면 됩니다.

arr.slice(0).sort();

참고로 최신 자바스크립트(ES2023)에서는 원본을 변경하지 않고 새로운 정렬 배열을 반환하는 toSorted() 메서드도 제공되므로, 환경이 허용한다면 이를 활용하는 것도 좋은 방법입니다.