[JavaScript] 배열 sort 메서드

Array.prototype.sort

sort 메서드는 배열의 요소를 정렬한다. 원본 배열을 직접 변경하며 정렬된 배열을 반환한다. sort 메서드는 기본적으로 오름차순으로 요소를 정렬한다. 기본적으로 오름차순으로 요소를 정렬하기 때문에 내림차순으로 요소를 정렬하려면 sort 메서드를 사용하여 오름차순으로 정렬한 후 reverse 메서드를 사용해 요소의 순서를 뒤집어야 한다.

 

arr.sort([compareFunction])

 

매개변수

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

반환 값

정렬한 배열. 원 배열이 정렬되는 것에 유의하자. 복사본이 만들어지는 것이 아니다.

 

예제

const fruits = ['banana', 'orange', 'apple'];

//오름차순(ascending) 정렬
fruits.sort();

//sort 메서드는 원본 배열을 직접 변경한다.
console.log(fruits); // ['apple', 'banana', 'orange']

//내림차순(descending) 정렬
fruits.reverse();

//reverse 메서드도 원본 배열을 직접 변경한다.
console.log(fruits); // ['orange', 'banana', 'apple']

const points = [40, 100, 1, 5, 2, 25, 10];

points.sort();

// 숫자 요소들로 이루어진 배열은 의도한 대로 정렬되지 않는다.
console.log(points); //[1, 10, 100, 2, 25, 40, 5]

 

sort 메서드의 기본 정렬 순서는 유니코드 코드 포인트의 순서를 따른다. 배열의 요소가 숫자 타입이라고 해도 배열의 요소를 일시적으로 문자열로 변환한 후 유니코드 코드 포인트의 순서를 기준으로 정렬한다. 숫자 요소를 정렬할 때는 sort 메서드에 정렬 순서를 정의하는 비교 함수를 인수로 전달해야 한다. 비교 함수는 양수나 음수 또는 0을 반환해야 한다. 비교 함수의 반환 값이 0보다 작으면 비교 함수의 첫 번째 인수를 우선하여 정렬하고, 0이면 정렬하지 않으며, 0보다 크면 두 번째 인수를 우선하여 정렬한다.

 

const points = [40, 100, 1, 5, 2, 25, 10];

// 숫자 배열의 오름차순 정렬. 비교 함수의 반환값이 0보다 작으면 a를 우선하여 정렬한다.
points.sort((a, b) => a-b);
console.log(points); // [1, 2, 5, 10, 25, 40, 100]

// 숫자 배열에서 최소/최대값 취득
console.log(points[0], points[points.length - 1]); // 1 100

//숫자 배열의 내림차순 정렬. 비교 함수의 반환값이 0보다 작으면 b를 우선하여 정렬한다.
points.sort((a, b) => b-a);
console.log(points); // [100, 40, 25, 10, 5, 2, 1]

// 숫자 배열에서 최소/최대값 취득
console.log(points[points.length - 1], points[0]); // 1 100

 

 

객체를 요소로 갖는 배열을 정렬하는 예제는 다음과 같다.

const todos = [
	{ id: 4, content: 'JavaScript' },
    { id: 1, content: 'HTML' },
    { id: 2, content: 'CSS' }
];

// 비교 함수, 매개변수 key는 프로퍼티 키다.
function compare(key) {
	// 프로퍼티 값이 문자열인 경우 - 산술 연산으로 비교하면 NaN이 나오므로 비교 연산을 사용한다.
    // 비교 함수는 양수/음수/0을 반환하면 되므로 - 산술 연산 대비 비교 연산을 사용할 수 있다.
    return (a, b) => (a[key] > b[key] ? 1 : (a[key] < b[key] ? -1 : 0));
}

// id 를 기준으로 오름차순 정렬
todos.sort(compare('id'));
console.log(todos);
/*
[
    { id: 1, content: 'HTML' },
    { id: 2, content: 'CSS' },
    { id: 4, content: 'JavaScript' }
];
*/

// content 를 기준으로 오름차순 정렬
todos.sort(compare('content'));
console.log(todos);
/*
[
	{ id: 2, content: 'CSS' },
    { id: 1, content: 'HTML' },
    { id: 4, content: 'JavaScript' }
];
*/