sort() 메서드란?
sort()메서드는 배열의 요소를 적절하게 정렬할 때 유용하다.
(오름차순👆 혹은 내림차순👇)
문법
array.sort([compareFunction])
매개변수(parameter)로 비교함수를 받을 수 있다.
sort 메서드는 원본 배열을 직접 변경하여 정렬된 배열을 반환한다.
(이렇게 원본 배열을 직접 변경하는 메소드를 "mutator method"라고 부른다.
이와 상반되는 메소드는 "accessor method"라고 부른다. 예를 들어, map이나 filter 메소드는 원본 배열을 변경하지 않고 새로운 배열을 생성하여 반환한다. )
기본 정렬 순서는 오름차순이다.
하지만 정확히 표현하자면 문자열의 유니코드 코드 포인트를 따른다!
따라서, 배열의 요소가 숫자 타입이여도 배열의 요소를 일시적으로 문자열로 변환 후 문자열의 유니코드를 비교하여 정렬한다.
예시 코드를 보며 좀 더 살펴보자.
// 1. 과일배열(fruits) 정렬
const fruits = ['Banana', 'Apple', 'Orange'];
fruits.sort();
console.log(fruits);
// ['Apple', 'Banana', 'Orange']
// 2. 점수배열(scores) 정렬
const scores = [2, 3, 10, 1, 100];
scores.sort();
console.log(scores);
// [1, 10, 100, 2, 3]문자열을 비교할때는 유니코드 값으로 비교하며 한 글자씩 비교한다.
-
알파벳은 유니코드에서 대문자 이후에 소문자가 오기 때문에 소문자가 더 크다. 이것은 숫자를 정렬할때도 마찬가지이다
-
10과 2의 경우
문자열 10의 Unicode 코드 포인트 U+0031U+0030
문자열 2의 Unicode 코드 포인트 U+0032 -
10의 Unicode 코드 포인트가 앞서므로 10이 2보다 앞으로 정렬된다.
비교함수(compare function)
비교함수란 정렬 순서를 정의하는 함수이다.
앞서 살펴보았듯이 생략할 경우 각 문자의 유니코드 포인트 값에 따라 정렬한다. 비교 함수의 형식은 다음과 같다.
function compare(a, b) {
if (a is less than b by some ordering criterion) {
return -1;
}
if (a is greater than b by the ordering criterion) {
return 1;
}
// a must be equal to b
return 0;
}- 비교함수는 두개의 매개변수(a, b)를 받고 비교함수 내부의 로직을 실행하여 비교한다.
- 비교함수의 반환값이 음수면 순서를 그대로 유지하고 반환값이 양수이면 b를 a보다 우선하여 정렬하고 반환값이 0인 경우 서로에 대해 변경하지 않고 모두 다른 요소에 대해 정렬합니다.
const scores = [2, 3, 10, 1, 100];
scores.sort((a, b) => a - b);
console.log(scores);
// [1, 2, 3, 10, 100]예제
숫자 배열 오름차순 정렬
const scores = [2, 3, 10, 1, 100];
scores.sort((a, b) => a - b);
console.log(scores); // [1, 2, 3, 10, 100]숫자 배열 내림차순 정렬
const scores = [2, 3, 10, 1, 100];
scores.sort((a, b) => b - a);
console.log(scores); // [100, 10, 3, 2, 1]비 ASCII 문자 정렬
const items = ['réservé', 'premier', 'cliché', 'communiqué', 'café', 'adieu'];
items.sort((a, b) => a.localeCompare(b));
// items is ['adieu', 'café', 'cliché', 'communiqué', 'premier', 'réservé']-
localeCompare() 메서드는 기준 문자열과 비교했을 때 비교 대상 문자열이 정렬상 전에 오는지, 후에 오는지 혹은 같은 순서에 배치되는지를 알려주는 숫자를 리턴한다.
-
a.localeCompare(b)일때
a가 b보다 전에 오면 -(음수)
a가 b보다 후에 오면 +(양수)
같으면 0
객체를 요소로 갖는 배열 정렬
const fruits = [
{ name: 'Banana', price: 100 },
{ name: 'Apple', price: 75 },
{ name: 'Orange', price: 20 },
];// 비교함수
const compare = (key) => (a, b) => {
return a[key] > a[key] ? 1 : a[key] < b[key] ? -1 : 0;
};// name으로 정렬
console.log(fruits.sort(compare('name')));
/*
[
{ name: 'Apple', score: 75 },
{ name: 'Banana', price: 100 },
{ name: 'Orange', score: 20},
]
*/// price로 정렬
console.log(fruits.sort(compare('price')));
/*
[
{ name: 'Orange', score: 20},
{ name: 'Apple', score: 75 },
{ name: 'Banana', price: 100 },
]
*/