[JavaScript] 자바스크립트 sort() 함수 이해하고 사용하기

자바스크립트로 정렬을 하고싶을 때 기본적으로 사용할 수 있는 내장 메서드인 sort에 대해서 알아보자.
 
arr이라는 배열에 대해
오름차순은 arr.sort((a, b) => a - b)
내림차순은 arr.sort((a, b) => b - a)
이렇게만 외우고 사용하다보니 왜 이렇게 되는건지, 다른 정렬 기준을 사용하려면 어떻게 해야하는지 활용이 잘 안됐다.
 
그래서 "왜", "어떻게" sort 함수를 사용할 수 있을지 정리해보았다.

---

 

MDN 설명

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

Array.prototype.sort() - JavaScript | MDN

arr.sort([compareFunction]);

 

여기서 compareFunction은 정렬 순서를 정의하는 함수이다. 기본 사용 방법은

compareFunction(a, b)이 0보다 작은 경우 a를 b보다 낮은 색인으로 정렬합니다. 즉, a가 먼저옵니다.
compareFunction(a, b)이 0을 반환하면 a와 b를 서로에 대해 변경하지 않고 모든 다른 요소에 대해 정렬합니다. 
compareFunction(a, b)이 0보다 큰 경우, b를 a보다 낮은 인덱스로 소트합니다.

compareFunction(a, b)은 요소 a와 b의 특정 쌍이 두 개의 인수로 주어질 때 항상 동일한 값을 반환해야합니다. 일치하지 않는 결과가 반환되면 정렬 순서는 정의되지 않습니다.

 

 

주의할 점은, compareFunction 함수를 생략하면 요소를 문자열로 변환하고 유니코드 순서로 문자열을 비교하여 정렬하게 된다. 예를 들어 [101, 11]을 compareFunction을 생략하고 sort()를 사용하면 문자열 "101"과 "11"을 비교하게 되어서 [101, 11]을 반환하지만, [101, 11].sort((a, b) => a - b)로 써주면 원하던대로 [11, 101]로 오름차순되어 반환해준다.

 

정리

sort는 함수를 인자로 받을 수 있고, 그 함수는 두 개의 인수를 받고, 함수의 반환값에 따라 인수의 순서가 결정된다.
1. 반환값이 음수일 때, a가 왼쪽으로 이동 (a의 인덱스가 더 작은 값)
2. 반환값이 양수일 때, b가 왼쪽으로 이동 (b의 인덱스가 더 작은 값)
3. 반환값이 0일 때, 그대로 유지

const arr = [2, 1, 5, 8, 2, 7, 0]

/* 동작 방식 */
function compare(a, b) {
  if (a < b) return -1;
  else if (a > b) return 1;
  else return 0;
}

arr.sort(compare);

/* 간결하게 줄이기 (1) */
arr.sort(function(a, b) {
  return a - b;
});

/* 간결하게 줄이기 (2) */
arr.sort((a, b) => a - b);

 
 

활용

JavaScript에서 제공하는 sort()는 시간 복잡도 $O(NlogN)$을 보장하기 때문에, 코딩테스트에서 시간 복잡도가 $O(N^2)$인 정렬 알고리즘보다 시간을 절약할 수 있고 코드도 간편해 사용하기 좋다.
 
대소문자를 구분하지 않고 문자열을 정렬하고싶을 때는 toUpperCase()를 활용할 수 있다.

const arr = ["home", "Office", "Bank", "airport"]

function compare(a, b) {
  let transA = a.toUpperCase();
  let transB = b.toUpperCase();
  if (transA < transB) return -1;
  else if (transA > transB) return 1;
  else return 0;
}

arr.sort(compare)

 
이렇게 반환값만 조정해서 함수를 작성해주면 원하는대로 정렬할 수 있다.
 

---

MDN 설명 중에 "참고 : ECMAscript 표준은 이러한 동작을 보장하지 않으므로 모든 브라우저(예 : Mozilla 버전은 적어도 2003 년 이후 버전 임)가 이를 존중하지는 않습니다." 이런 말이 있는데, 이에 대해 더 자세한 건 다음에 알아보자