[TIL] Array.prototype.sort()

이번 포스팅에서는 자주 사용했지만 정확한 작동원리는 알지 못했던 sort메서드를 다뤄보려고 한다. sort메서드는 원본 배열을 변경하며 배열의 요소를 정렬한다. 기본적으로 오름차순으로 요소를 정렬한다. 사용 문법은 다음과 같다.

arr.sort([compareFunction])

• 매개변수
  compareFunction(Optional)
  정렬 순서를 정의하는 함수. 생략하면 배열은 각 요소의 문자열 변환에 따라 각 문자의 유니코드 코드 포인트 값에 따라 정렬된다.
  
  

1. 기본 정렬하기

• 오름차순으로 정렬된 배열을 반환한다. 이 때, 원본배열을 직접 변경한다.

const food = ['pasta', 'noodle', 'hamburger'];
food.sort();

console.log(food); // ["hamburger", "noodle", "pasta"]

2. 내림차순 정렬하기

• sort메서드를 사용해서 오름차순으로 정렬한 다음, reverse메서드를 사용하면 내림차순으로 정렬할 수 있다.

const food = ['pasta', 'noodle', 'hamburger'];
food.sort();
food.reverse(); 

console.log(food); // ["pasta", "noodle", "hamburger"]

3. 숫자 타입의 요소 정렬하기

• sort메서드의 기본 정렬 순서는 유니코드 코드 포인트의 순서를 다른다. 배열의 요소가 숫자 타입이더라도 일시적으로 문자열로 변환한 후 유니코드 코드 포인트의 순서를 기준으로 정렬한다.

const num = [2, 1, 100, 4, 5, 8];
num.sort();
// 숫자로 구성된 배열은 위의 코드처럼 오름차순으로 정렬되지 않는다.
console.log(num); // [1, 100, 2, 4, 5, 8]

• 숫자 10, 2를 예시로 들었을 때, 문자열 '10'의 유니코드 코드 포인트는 U+0031U+0030이다. 문자열 '2'의 유니코드 코드 포인트는 U+0032이다. 문자열 '10'의 유니코드 코드 포인트가 문자열 '2'유니코드 코드 포인트보다 앞에 있으므로, [10, 2]로 정렬되는 것이다.
• 따라서 숫자 요소를 정렬할 때는 정렬 순서를 정의하는 비교 함수를 매개변수로 전달해줘야 한다.

4-1. 비교 함수를 이용한 정렬

• 비교 함수가 전달되면 배열의 요소는 비교 함수의 반환 값에 따라 정렬된다. a와 b가 비교되는 두 요소라고 지정했을 때 다음과 같이 살펴보자.
  • 비교 함수는 양수나 음수 또는 0을 반환해야 한다.
  • compareFunction(a, b)이 0보다 작은 경우 비교 함수의 첫 번째 인수(a)를 우선하여 정렬 한다.
  • compareFunction(a, b)이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬한다.
  • compareFunction(a, b)이 0보다 큰 경우, 두 번째 인수(b)를 우선하여 정렬한다.

function sortCompare(a, b) {
  if (a < b) return -1;
  if (a > b) return 1;
  if (a === b) return 0;
}

• 비교 함수를 이용한 예시, 숫자로 구성된 배열이 의도대로 오름차순으로 정렬된 것을 확인할 수 있다.

const num = [2, 1, 100, 4, 5, 8];
num.sort((a, b) => a - b);

console.log(num); // [1, 2, 4, 5, 8, 100]

• 내림차순 정렬. 비교 함수의 반환값이 0보다 작으면 b를 우선하여 정렬한다.

const num = [2, 1, 100, 4, 5, 8];
num.sort((a, b) => b - a);

console.log(num); // [100, 8, 5, 4, 2, 1]

4-2. 객체를 요소로 갖는 배열 정렬

const obj = [
  { num: 1, name: 'Kim'},
  { num: 2, name: 'Lee'},
  { num: 3, name: 'Kang'}
];

function compare(key) {
  return (a, b) => {
    if (a[key] > b[key]) {
      return 1;
    } 
    if (a[key] < b[key]) {
      return -1;
    }
    
    return 0;
  }
}
// key값(num)을 기준으로 오름차순 정렬하기
obj.sort(compare('num'));
// value값(name)을 기준으로 오름차순 정렬하기
obj.sort(compare('name'));

출처: 모던 자바스크립트 Deep Dive, MDN