[JavaScript] 배열 정렬 Sort()함수 - 오름차순, 내림차순

sort() 함수

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환하는 함수입니다.
기본 정렬 순서는 문자열의 유니코드를 따라 정렬합니다.

구문

array.sort([compareFunction])

ompareFunction은 매개변수로 정렬순서를 정의하는 함수입니다.
또한 sort()는 배열의 순서를 정렬하고 복사본을 반환하는 것이 아닌,
원 배열을 정렬하고 그 원 배열을 반환하기 때문에 이점은 유의해야 합니다.

정렬방법

1. 오름차순

const array = [2, 4, 5, 8, 30, 1];
array.sort( (a, b) => a - b );
console.log(array);
// output : [1, 2, 4, 5, 8, 30]

간단하게 정렬하는 방법을 설명하자면
a - b < 0 : a가 b보다 작으므로 앞에 있어야 한다.
a - b = 0 : a와 b의 순서를 바꾸지 않는다.
a - b > 0 : b가 a보다 작으므로 앞에 있어야 한다.
이런식으로 정렬을 하는것이라고 할 수 있습니다.

같은 방식으로 a - b를 반대로 b - a로 바꾸면 내림차순이 됩니다.

2. 내림차순

const array = [2, 4, 5, 8, 30, 1];
array.sort( (a, b) => b - a );
console.log(array);
// output : [30, 8, 5, 4, 2, 1]

3. 문자열 정렬

문자열의 정렬에는 위에서 사용한 compareFunction으로 정렬이 되지않습니다.
문자열을 정렬을 할 때는 첫글자를 유니코드로 반환하여 위의 함수처럼 a - b를 빼주면 됩니다.

3-1. 오름차순

const array = ["banana", "grape", "apple", "orange", "kiwi"];
array.sort( (a, b) => a[0].charCodeAt() - b[0].charCodeAt() );
console.log(array);
// ['apple', 'banana', 'grape', 'kiwi', 'orange']

똑같이 위의 b - a처럼 문자열 정렬도 반대로 작성하면 내림차순이 됩니다.

3-2. 내림차순

const array = ["banana", "grape", "apple", "orange", "kiwi"];
array.sort( (a, b) => b[0].charCodeAt() - a[0].charCodeAt() );
console.log(array);
// ['apple', 'banana', 'grape', 'kiwi', 'orange']

3-3. 주의사항

문자열을 정렬할때 위의 식으로 가능하나 만약 첫번째 글자는 같고 두번째 글자는 다를때는
정렬이 제대로 이루어지지 localeCompare()을 이용하여 사전순으로 정렬해야 합니다.

const arr = ["apple", "airport", "about", "account"];
arr.sort((a, b) => a.localeCompare(b))
console.log(arr)
// ['about', 'account', 'airport', 'apple']

참고문서
ZeroCho TV ES2021 자바스크립트 강좌
Array.prototype.sort() - JavaScript - MDN Web Docs
String.prototype.localeCompare() - JavaScript - MDN Web Docs
String.prototype.charCodeAt() - JavaScript - MDN Web Docs