Array.prototype.sort() 메서드

자바스크립트에서는 기본적으로 정렬 함수를 제공한다. 가장 대표적인 정렬 메서드는 Array.prototype.sort()이다.

 

이 메서드는 기본적으로 모든 배열에 사용할 수 있고, 아래와 같은 방식으로 사용한다.

 

const array1 = [5, 7, 2, 9, 6, 13];
const array2 = ['red', 'blue', 'yellow', 'green']

console.log(array1.sort());
console.log(array2.sort());

/*
[ 13, 2, 5, 6, 7, 9 ]
[ 'blue', 'green', 'red', 'yellow' ]
*/

 

배열에 sort() 메서드를 호출하면 호출한 배열이 정렬된다. 원소가 숫자 또는 문자인 경우 모두 쉽게 정렬이 가능하다. 따라서 실제로는 정렬 함수를 직접 사용하는 경우보다 sort()메서드를 사용하는 경우가 더 많다. 

 

sort()는 호출되는 환경에 따라 차이가 있다. firefox 브라우저의 경우 합병 정렬을 사용하고, Chrome V8의 경우 합병과 삽입 정렬의 하이브리드 버전인 Tim sort를 사용한다고 알려져 있다. 해당 알고리즘의 복잡도는 O(n log n)이며, 안정 정렬이고, 제자리 정렬(In-place)이다.

 

sort() 메서드는 매개변수로 비교함수(compare function)을 넣어 사용한다. 비교함수에는 2개의 매개변수를 전달 가능하다.

const items = [
  {key: 'sky', value: 10},
  {key: 'wind', value: 5},
  {key: 'cloud', value: 8},
]

// 오름차순 정렬
items.sort((a, b) => {
  if(a.value > b.value) {
    return 1;
  }
  
  if(a.value < b.value) {
    return -1
  }
  // a.value === b.value
  return 0;
})

console.log(items)
/*
[
  { key: 'wind', value: 5 },
  { key: 'cloud', value: 8 },
  { key: 'sky', value: 10 }
]
*/

 

a는 0번 인덱스, b는 1번 인덱스 원소라고 할 수 있다. a.value가 b.value보다 크다면 1을 리턴한다. 정렬함수는 그 다음 원소인 2번 인덱스 원소를 b에 할당해 a와 비교한다. 만약 b가 a보다 크다면 b를 a에 할당하고 새로운 b는 그 다음 원소인 3번 인덱스 원소를 할당해 비교를 진행한다.

 

sort()의 비교함수에서 1, -1, 0을 반환한다고 해서 반드시 3개의 값 중 하나만 전달해야 한느 것은 아니다. 두 값 중 더 큰 값이 다음 비교 대상자가 되는 것이다.

const items = [
  {key: 'sky', value: 10},
  {key: 'wind', value: 5},
  {key: 'cloud', value: 8},
]

items.sort((a, b) => {
	//오름차순 정렬
  return a.value - b.value;
})

console.log(items)
/*
[
  { key: 'wind', value: 5 },
  { key: 'cloud', value: 8 },
  { key: 'sky', value: 10 }
]
*/

 

응용

 

// 내림차순

const items = [
  {key: 'sky', value: 10},
  {key: 'wind', value: 5},
  {key: 'cloud', value: 8},
]

// 예시차 만들어 본 것이다. 복잡한 소팅의 경우 이렇게 함수 자체를 넘길 수 있다. 
const compareDesc = (a, b) => b.value - a.value

//불필요한 익명 함수 {} 호출이 일어남. 여기서 compareDesc를 호출하니 단계 늘어남.
// items.sort((a, b) => {
//   return compareDesc(a, b )
// })

// 소트 함수에서 직접 호출함. 익명함수를 부르지 않으니 단계 감소
items.sort(compareDesc)


console.log(items)
/*
[
  { key: 'sky', value: 10 },
  { key: 'cloud', value: 8 },
  { key: 'wind', value: 5 }
]
*/

 

 

// 절대값 비교

const items = [
  {key: 'sky', value: 10},
  {key: 'wind', value: -9},
  {key: 'cloud', value: -20},
]

// 절대값 비교
  const compareAbs = (a, b) => Math.abs(b.value) - Math.abs(a.value)

items.sort(compareAbs)

console.log(items)
/*
[
  { key: 'cloud', value: -20 },
  { key: 'sky', value: 10 },
  { key: 'wind', value: -9 }
]
*/

 

간단한 경우에는 sort() 함수 내에 직접 익명함수를 만들어 사용할 수도 있겠지만, 대부분의 경우 비교함수를 별도로 만들어 파라미터로 매개변수로 넘기는 편이 낫다. 가독성이나 독립성의 측면에서 그러하다.