프론트 개발 블로그

Array.prototype.sort() 본문

Javascript

Array.prototype.sort()

maybe.b50 2020. 2. 19. 15:22
배열의 요소를 정렬하고 그 배열을 반환합니다.
 * 기존의 배열도 바뀐다. 

정렬은 stable sort가 아닐 수 있다. 기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따릅니다.

정렬속도와 복잡도는 각 구현방식에 따라 다를 수 있다.

arr.sort([compareFunction])

 

매개변수

compareFunction

정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라

각 문자의 유니코드 코드 포인트 값에 따라 정렬됩니다.

 

반환값

정렬한 배열

* 기존 배열이 정렬됨! 


compareFunction 이 제공되지 않으면 요소를 문자열로 변환하고 유니코드 코드 포인트 순서로 문자열을 비교하여 정리합니다. 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
const numbers = [41523];
const sortNum = numbers.sort((a, b) => {
    const result = a - b;
    console.log(`${a} - ${b} : ${result}`);
 
// compare 함수 형식
    if(a < b) {                     // a가 b보다 작으면 -1 : a를 b보다 낮은 색인으로 정렬
        console.log('-1');
        return -1;
    } else if(a > b) {           // a가 b보다 크면 1 : b를 a보다 낮은 인덱스로 소트
        console.log('1');
        return 1;
    } else {
        console.log('0');        // a, b는 변경하지 않음
        return 0;
    };
 
    return result;
});
 
/*
 
1, 4  = -1       // [1, 4] 
5, 1  = 1        // [1, 5, 4]
5, 4  = 1        // [1, 4, 5]
2, 4  = -1       // [1, 2, 4, 5]
3, 4  = -1       // [1, 2, 3, 4, 5]
3, 2  = 1        // [1, 2, 3, 4, 5]
 
*/
 
console.log(sortNum); // [1, 2, 3, 4, 5]

sort 함수 사용 시에, a와 b를 어떤 식으로 비교를 하는 지 궁금했었다.

배열 [4, 1, 5, 2, 3]이 있다면 자기 자신과 앞의 값을 비교한다고 생각했었는데 또 코드로 찍어보면 그렇지도 않다.

mbn문서에서는 stable sort가 아니어서, 내가 생각했던 것과 다른 규칙으로 정렬 될 수 있다.

 

그래서 혼란스러웠고? 

a, b의 비교 규칙은 배열의 모든 값이 비교된다고 생각하고 넘어가기로 했다.

더보기

https://en.wikipedia.org/wiki/Sorting_algorithm#Stability

stability 라고 참고 문서가 있는데 대략적으로 저런 식으로 정렬 알고리즘이 진행되는구나 생각하고 넘어가기로...

 

어쨌든 compare 함수의 반환값을 확인해보면,

a, b가 비교 시 0이 나올 경우 a, b는 변경하지 않는다.
a, b가 비교 시 0보다 작을 경우(-) a는 b보다 낮은 색인으로 정렬된다. (b의 왼쪽에 a가 위치한다)
a, b가 비교 시 0보다 클 경우(+)  b는 a보다 낮은 색인으로 정렬된다. (a는 b의 오른쪽에 위치한다)

위의 반환값으로 a, b 의 위치가 정렬된다.  

같은 맥락으로 return b - a 했을 때 정렬된 배열이 반전됨으로 내림차순인 배열 값을 얻을 수 있다.

 

 

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

 

https://stackoverflow.com/questions/41121068/how-does-javascripts-sort-comparefunction-work

 

 

반응형

'Javascript' 카테고리의 다른 글

구조 분해 할당 표현식  (0) 2020.02.21
[JS문법] 조건문 사용하기  (0) 2020.02.20
Array.prototype.join()  (0) 2020.02.19
Array.prototype.map()  (0) 2020.02.19
Truthy / Falsy  (0) 2020.02.18