[JavaScript] sort()

알고리즘을 풀다보면 정렬을 해야할 때가 종종 생긴다.

직접 정렬 알고리즘을 구현해야하는 경우가 아니면 자바스크립트에서 제공해주는 sort()함수를 쓰면 편한데 이번 기회에 sort() 함수에 대해 알아보려고한다.

 

📌 sort()

MDN에서는 다음과 같이 설명하고 있다.

sort() 메서드는 배열의 요소를 적절한 위치에 정렬한 후 그 배열을 반환한다.
기본 정렬 순서는 문자열의 유니코드 코드 포인트를 따른다.

즉, sort()는 기본적으로 유니코드 값 순서대로 정렬된다.

 

sort는 아래 코드처럼 쓰면 된다.

Array.sort([compareFunction])

sort의 파라미터로 함수가 들어오는데 그냥 compareFunction이라고 하겠다.

compareFunction은 정렬 순서를 정의하는 함수이다.

compareFunction의 반환값으로 정렬된 배열을 반환하는데 복사본을 만들어서 정렬하는 것이 아니라 원본을 정렬하기 때문에 원본이 변경된다는 점은 주의해야한다.

 

기본적으로 compareFunction없이 그냥 사용하게 되면 요소들을 문자열로 변환하고 유니코드 순서대로 정렬한다고한다.

 

compareFunction의 반환값에 따라 어떻게 정렬될까?

compareFunction이 a, b 두 개의 값을 매개변수로 받을 때

• 반환값이 0보다 작은 경우 a를 b앞에 정렬
• 반환값이 0보다 큰 경우 b를 a앞에 정렬
• 0일 경우 a와 b의 순서를 바꾸지 않음

 

📌 문자열 정렬

compareFunction이 없을 때

const array = ["banana", "apple", "watermelon", "peach", "grape"];
array.sort();
console.log(array);

혹은

const array = ["banana", "apple", "watermelon", "peach", "grape"];
array.sort((a, b) => {
  if (a > b) return 1;
  else if (a < b) return -1;
  return 0;
});
console.log(array);

// 결과
[ 'apple', 'banana', 'grape', 'peach', 'watermelon' ]

유니코드 순서대로 잘 정렬된 것을 볼 수가 있다.

 

삼항연산자를 쓰면 더 짧게 쓸 수도 있다.

const array = ["banana", "apple", "watermelon", "peach", "grape"];
array.sort((a, b) => {
  return a > b ? 1 : a < b ? -1 : 0;
});
console.log(array);

 

내림차순 정렬

내림차순 정렬을 위해 compareFunction을 활용해볼 것이다.

먼저 compareFunction의 매개변수로 줄 a, b를 출력해보면

const array = ["banana", "apple", "watermelon", "peach", "grape"];
array.sort((a, b) => console.log(a, b));
console.log(array);

// 결과
apple banana
watermelon apple
peach watermelon
grape peach

배열에서 앞에 있는 banana가 b자리에 위치하고 apple이 a자리에 위치한다.

 

이제 정렬을 해보자

내림차순이기 때문에 banana가 apple보다 앞에 와야한다.

따라서 b가 a보다 클 때 1을 리턴해줘야하고 b가 a보다 작으면 -1을 리턴해줘야한다.

const array = ["banana", "apple", "watermelon", "peach", "grape"];
array.sort((a, b) => {
  if (a > b) return -1;
  else if (a < b) return 1;
  return 0;
});
console.log(array);

혹은 삼항연산자를 써서 더 짧게

const array = ["banana", "apple", "watermelon", "peach", "grape"];
array.sort((a, b) => {
  return a > b ? -1 : a < b ? 1 : 0;
});
console.log(array);

// 결과
[ 'watermelon', 'peach', 'grape', 'banana', 'apple' ]

 

📌 숫자 정렬하기

먼저 문자열을 정렬했던 것처럼 정렬을 해보자

const array = [10, 2, 3, 1, 4, 9, 7];
array.sort();
console.log(array);

// 결과
[ 1, 10, 2, 3, 4, 7, 9 ]

결과가 조금 이상하다.

1 다음에 2가 와야하는데 10이 왔다.

이렇게 결과가 나오는 이유는 sort함수가 정렬을 할 때 문자열로 변환하고 유니코드 순으로 정렬하기 때문에 10이 2 앞에 오는 것이다.

 

이런 문제도 compareFunction을 이용해 해결할 수 있다.

const array = [10, 2, 3, 1, 4, 9, 7];
array.sort((a, b) => a - b);
console.log(array);

// 결과
[ 1, 2, 3, 4, 7, 9, 10 ]

숫자를 정렬할 때는 문자열을 정렬할 때만큼 복잡하지는 않다.

compareFunction이 정렬을 할 때 반환값이 0보다 크냐 작냐로 따지기 때문에 숫자들을 정렬할 때는 compareFunction의 매개변수들끼리 뺀 값을 반환해주면 된다.

 

내림차순 정렬

내림차순 정렬에서는 'a - b'를 'b - a'로 바꿔주기만 하면 된다.

const array = [10, 2, 3, 1, 4, 9, 7];
array.sort((a, b) => b - a);
console.log(array);

// 결과
[ 10, 9, 7, 4, 3, 2, 1 ]