정의 및 사용 방법
sort() 함수는 배열 요소를 정렬합니다.
특징
- 기본 정렬은 각 요소를 문자열로 변환한 뒤 **유니코드 코드 포인트** 값의 정렬 순서를 따릅니다.
- 필요에 따라 **콜백 함수**를 전달하여 정렬 기준을 지정할 수 있습니다.
- 이 함수는 주어진 원본 배열을 직접 수정하며, 새로운 배열을 반환하지 않습니다.
- 유니코드 코드 포인트(Unicode code point)
- 유니코드 코드 포인트는 각 문자를 식별하기 위해 부여된 고유한 숫자 값입니다.
이러한 유니코드 코드 포인트 값은 영어, 한국어, 이모지를 포함한 다양한 언어에서 규격화되어 정렬되어 있습니다. 이 숫자 값의 크기를 기준으로 문자를 정렬할 수 있습니다.
기본 예제
/* 기본 정렬: 문자열 배열을 유니코드 코드 포인트 순서로 정렬하는 예제 */
const enStrings = ["d", "b", "c", "a"];
enStrings.sort();
console.log(enStrings); // ["a", "b", "c", "d"]
/* 콜백 함수를 사용해 숫자의 크기 기준으로 오름차순 정렬하는 예제 */
const sortedNumbers = [1, 4, 10, 31, 1000];
sortedNumbers.sort((a, b) => a - b);
console.log(sortedNumbers); // [1, 4, 10, 31, 1000]
구문
arr.sort();
arr.sort(compareFunction);
arr은 sort() 함수를 적용할 원본 배열입니다.
매개변수
compareFunction |
옵션. 정렬 순서를 정의하는 콜백 함수입니다
|
|---|
반환 값
정렬한 배열을 반환합니다. 반환 값은 변경된 원본 배열 자체입니다. 새로운 배열을 반환하지 않습니다.
사용법 참고 사항
sort() 함수의 기본 정렬은 각 요소를 문자열로 변환한 뒤 **유니코드 코드 포인트** 값의 정렬 순서를 따릅니다. 필요에 따라 콜백 함수를 전달하여 정렬 기준을 지정할 수 있습니다.
이 함수의 기본 정렬의 핵심 개념인 **유니코드 코드 포인트** 값의 정렬 순서가 무엇인지, 그리고 필요에 따라 정렬 기준을 지정하는 **콜백 함수**에 대해 알아봅니다.
**유니코드 코드 포인트** 값의 정렬 순서
기본 정렬 시 sort() 함수는 각 요소를 문자열로 변환한 뒤 **유니코드 코드 포인트** 값의 정렬 순서로 배열 요소를 정렬합니다.
유니코드 코드 포인트 값은 각 문자를 식별하기 위해 부여된 고유한 숫자 값입니다.
이러한 유니코드 코드 포인트 값은 영어, 한국어, 이모지를 포함한 다양한 언어에서 규격화되어 정렬되어 있습니다. 이 숫자의 크기를 비교하면 어느 문자가 앞서는지, 뒤서는지를 알 수 있습니다. 따라서 이 기준을 이용해 배열 요소를 정렬할 수 있습니다.
예를 들면 다음의 표와 같습니다.
| 구분 | 문자 | 유니코드 코드 포인트 값(10진수) |
|---|---|---|
| 영어 대문자 | A |
65 |
| 영어 대문자 | B |
66 |
| 영어 대문자 | C |
67 |
| 영어 소문자 | a |
97 |
| 영어 소문자 | b |
98 |
| 영어 소문자 | c |
99 |
| 숫자 | 0 |
48 |
| 숫자 | 1 |
49 |
| 숫자 | 2 |
50 |
| 한글 음절 | 가 |
44032 |
| 한글 음절 | 나 |
45208 |
| 한글 음절 | 다 |
45796 |
| 이모지 | 😃 |
128512 |
| 이모지 | 🙊 |
128586 |
위 표를 보면 알 수 있듯이, 변환되는 유니코드 코드 포인트 값의 정렬 순서를 알면, 문자열을 유니코드 코드 포인트 값을 기준으로 한 사전식 정렬이나 특정 문자끼리의 순서를 비교할 수 있습니다.
위 표를 참고하여, 다음 예제의 결과가 어떻게 나오는지 확인해 보세요.
/* 알파벳 배열 정렬 예제 */
const enStrings = ["d", "b", "c", "a"];
enStrings.sort();
console.log(enStrings); // ["a", "b", "c", "d"]
/* 한글 배열 정렬 예제 */
const koStrings = ["다", "가", "나"];
koStrings.sort();
console.log(koStrings); // ["가", "나", "다"]
유니코드 코드 포인트에 부여된 숫자 값은 위키백과의 List of Unicode characters를 참고하세요.
필요에 따라 정렬 기준을 지정하는 **콜백 함수**
sort() 함수는 기본적으로 각 요소를 문자열로 변환한 뒤 **유니코드 코드 포인트** 값의 정렬 순서를 따르지만, 필요에 따라 매개변수에 콜백 함수를 전달하여 정렬 기준을 지정할 수 있습니다.
sort() 함수의 구문
arr.sort();
arr.sort(compareFn); // compareFunction (옵션): 매개변수에 콜백 함수를 전달하여 정렬 기준을 지정
콜백 함수(compareFunction) 설명
콜백 함수(compareFunction)의 구조는 다음과 같습니다.
/**
* 콜백 함수
*
* @param a 비교할 첫 번째 요소입니다.undefined가 될 수 없습니다.
* @param b 비교를 위한 두 번째 요소입니다. undefined가 될 수 없습니다.
*
* 콜백 함수는 기명 함수(사용자 정의 함수)나 익명 함수 등으로 사용할 수 있습니다.
* (당연히) 모든 콜백 함수는 화살표 함수로 사용할 수 있습니다.
*/
compareFunction(a, b) {
// a와 b를 비교할 로직: 비교 결과를 반환해야 합니다.
}
sort() 함수에 매개변수로 콜백 함수(compareFunction)가 제공되면 이 함수는 두 개의 요소를 인자로 받아서 비교하고, 반환 값에 따라 요소의 위치를 결정합니다.
- 반환 값이
0보다 작으면 첫 번째 인수를 두 번째 인수보다 앞에 위치시킵니다. - 반환 값이
0이면 위치를 변경하지 않습니다. - 반환 값이
0보다 크면 첫 번째 인수를 두 번째 인수보다 뒤에 위치시킵니다.
이 원리를 이용하면 사용자 지정 정렬을 수행할 수 있습니다. 예를 들어, 다음과 같은 함수를 사용하여 숫자를 오름차순으로 정렬할 수 있습니다.
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() 함수를 사용하여 배열을 정렬할 때에는, 다음과 같은 주의할 점을 알아두어야 합니다.
희소 배열과 undefined 값을 가지는 요소
sort() 함수는 배열 요소의 값을 기준에 따라 정렬합니다.
하지만 배열에 값이 없는 요소(희소 배열)나 undefined 값이 있는 경우에는 항상 배열의 맨 끝으로 보낸다는 점입니다.
const sparseArr = [3, , 1, undefined, 2];
sparseArr.sort();
console.log(sparseArr);
// 출력 예: [1, 2, 3, undefined, <1 empty slot>]
// undefined 값이나 값이 없는 요소(희소 배열)는 정렬 결과에서 배열의 끝에 위치합니다.
이때, 이러한 점을 고려하여 실제 개발에서는 희소 배열을 먼저 배열의 filter() 등으로 정리한 뒤 정렬하면 예측 가능한 결과를 얻을 수 있습니다.
부연설명
배열의 filter() 함수는 콜백 함수를 사용하여 배열의 요소를 필터링합니다. 조건을 콜백 함수로 작성하면, 조건에 만족하는 요소만 새로운 배열로 반환합니다.
const arr = [3, , 1, undefined, 2];
function hasValue(value) {
// undefined 값인 요소는 제거합니다.
return value !== undefined;
}
/*
* filter()는 다음과 같이 동작합니다.
*
* 1. 희소 배열의 빈 슬롯은 콜백 함수가 호출되지 않으므로 자동으로 제외됩니다.
* 2. undefined 값을 가진 요소는 콜백 함수의 반환 값이 false이므로 제외됩니다.
*/
const filteredArr = arr.filter(hasValue);
filteredArr.sort();
console.log(filteredArr); // [1, 2, 3]
**유니코드 코드 포인트** 값의 정렬 순서의 오해
sort() 함수의 기본 정렬은 각 요소를 문자열로 변환한 뒤, 각 문자를 식별하기 위해 부여된 유니코드 코드 포인트 값의 정렬 순서를 기준으로 정렬합니다.
이 정렬 방식은 일부 문자열의 경우, 우리가 기대하는 자연스러운 순서로 정렬되는 것처럼 보이기도 합니다.
const enStrings = ["A", "C", "B"];
enStrings.sort();
console.log(enStrings); // ["A", "B", "C"]
위 예제의 결과는 다음과 같은 유니코드 코드 포인트 값의 순서를 보면 쉽게 예상할 수 있습니다.
| 구분 | 문자 | 유니코드 코드 포인트 값 |
|---|---|---|
| 영어 대문자 | A |
65 |
| 영어 대문자 | B |
66 |
| 영어 대문자 | C |
67 |
하지만 다음 예제를 살펴보면, 기본 정렬 방식의 한계를 분명히 확인할 수 있습니다.
const enStrings = ["A", "a", "B"];
enStrings.sort();
console.log(enStrings); // ["A", "B", "a"] -> 소문자 "a"가 대문자 "B"보다 뒤에 정렬되어 있습니다.
이런 정렬 결과는 우리 인간이 직관적으로 기대하는 자연스러운 정렬이 아닙니다. 우리는 ["A", "B", "a"]가 아닌 ["A", "a", "B"]를 기대합니다.
우리가 주의할 점은, 유니코드 코드 포인트 값의 정렬 순서가 **인간이 기대하는 자연스러운 정렬 순서(Natural order)**와 다른 결과를 만들 수 있다는 점입니다. 아래의 유니코드 코드 포인트 값을 보면, 소문자 a의 유니코드 포인트 값 97은 대문자 B의 유니코드 포인트 값 66보다 크기 때문에, ["A", "a", "B"]를 sort()로 기본 정렬하면 ["A", "B", "a"]로 정렬됩니다.
| 구분 | 문자 | 유니코드 코드 포인트 값 |
|---|---|---|
| 영어 대문자 | A |
65 |
| 영어 대문자 | B |
66 |
| 영어 소문자 | a |
97 |
숫자 배열의 정렬
숫자 배열을 정렬할 때 주의가 필요합니다.
sort() 함수는 기본적으로 배열의 각 요소가 숫자라도 문자열로 취급하여 정렬합니다. 그러나 이는 정렬되는 기준의 값이 문자열이라는 것을 의미합니다. 실제로 배열의 요소 자체가 문자열로 바뀌는 것은 아니며, 정렬 과정에서 비교를 수행할 때 문자열로 변환된 값이 사용됩니다. 따라서 정렬 결과는 문자열이 아닌, 원래의 요소 값이 정렬된 배열로 반환됩니다.
예를 들어 보겠습니다.
/* 숫자 배열을 정렬하는 예시:
요소의 숫자를 문자열로 취급하여 문자열의 해당 유니코드 코드 포인트 순서로 정렬 */
const numbers = [1, 1000, 4, 10, 31];
numbers.sort();
console.log(numbers); // 출력: [1, 10, 1000, 31, 4] <= 주의!! 문자열처럼 취급하여 정렬함
이 결과는 sort() 함수로 정렬했을 때 배열의 각 요소가 숫자라도 문자열로 취급하여 정렬한다는 것을 모른다면 예상과 다르게 나올 수 있습니다.
숫자 배열을 올바르게 정렬하려면 매개변수인 콜백 함수로 비교 함수를 제공해야 합니다.
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() 함수의 **상황별 정렬 방법**을 정리한 요약표입니다.
| 정렬 대상 | 정렬 방법 (코드 예시) | 비고 |
|---|---|---|
| 단순 문자열 | arr.sort() |
유니코드 코드 포인트 값 기준 정렬 (대문자 > 소문자 순) |
| 숫자 오름차순 |
arr.sort(function (a, b) {
return a - b;
});
|
인간이 기대하는 자연스러운 크기 순 정렬 |
| 숫자 내림차순 |
arr.sort(function (a, b) {
return b - a;
});
|
큰 숫자부터 정렬 |
| 데이터 정제 후 |
arr.filter(function (value) {
return value !== undefined;
}).sort(...)
|
희소 배열이나 undefined 값 제거 후 정렬 |
호환성
| 메서드 |
데스크탑 Chrome
|
데스크탑데스크탑 Edge
|
데스크탑 Firefox
|
Safari
|
Node.js
|
|---|---|---|---|---|---|
sort()
|
1 | 12 | 1 | 1 | 0.10 |
명세서
| 명세서 사양 | |
|---|---|
sort()
|
ECMAScript® 2026 Language Specification #sec-array.prototype.sort |