배열의 sort 메서드

안녕하세요, 프로독학러 입니다.

이번 포스팅에서는 배열의 원소를 정렬하는 메서드인 sort 메서드에 대해서 알아보도록 하겠습니다.

표현식은 다음과 같습니다.

arr.sort([compareFunction])

sort메서드의 인자로는 배열의 원소를 비교하는 함수가 들어옵니다.

만약 함수가 생략되면 각 문자의 유니코드 포인트 값에 따라 정렬됩니다.

*유니코드 값에 대한 설명 - 네이버 지식백과

<http://terms.naver.com/entry.nhn?docId=2270340&cid=51173&categoryId=51173>

만약 함수가 생략되지 않는다면 compareFunction은 두 개의 인자를 받습니다.

각각의 인자는 배열안의 비교대상인 a와 b입니다.

그리고 sort 메서드의 정렬되는 기준은 compareFunction의 리턴값이 양수, 음수, 0 이냐에 따라 달라집니다.

이를 예제와 함께 알아보도록 하겠습니다.

var arr = [21, 45, 9, 10, 15, 3];
 

여기에 arr배열이 있습니다. 

처음 할당된 배열의 원소의 정렬은 21, 45, 9, 10, 15, 3 순으로 되어 있습니다.

만약 이 배열에 sort메서드를 하는데, 비교함수를 생략하면 배열은 어떻게 정렬될까요?

var arr = [21, 45, 9, 10, 15, 3];
arr.sort(); //(6) [10, 15, 21, 3, 45, 9]

위와 같이 정렬된 것을 알 수 있습니다.

숫자에서는 10 보다 3이 작지만, 문자열로 변환되어 유니코드 값을 비교하기 때문에 앞자리가 1인 10이 3보다 앞에 오게 됩니다.

그렇다면 비교함수를 지정했을 경우는 어떨까요?

var arr = [21, 45, 9, 10, 15, 3];
 
function sort1(a, b) {
    return a-b;
}
 
arr.sort(sort1); // (6) [3, 9, 10, 15, 21, 45]

sort1이라는 비교함수를 지정했습니다.

이 함수의 인자는 a와 b두개가 들어오는데, a와 b는 비교 대상인 배열의 원소들 입니다.

위에서 언급한 바와 같이 sort메서드는 비교함수의 리턴값이 양수, 음수, 0일 때의 값이 모두 달라집니다.

만약 위의 비교함수에 인자로 arr의 원소 21과 45가 들어왔다고 생각해 봅시다.

a는 21, b는 45가 됩니다. 이 상태에서 a-b를 하면 값이 어떻게 나오죠?

21-45= -24 즉 음수가 나오게 됩니다.

그리고 리턴값이 음수가 되면, 비교 대상인 a, b의 순서는 변하지 않습니다.

그럼 arr 배열을 그대로 [21, 45, 9, 10, 15, 3]이 될겁니다.

좀 더 가보죠. 만약 첫 번째 원소인 21과 세 번째 원소인 9가 비교함수의 인자로 들어온 경우를 생각해 봅시다.

a는 21, b는 9입니다.

21-9=12 이므로 리턴값은 양수입니다.

리턴값이 양수가 나오면 두 비교대상인 원소의 위치가 서로 바뀌게 됩니다.

따라서 arr는 [9, 45, 21, 10, 15, 3]이 됩니다.

이 과정을 반복해 결국 arr는 [3, 9, 10, 15, 21, 45] 로 최종 정렬이 되게 됩니다.

만약 비교함수의 리턴값은 a-b가 아닌 b-a로 주면 어떻게 될까요?

var arr = [21, 45, 9, 10, 15, 3];
 
function sort2(a, b) {
    return b-a;
}
 
arr.sort(sort2); // (6) [45, 21, 15, 10, 9, 3]

아까와는 반대로 정렬된 것을 알 수 있습니다.

a=21, b=45면 b-a는 45-21=24 이므로 양수이고, 두 비교 대상의 위치를 바꾸어 [45, 21, 9, 10, 15, 3]이 됩니다.

이 과정을 반복하면 큰 수가 먼저 정렬되는 결과가 나오게 되는 것입니다.

물론 자바스크립트의 sort메서드는 각각 하나하나 모두 비교하는 방식은 아니지만, 리턴 값이 양수냐 음수냐에 따라 순서를 바꾸거나 바꾸지 않거나 하는 과정을 거칩니다. 

그리고 sort 메서드의 리턴값은 정렬된 배열입니다. 

즉, 복제해 새로운 배열을 만드는 것이 아닌 원본 배열의 순서를 바꿉니다.

여기까지 배열의 sort메서드에 대해서 알아보았습니다.

이해하기 꽤 복잡한 메서드지만, 비교함수의 리턴값에 따라 정렬의 순서가 달라진다는 것에 유의하고 사용하시면 될 것 같습니다.

감사합니다.

** 참고자료

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

*다녀가셨다는 표시는 공감으로 부탁드릴게요! (로그인 하지 않으셔도 공감은 가능합니다 ㅎㅎ)