[JavaScript] 정렬 함수 sort() 함수와 toSorted() 함수 알아보기

let numbers = [1, 20, 2, 30, 3, 40, 5, 4];

numbers.sort();

console.log(numbers); // 결과 : [1, 2, 20, 3, 30, 4, 40, 5]

sort()

배열.sort([compareFunction]);

 

let alp = ['A', 'C', 'D', 'B', 'E', 'G'];

alp.sort()

console.log(alp); // 결과 : ['A', 'B', 'C', 'D', 'E', 'G']

 

sort() 함수는 명칭 그대로 배열 안의 원소를 정렬하는 함수이며,  원래 배열 내에 값들을 재배치하며 정렬한 배열을 다시 반환합니다.

 

위 코드와 같이 원본 배열을 변경하기 때문에 주의가 필요합니다.

 

let numbers = [1, 20, 2, 30, 2, 3, 40, 5, 4];

console.log(numbers); // 결과: [1, 2, 2, 20, 3, 30, 4, 40, 5]

기본적으로 원소들을 문자열로 만든 뒤에, UTF-16 코드 유닛 값을 기준으로 순서를 정렬합니다. 그렇기 때문에 문자열로 바꾼 뒤에 정렬을 하기 때문에 숫자 정렬에 적합하지 않습니다.

 

■ 숫자를 정렬해야 할 때 

sort() 함수는 인자로 정렬 기준을 나타내는 콜백 함수를 함수를 받습니다. 대소비교를 위한 함수에는 2개의 배열 인자가 넘어오며 뺄셈연산을 이용한 다음과 같은 규칙을 따라야 합니다.

 

• 첫 번째 인자가 두 번째 인자보다 작으면 음수를 반환 (자리 바꾸지 않음)
• 첫 번째 인자가 두 번째 인자보다 크면 양수를 반환 (자리 바꿈)
• 첫 번째 인자가 두 번째 인자와 같으면 0을 반환

1. 오름차순

let num = [3, 12, 1, 15, 2, 11, 4]; 

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

console.log(num); // 결과 : [1, 2, 3, 4, 11, 12, 15]

 

 2. 내림차순

let num = [3, 12, 1, 15, 2, 11, 4]; 

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

console.log(num); // 결과 : [15, 12, 11, 4, 3, 2, 1]

 

■ object 정렬

let person = [
    { name : "Park", age : 21},
    { name : "Kim", age : 25},
    { name : "Jung", age : 23},
    { name : "Choi", age : 24}
]

/* 이름순으로 정렬 */
let as = person.sort((a, b) => a.name < b.name ? -1 : a.name > b.name ? 1 : 0);
let de = person.sort((a, b) => a.name > b.name ? -1 : a.name < b.name ? 1 : 0);
    
console.log(as); // 결과 : (오름차순)  Choi, Jung, Kim, Park
console.log(de); // 결과 : (내림차순)  Park, Kim, Jung, Choi

/* 나이순 정렬 */
//오름차순
let asAge = person.sort((a,b) => a["age"] - b["age"]);
//내림차순
let deAge = person.sort((a,b) => b["age"] - a["age"]);

console.log(asAge); // 결과 21, 23, 24, 25
console.log(deAge); // 결과 25, 24, 23, 21

toSorted()

위에서 말했듯이 sort() 함수는 원본 배열을 변경하기 때문에 원본 배열을 변경하지 않고 sort()를 하려면 배열을 복사한 후 배열 사본을 sort() 해야 합니다. 

const nums = [12, 42, 55];

const sortedNums = [...nums].sort();

console.log(sortedNums); // 결과 : 12, 42, 55

 

전개 연산자(...)를 사용하여 [] 빈배열에 nums의 배열 요소들을 전개하고, sort() 함수 사용.

 

이러한 번거로운 일을 하지 않기 위해 탄생한 함수가 바로 toSorted() 함수입니다. sort() 함수 대신에 이 함수를 사용하면 원본 배열을 건드리지 않고 정렬된 배열 사본을 바로 얻을 수 있습니다.

const nums = [12, 42, 55];

const sortedNums = nums.toSorted();

console.log(sortedNums); // 결과 : 12, 42, 55

 

 

 

 

---

 

Reference

• Mdn web docs