[Javascript] sort() 와 toSorted() 함수

[Javascript] sort() 와 toSorted() 함수

sort() 메서드는 자바스크립트에서 배열을 정렬하는 가장 유명한 방법이다. toSorted() 메서드는 비교적 최근에 추가된 함수이다.

sort() 함수

sort() 함수는 원래 배열 내에 값들을 재배치하며 정렬한 배열을 다시 반환한다. 새로운 배열을 반환하는 것이 아니라 기존 배열을 정렬하여 변경하는 방식이다. 

const numbers = [3, 1, 2];
const sorted = numbers.sort(); // [1, 2, 3]
console.log({ nums, sorted}); 
/* { 
  nums : [1, 2, 3],
  sorted : [1, 2, 3]
*/

sort() 함수를 이용한 숫자 배열 정렬 ⭐

sort() 함수는 정렬하기 전에 배열 내의 값을 내부적으로 문자열로 변환한다. 즉, 음수의 경우는 - 뒤에 더 큰 수가 올수록 작아지지만 sort() 함수를 그냥 사용한다면 이상한 결과가 나온다.

//잘못된 숫자 배열 정렬 예시
[100, 3, 1, 20].sort(); // [1, 100, 20, 3]
[-3, -2, 0, 1, 3, -2, -1].sort(); // [-1, -2, -3, 0, 1, 2, 3]

숫자 배열을 제대로 정렬하려면 정렬 기준을 나타내는 콜백함수가 필요하다. 이는 3가지 규칙을 따른다.

• 첫 번째 인자가 두 번째 인자보다 작으면 음수를 반환
• 첫 번째 인자가 두 번째 인자보다 크면 양수를 반환
• 첫 번째 인자가 두 번째 인자보다 같으면 0을 반환

즉, 오름차순으로 정렬하기 위해선 첫 번째 인자에서 두 번째 인자를 뺀다. 반대로 내림차순은 피연산자의 순서를 바꾼다.

//오름차순 정렬
[-3, 2, 0, 1, 3, -2, -1].sort((a, b) => a - b); // [-3, -2, -1, 0, 1,  2,  3]
//내림차순 정렬
[-3, 2, 0, 1, 3, -2, -1].sort((a, b) => b - a); // [3, 2, 1, 0, -1, -2, -3]

sort() 함수로 객체 배열 정렬과 다중 기준 정렬

실제로는 단순한 숫자나 문자보단 복잡한 객체 배열을 정렬할 때가 더 많다. 숫자를 비교하는 것이 아니기 때문에 문자열의 localeCompare() 함수를 콜백함수로 준다.

const countries = [
  { no: 1, code: "KR", name: "Korea" },
  { no: 2, code: "CA", name: "Canada" },
  { no: 3, code: "US", name: "United States" },
  { no: 4, code: "GB", name: "United Kingdom" },
  { no: 5, code: "CN", name: "China" },
];

//문자열인 국가 코드 기준으로 정렬
countries.sort((a, b) => a.code.localeCompare(b.code));
/**
[
  { no: 2, code: 'CA', name: 'Canada' },
  { no: 5, code: 'CN', name: 'China' },
  { no: 4, code: 'GB', name: 'United Kingdom' },
  { no: 1, code: 'KR', name: 'Korea' },
  { no: 3, code: 'US', name: 'United States' }
]
*/

//숫자인 국가 번호를 기준으로 내림차순 정렬
countries.sort((a, b) => b.no - a.no);
/**
[
  { no: 5, code: "CN", name: "China" },
  { no: 4, code: "GB", name: "United Kingdom" },
  { no: 3, code: "US", name: "United States" },
  { no: 2, code: "CA", name: "Canada" },
  { no: 1, code: "KR", name: "Korea" },
]
*/

 

다중 기준으로 객체를 정렬해야 할 때는 다음과 같이 적용한다.

const users = [
  {
    mail: "gregorythomas@gmail.com",
    name: "Brett Holland",
    gender: "M",
    age: 73,
  },
  {
    mail: "hintc12@hotmail.com",
    name: "Madison Martinez",
    gender: "F",
    age: 29,
  },
  {
    mail: "wwagner33@gmail.com",
    name: "Michael Jenkins",
    gender: "M",
    age: 51,
  },
  {
    mail: "ujacksonxejyen@gmail.com",
    name: "Amber Rhodes",
    gender: "F",
    age: 42,
  },
  {
    mail: "daniel7900@gmail.com",
    name: "Karen Rodriguez",
    gender: "F",
    age: 32,
  },
];

//성별이 같을 때만 나이 기준으로 정렬
users.sort((a, b) => {
  if (a.gender === b.gender) {
    return a.age - b.age;
  } else {
    return b.gender.localeCompare(a.gender);
  }
});
/**
[
  {
    mail: "wwagner33@gmail.com",
    name: "Michael Jenkins",
    gender: "M",
    age: 51,
  },
  {
    mail: "gregorythomas@gmail.com",
    name: "Brett Holland",
    gender: "M",
    age: 73,
  },
  {
    mail: "hintc12@hotmail.com",
    name: "Madison Martinez",
    gender: "F",
    age: 29,
  },
  {
    mail: "daniel7900@gmail.com",
    name: "Karen Rodriguez",
    gender: "F",
    age: 32,
  },
  {
    mail: "ujacksonxejyen@gmail.com",
    name: "Amber Rhodes",
    gender: "F",
    age: 42,
  },
]
 */

배열의 toSorted() 함수 ⭐⭐

toSorted() 함수는 sort() 함수와 다르게 원본 배열을 건드리지 않고 사본 배열을 정렬하고 반환한다.

const nums = [3, 1, 2];
const sortedNums = nums.toSorted();
console.log({ nums, sortedNums });
/* 
{
 nums : [3, 1, 2],
 sortedNums : [1, 2, 3]
}
*/

console.log(nums === sortedNums) //false