Array.prototype.sort() 사용법

sort() 함수는
배열 요소를 원하는 정렬 순서로 변경(sort)하는 함수입니다.

이 함수는 기본적으로 문자열의 유니코드 코드 포인트를 기준으로 오름차순으로 정렬(alphabetically, 알파벳 순)하지만,
숫자 등 다른 데이터 타입을 정렬하려면 콜백 함수를 사용해서 원하는 정렬 순서로 변경할 수 있습니다.

유니코드 코드 포인트(Unicode code point)는
유니코드에서 각 문자에 할당된 고유한 식별 번호를 나타냅니다. 간단하게 말하면, 각 문자에 대응되는 숫자라고 생각할 수 있습니다.

JavaScript 
/* 문자열 배열을 오름차순으로 정렬하는 예시
   => 유니코드 코드 포인트를 기준으로 오름차순으로 정렬(alphabetically, 알파벳 순) */
const enStrings = ["d", "b", "c", "a"];
enStrings.sort();

console.log(enStrings); // 출력: ["a", "b", "c", "d"]

/* 한글에서는 가나다 순 */
const koStrings = ["다", "가", "나"];
koStrings.sort();

console.log(koStrings); // 출력: ["가", "나", "다"]

/* 숫자 배열을 오름차순으로 정렬하는 예시
   => 유니코드 코드 포인트를 기준으로 오름차순으로 정렬(alphabetically, 알파벳 순)
   => 문자열처럼 취급하여 오름차순 정렬함 */
const numbers = [1, 4, 10, 31, 1000];
numbers.sort();

console.log(numbers); // 출력: [1, 10, 1000, 31, 4] <= 주의!! 문자열처럼 취급하여 오름차순 정렬함

/* 콜백 함수를 사용해서 숫자 배열을 내림차순으로 정렬하는 예시 */
const reverseNumbers = [1, 3, 2, 4, 5];
reverseNumbers.sort((a, b) => b - a);

console.log(reverseNumbers); // 출력: [5, 4, 3, 2, 1]

sort() 함수는 원본 배열을 직접 수정하며, 새로운 배열을 반환하지 않습니다.

sort() 함수의 형식은 다음과 같습니다.

구문

JavaScript 
arr.sort([compareFunction]);

arr: sort() 함수를 적용할 원본 배열입니다.

매개변수

sort() 함수의 매개변수 설명
compareFunction 옵션.
정렬 순서를 정의하는 콜백 함수입니다
  • 생략하면 문자열의 유니코드 코드 포인트를 기준으로 오름차순으로 정렬(alphabetically, 알파벳 순)합니다.
  • 이 콜백 함수는 두 개의 인수를 받아서 비교하고, 반환 값에 따라 요소의 위치를 결정합니다.

compareFunction 설명

JavaScript 콜백 함수의 구조 
/**
 * 콜백 함수
 *
 * @param a 비교할 첫 번째 요소입니다.
 * @param b 비교를 위한 두 번째 요소입니다.
 *
 * 콜백 함수는 기명 함수(사용자 정의 함수)나 익명 함수 등으로 사용할 수 있습니다.
 * (당연히) 모든 콜백 함수는 화살표 함수로 사용할 수 있습니다.
 */
compareFunction(a, b) {
    // a와 b를 비교할 로직: 비교 결과를 반환해야 합니다.
}

sort() 함수에 매개변수로 콜백 함수(compareFunction)가 제공되면 이 함수는 두 개의 요소를 인자로 받아서 비교하고, 반환 값에 따라 요소의 위치를 결정합니다.

  • 반환 값이 0보다 작으면 첫 번째 인수를 두 번째 인수보다 앞에 위치시킵니다.
  • 반환 값이 0이면 위치를 변경하지 않습니다.
  • 반환 값이 0보다 크면 첫 번째 인수를 두 번째 인수보다 뒤에 위치시킵니다.

이 원리를 이용하면 사용자 지정 정렬을 수행할 수 있습니다. 예를 들어, 다음과 같은 함수를 사용하여 숫자를 내림차순으로 정렬할 수 있습니다.

JavaScript 
const numbers = [1, 1000, 10, 31];

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

numbers.sort(compareNumbers);

console.log(numbers); // 출력: [1, 10, 31, 1000]

