배열에 데이터를 넣다보면 정렬이 필요할 때가 있습니다. JavaScript에서는 편리하게 정렬할 수 있도록 정렬 매서드를 지원합니다. JavaScript가 제공하는 sort 매서드를 한 번 사용해볼까요?
아래 배열에 sort 매서드를 사용해보도록 하겠습니다.
var array = [1, 3, 10, 100, 2];
array.sort();
결과는 어떨까요? JSFiddle을 이용해서 확인해보겠습니다.
결과는 어떤가요?
OriginalArray: 1,3,10,100,2
SortedArray: 1,10,100,2,3
1, 2, 3, 10, 100으로 정렬될 줄 알았는데, 1, 10, 100, 2, 3으로 정렬이 되는 것을 확인할 수 있습니다.
Array의 Sort 매서드는 기본적으로 유니코드 코드 포인트를 이용하여 정렬을 합니다.
그렇다면, 숫자 크기를 비교하여 정렬하려면 어떻게 해야할까요?
바로, Sort 매서드에 CompareFunction을 제공하면 됩니다. 기본적인 비교 함수는 유니코드 코드 포인트를 비교하는 함수로 내장되어 있는데, 개발자가 직접 비교함수를 제공하여 정렬되게 하는 것입니다. 소스는 아래와 같습니다.
var array = [1, 3, 10, 100, 2];
array.sort(function(a, b) {
return a - b;
});
아래 코드와 같이 비교 함수를 제공했습니다.
function(a, b) {
return a - b;
}
이렇게 하면 결과는 어떻게 나올까요?
아래와 같은 결과를 얻었습니다.
OriginalArray: 1,3,10,100,2
SortedArray: 1,2,3,10,100
오름 차순으로 잘 정렬이 되었네요.
비교함수의 결과가 0보다 크면 a가 b보다 크다는 것을 의미합니다.
비교함수의 결과가 0보다 작으면 a가 b보다 작다는 것을 의미합니다.
비교함수의 결과가 0과 같으면 a와 b가 같다는 것을 의미합니다.
그렇다면 내림차순으로 정렬하려면 어떻게해야할까요? 네 맞습니다. a와 b의 위치만 바꾸면 됩니다.
function(a, b) {
return b - a;
}
비교 함수만 잘 만들면 다양하게 정렬을 할 수 있습니다.
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort
'JavaScript' 카테고리의 다른 글
[JavaScript] 마우스 왼쪽/오른쪽 클릭 판단하기 (0) | 2020.04.23 |
---|---|
[JavaScript] 변수가 Function인지 확인하는 방법 (0) | 2020.04.22 |
[JavaScript] 배열 중간에 요소 추가하기 (splice) (0) | 2020.04.13 |
[JavaScript] Array에서 최대값/최소값 구하기 (apply 사용) (0) | 2020.04.11 |
[Element.classList] JavaScript를 이용한 클래스 제어 (0) | 2020.04.07 |