[JavaScript] .sort() 함수를 이용해 배열의 요소 정렬하기

 

설명

Array.prototype.sort()는 배열의 요소를 적절한 위치에 정렬한 후, 그 배열을 반환한다.

 

이때 배열 안 모든 요소는 문자형으로 변환된 후, 유니코드 단위의 값을 비교한 뒤 재정렬된다. 배열 안의 요소가 숫자일 경우도 숫자끼리의 크기 비교를 하지 않고 숫자를 문자열로 변환한 뒤 해당 문자열의 유니코드 값을 비교하여 정렬을 하게 된다. 9와 80이라는 두 수를 sort()로 비교할 경우 숫자로는 9가 80보다 우선하지만, 유니코드 순서 상으로는 80이 9보다 앞에 위치하고 있어 80을 9보다 앞쪽에 정렬하게 된다.

 

 

구문

// 기본 구문 값
arr.sort([compareFunction])

// 화살표함수를 이용한 표현법
arr.sort((a, b) => { /* ... */ }

• compareFunction

compareFunction은 생략 가능하며, 정렬 순서를 정의하는 함수를 지정한다. compareFunction을 작성하지 않고 공란으로 (arr.sort()) 두면 기본적으로 요소를 문자로 변환하고 유니코드 포인트 순서로 문자열을 비교하여 정렬한다.

 

• a, b

a는 비교할 첫 번째 요소, b는 비교할 두 번째 요소를 나타낸다.

 

 

반환 값(return 값)

sort를 이용한 정렬 시 원 데이터의 복사본이 만들어져 정렬되지 않고 원래 배열에 대한 참조를 반환하므로, 반환된 배열을 변경하면 원래 배열도 변경된다.

 

 

sort()로 비교하여 정렬하기

compareFunction이 제공되면 배열 요소는 compare 함수의 반환값(return 값)에 따라 정렬된다.

compare(a, b) 반환 값	정렬 순서
> 0	b가 a보다 우선한다.
=== 0	a와 b의 원래 순서를 유지한다.
< 0	a가 b보다 우선한다.

 

반환 값(return 값)이 0보다 큰지, 동일한지, 작은지에 따라 정렬 순서가 결정되는데, 아래의 예제를 살펴보자.

 

 

return a - b; : 오름차순 정렬

let numbers = [20,10,4,3,2,1,7];

function sortNum(a, b) {
	return a - b;
};

console.log(numbers.sort(sortNum));
// [1, 2, 3, 4, 7, 10, 20]

 

 

 

return b - a; : 내림차순 정렬

let numbers = [20,10,4,3,2,1,7];

function sortNum(a, b) {
	return b - a;
};

console.log(numbers.sort(sortNum));
// [20, 10, 7, 4, 3, 2, 1]

 

 

 

return a === b; : 기존과 동일한 정렬

let numbers = [20,10,4,3,2,1,7];

function sortNum(a, b) {
    return a === b;
};

console.log(numbers.sort(sortNum));
// [20, 10, 4, 3, 2, 1, 7]

 

 

 

return -1; : 뒤집어서 정렬

let numbers = [20,10,4,3,2,1,7];

function sortNum(a, b) {
	return -1;
};

console.log(numbers.sort(sortNum));
// [7, 1, 2, 3, 4, 10, 20]

 

 

sort에 a, b인자를 넣고 return값을 지정하면 특정 룰대로 출력되는 것을 보고 '어떤 방식으로 정렬되는 것일까?'와 '왜 저렇게 정렬이 되는 것일까?' 에 대한 의문이 있었다. 어떤 방식으로 정렬되는 것인지에 대해서는 모던자바스크립트 페이지를 살펴보니 자바스크립트 엔진에 설계된 알고리즘이 계산 절차를 결정하므로, 내부 정렬 동작 원리를 알 필요는 없다고 나와있었다. 또한 return에 대해서도 0보다 큰지, 작은지를 지정해주어 정렬하는 것과 연관이 있으나 그냥 그렇게 정해진 약속이라고 이해하고 넘어가야 하는 부분도 있다는 생활코딩 페이지 내 댓글을 보았다. 아하, 그렇구나.

 

저 a, b인자를 넘기고 return값을 지정하는 동작 원리때문에 sort에 대해 반나절 가까이 검색하고, 정리해보는 시간을 가졌다. 알듯 말듯한 부분에 대해서는 문제를 계속 풀어보면서 내 것으로 익히는 것으로 해야 겠다.

 

 

 

---

[참고 문서]

https://stackoverflow.com/questions/49005027/javascript-sort-function-what-are-return-0-return-1-and-return-1-for

Javascript .sort() function: what are return 0, return -1 and return 1 for?

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Array.prototype.sort() - JavaScript | MDN

https://opentutorials.org/course/50/109

sort - 생활코딩

https://change-words.tistory.com/64

[JavaScript] .sort(function(a, b) { return a - b; })가 작동하는 원리?