[js 메서드] 배열.sort()

자바스크립트 내장 메서드인 array.sort()는 배열의 요소를 정렬하는 메서드이다.

sort()메서드는 원본 배열을 변경하므로 주의.

새로운 배열이 만들어지는 것이 아니다.

 

인자를 삽입하지 않고  array.sort()를 그대로 사용할 경우 유니코드 코드 포인트(문자열 순서)에 따라 정렬한다.

이는 숫자로 구성된 배열을 정렬할 때 특히 주의하여야 한다.

숫자라도 문자열로 인식했을 때의 기준으로 정렬되기 때문이다.

아래의 예시를 참고하자.

const months = ['March', 'Jan', 'Feb', 'Dec'];
months.sort();
console.log(months);
// Expected output: Array ["Dec", "Feb", "Jan", "March"]

const array1 = [1, 30, 4, 21, 100000];
array1.sort();
console.log(array1);
// Expected output: Array [1, 100000, 21, 30, 4]

숫자 정렬과 같이 문자열 기준이 아닌 다른 기준의 정렬을 원한다면

sort() 메서드에 정렬 순서를 정의하는 callback 함수를 인자를 넣어줘야한다.

    arr.sort([compareFunction])

인자로 들어가는 compareFunction은 아래와 같이 정의된다.

function compareFunction(a, b) {
  // a와 b를 비교하여 음수, 0, 양수를 반환하는 로직 구현
}

이 함수는 a, b를 이용하여 return값을 음수, 0, 양수 셋 중 하나로 반환해야 한다.

return값에 따라 정렬 기준이 아래와 같이 정해진다.

 

1. 음수: a가 b 보다 앞에 정렬된다.

2. 0: a와 b의 순서는 바뀌지 않는다.

3. 양수: b가 a 보다 앞에 정렬된다.

 

따라서 숫자 배열을 오름차순으로 정렬할 때는 아래와 같이 쓸 수 있다.

const numbers = [4, 2, 7, 1, 5];

numbers.sort((a, b) => a - b);

console.log(numbers); // [1, 2, 4, 5, 7]

 

반대로 숫자를 내림차순으로 정렬하고 싶다면 아래와 같이 쓰면 된다.

const numbers = [4, 2, 7, 1, 5];

numbers.sort((a, b) => b - a);

console.log(numbers); // [7, 5, 4, 2, 1]

 

숫자 외에도 각 요소의 특정 속성을 기준으로 정렬할 수도 있다.

아래는 요소의 문자열 길이를 기준으로 오름차순 정렬한 예이다.

const names = ["John", "Alice", "Bob", "Michael"];

names.sort((a, b) => a.length - b.length);

console.log(names); // ["Bob", "John", "Alice", "Michael"]

 

처음 이야기한 것처럼, 정렬 순서 정의함수를 넣지 않으면 문자열 기준 오름차순으로 정렬된다.

문자열 내림차순으로 정렬은 상대적으로 복잡하다.

 

아래와 같이 경우에 맞게 -1, 1, 0을 지정해주면 된다.

const myArray = ["apple", "banana", "cherry", "date"];

myArray.sort((a, b) => {
  if (a > b) {
    return -1;
  } else if (a < b) {
    return 1;
  } else {
    return 0;
  }
});

console.log(myArray); // ["date", "cherry", "banana", "apple"]

이 방식이 번거롭다면, sort()로 오름차순 정렬 후 .reverse() 메서드를 적용해 순서를 뒤집을 수도 있을 것 같다.

 

 

공식 문서: https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/sort

Array.prototype.sort() - JavaScript | MDN