JS Array.sort()

js에서 사용되는 배열의 sort 함수에 대해 정리해보려고 한다.

 

특징

사용 시 기존 데이터가 변경되고 변경된 배열을 반환하는 함수이다.

반환된 정렬은 stable sort가 아닐 수 있다. == 같은 값에 대해 순서가 보장되지 않을 수도 있다.

기본적으로 유니코드 코드 순서대로 정렬해준다.

 

사용 방법

사용 방법은 두 가지가 있는데,

1. 단순하게 유니코드의 코드 순서대로 정렬하기. 해당 방법은 문자열을 사전 순으로 정렬할 때 사용한다. 숫자의 경우 예상과 상당히 다를 수 있기 때문에 사용하지 않는 것을 추천한다.

2. 비교함수(compare function)라는 콜백을 사용해서 내가 원하는 대로 정렬하기. 특정 조건이 있거나 숫자를 오름차순이나 내림차순으로 정렬할 때 사용한다.

const arr = [2,4,5,1,1000]
const charArr = ['가','다','나','하','라']

// 1. 그냥 사용하기
arr.sort() // [1, 1000, 2, 4, 5]
charArr.sort() // ['가', '나', '다', '라', '하']

// 2. 비교함수(callback) 사용하기
arr.sort((a,b)=>a-b) // [1, 2, 4, 5, 1000]
charArr.sort((a,b)=>b.charCodeAt()-a.charCodeAt()) // ['하', '라', '다', '나', '가']
// 2024.05.10 나름 충격적인 업데이트
// 스트링 대소 비교와 삼항 연산자로 사전순 정렬이 가능하더라...
charArr.sort((a,b)=>a > b? -1:1) // ['하', '라', '다', '나', '가']

 

비교함수

두 번째 사용방법 중 비교함수를 잘 알아야 조건을 원하는 대로 설정할 수 있다.

우선 두 가지 인수를 사용할 수 있다. 단순하게 위의 예시처럼 a, b로 사용하고 비교하는 값이다. a,b 순서로 온다고 해서 배열의 요소도 순서대로 오지 않고, a는 다음 값(next)이고 b는 현재 값(current)을 의미한다. 예를 들면 위의 두 번째 예시에서 arr에서 들어오는 요소의 값이 a=2, b=4가 아닌 a=4, b=2라는 말이다.

return 값을 통해 정렬시킨다.

조건1. return값이 0보다 작은 경우, a를 b보다 낮은 순서로 정렬

조건2. return값이 0인 경우, a와 b에 대해 변경이 없고 다른 요소에 대해 정렬

조건3. return값이 0보다 큰 경우, b를 a보다 낮은 순서로 정렬

function compare(a,b){
  if (a is less than b by some ordering criterion) {
    return -1;
  }
  if (a is greater than b by the ordering criterion) {
    return 1;
  }
  // a must be equal to b
  return 0;
}

 

추가사항 - 정렬 알고리즘

sort 함수는 비교함수를 통해 정렬해 준다고 했지만, 비교함수는 정렬의 조건을 정해주는 것일 뿐 실제 정렬 알고리즘은 따로 있다. 정렬 알고리즘이라고 하면 삽입정렬, 버블정렬, 퀵정렬, 합병정렬 등 여러 가지가 존재하고, 각각 상황에 따른 장단점이 존재한다. 그렇기 때문에 브라우저의 엔진에 따라 엔진의 버전에 따라 사용되는 정렬 알고리즘이 다르게 사용되고 있다.

 

고수의 사용법(업데이트 예정)

 

참고

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

https://choyeon-dev.tistory.com/17

 

업데이트

2024.05.10