Array.prototype.sort() 메서드

배열 요소의 순서를 정렬할 때 Array.prototype.sort() 메서드를 다음과 같이 사용할 수 있다.

const array = [4, 2, 6, 3, 5, 8, 9, 10];

const sorted = array.sort();

console.log(sorted); // [10, 2, 3, 4, 5, 6, 8, 9]

console.log(array); // [10, 2, 3, 4, 5, 6, 8, 9]

이때 원본 배열 array 자체의 순서가 변경된 것을 알 수 있다. 즉, sort() 메서드는 mutator method이다.

원본 배열의 순서를 변경하지 않기 위해 다음과 같이 메서드를 사용하겠다.

const array = [4, 2, 6, 3, 5, 8, 9, 10];

const sorted = [...array].sort();

console.log(sorted); // [10, 2, 3, 4, 5, 6, 8, 9]

console.log(array); // [4, 2, 6, 3, 5, 8, 9, 10]

 

sort 메서드를 이용한 기본 정렬은 문자열의 유니코드 순서로 정렬이 된다. 즉 다음과 같이 4보다 10이 더 앞선 순서로 정렬된다.

const array = [4, 2, 6, 3, 5, 8, 9, 10];

const sorted = [...array].sort();

console.log(sorted); // [10, 2, 3, 4, 5, 6, 8, 9]

따라서 number 타입의 값을 가지는 배열을 정렬하기 위해 sort 메서드를 사용할 때에는 주의해야 하며, 메서드를 그대로 사용할 수 없으므로 메서드 호출 시 인수로 정렬 순서를 정의하는 함수를 전달해야 한다.

sort 메서드의 구문은 다음과 같다.

arr.sort([compareFunction])

메서드를 호출할 때 compareFunction을 전달하지 않으면 위에서 살펴보았듯 문자열의 유니코드 포인트 순서로 기본 정렬하고, compareFunction이 제공되면 compareFunction의 반환값에 따라 정렬한다.

compareFunction의 형식을 살펴보자.

function compare(a, b) {
  if (어떤 순서를 기준으로 a가 b보다 작은 경우, 즉 a가 b보다 앞에 와야 하는 경우) {
    return 음수;
  }
  if (어떤 순서를 기준으로 a가 b보다 큰 경우, 즉 a가 b보다 뒤에 와야 하는 경우) {
    return 양수;
  }
  // 위의 두 경우 외의 경우에는 a와 b가 같다.
  return 0;
}

조건문을 해석해 보면 compare 함수가 매개변수로 전달받은 두 인수 a, b에 대해

두 인수의 순서를 유지할 경우에는 음수를, 두 인수의 순서를 바꾸어 줄 경우에는 양수를, 두 인수가 같을 경우에는 0을 반환해 주는 것이다.

위 형식에 맞게 정수 배열을 정렬해 보자.

우리는 오름차순으로 정수를 정렬하려는 것이므로 a가 b보다 작을 때는 두 인수의 순서를 유지하고, a가 b보다 클 때는 두 인수의 순서를 바꾸어 주어야 하므로 다음과 같이 compare 함수를 작성할 수 있다.

const array = [4, 2, 6, 3, 5, 8, 9, 10];

function compare(a, b) {
  if (a < b) {
    return -1;
  }
  if (a > b) {
    return 1;
  }
  // 위의 두 경우 외의 경우에는 a와 b가 같다.
  return 0;
}

const sorted = [...array].sort(compare);

console.log(sorted); // [2, 3, 4, 5, 6, 8, 9, 10]

우리가 정렬하려는 배열은 정수 배열이므로 a와 b의 차 연산을 이용하면 compare 함수를 다음과 같이 더 간략하게 작성할 수 있다.

const array = [4, 2, 6, 3, 5, 8, 9, 10];

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

const sorted = [...array].sort(compare);

console.log(sorted); // [2, 3, 4, 5, 6, 8, 9, 10]

a - b의 값은 a < b일 때 음수, a > b일 때 양수, a = b일 때 0이므로 앞서 정의했던 compare 함수와 동일하게 동작한다.

위 코드를 화살표 함수를 이용하여 다시 작성해 보자.

const array = [4, 2, 6, 3, 5, 8, 9, 10];

const compare = (a, b) => a - b;

const sorted = [...array].sort(compare);

console.log(sorted); // [2, 3, 4, 5, 6, 8, 9, 10]

const array = [4, 2, 6, 3, 5, 8, 9, 10];

const sorted = [...array].sort((a, b) => a - b);

console.log(sorted); // [2, 3, 4, 5, 6, 8, 9, 10]

만약 정수를 내림차순으로 정렬하고 싶다면 a가 b보다 작을 때에는 순서를 유지하고 a가 b보다 클 때에는 순서를 바꾸어 주어야 하므로 compare 함수를 다음과 같이 작성하면 된다.

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

다시 위 함수를 화살표 함수로 나타내어 보면 다음과 같다.

const array = [4, 2, 6, 3, 5, 8, 9, 10];

const compare = (a, b) => b - a;

const sortedDescend = [...array].sort(compare);

console.log(sortedDescend); // [10, 9, 8, 6, 5, 4, 3, 2]