위의 예에서 compareNumbers() 함수는 두 개의 숫자를 인자로 받고, 두 번째 숫자가 첫 번째 숫자보다 크면 음수를 반환하고, 첫 번째 숫자가 두 번째 숫자보다 크면 양수를 반환하고, 두 개의 숫자가 같으면 0을 반환합니다.

따라서 numbers 배열은 compareNumbers() 함수를 사용하여 내림차순으로 정렬됩니다.

반환 값

정렬한 배열을 반환합니다. 반환 값은 변경된 원본 배열 자체입니다. 새로운 배열을 반환하지 않습니다.

주의할 점

숫자 배열을 정렬할 때 주의가 필요합니다.

sort() 함수는 기본적으로 배열의 각 요소가 숫자라도 문자열로 취급하여 정렬합니다. 그러나 이는 반환 값이 문자열이라는 것을 의미합니다. 실제로는 배열의 요소가 문자열로 변환되는 것이 아니라, 비교 시에 임시로 문자열로 변환되어 비교됩니다. 따라서 정렬된 결과는 문자열 형태로 반환되지 않고, 변환된 상태에서 비교되어 정렬된 배열이 반환됩니다.

예를 들어 보겠습니다.

JavaScript 
/* 숫자 배열을 오름차순으로 정렬하는 예시
   => 유니코드 코드 포인트를 기준으로 오름차순으로 정렬(alphabetically, 알파벳 순)
   => 문자열처럼 취급하여 오름차순 정렬함 */
const numbers = [1, 1000, 4, 10, 31];
numbers.sort();

console.log(numbers); // 출력: [1, 10, 1000, 31, 4] <= 주의!! 문자열처럼 취급하여 오름차순 정렬함

이 결과는 sort() 함수로 정렬했을 때 배열의 각 요소가 숫자라도 문자열로 취급하여 정렬한다는 것을 모른다면 예상과 다르게 나올 수 있습니다.

숫자 배열을 올바르게 정렬하려면 매개변수인 콜백 함수로 비교 함수를 제공해야 합니다.

JavaScript 
const numbers = [1, 1000, 4, 10, 31];

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

numbers.sort(compareNumbers);

console.log(numbers); // 출력: [1, 4, 10, 31, 1000]

이렇게 하면 숫자 배열이 올바르게 오름차순으로 정렬됩니다

sort() 함수의 다양한 예시

sort() 함수는 여러 상황에서 다양하게 활용될 수 있습니다. 몇 가지 예시를 살펴보겠습니다.

문자열 정렬

JavaScript 
const fruits = ["apple", "orange", "banana", "grape"];
fruits.sort();

console.log(fruits); // 출력: ["apple", "banana", "grape", "orange"]

숫자 배열 오름차순 정렬

JavaScript 
const numbers = [10, 5, 20, 1];

numbers.sort(function(a, b) {
    return a - b;
});

console.log(numbers); // 출력: [1, 5, 10, 20]

숫자 배열 내림차순 정렬

JavaScript 
const numbers = [10, 5, 20, 1];

numbers.sort(function(a, b) {
    return b - a;
});

console.log(numbers); // 출력: [20, 10, 5, 1]

객체 배열의 특정 속성을 기준으로 정렬

JavaScript 
const students = [
    {name: "김아름", age: 25},
    {name: "나대로", age: 22},
    {name: "다사랑", age: 30}
];

/* 학생의 나이순으로 정렬 */
students.sort(function(a, b) {
    return a.age - b.age;
});

console.log(students);
// 출력: [{name: "나대로", age: 22}, {name: "김아름", age: 25}, {name: "다사랑", age: 30}]

희소 배열에서 사용

비어있는 요소는 배열의 맨 뒤로 이동합니다.

JavaScript 
console.log(["가", "나", , "다"].sort()); // 출력: ["가", "나", "다", 비어 있음]
console.log([, undefined, "가", "나"].sort()); // 출력: ["가", "나", undefined, 비어 있음]
자바스크립트 undefined 값

브라우저 호환성

배열 sort() 함수의 브라우저 호환성
메서드
데스크탑 Chrome
Chrome
데스크탑데스크탑 Edge
Edge
데스크탑 Firefox
Firefox
Safari
Safari
sort() 1 12 1 1

caniuse.com에서 더 자세한 정보를 확인해 보세요.

명세서

배열 sort() 함수의 명세서 사양
명세서 사양
sort() ECMAScript Language Specification
#sec-array.prototype.sort

참고문헌

같이 보기