9. 펼침 연산자로 정렬에 의한 혼란을 피하기

이전까지 펼침 연산자를 이용해서 여러 가지 조작 함수를 대체하는 방법을 알아봤는데 대체하기 쉽지 않은 함수는 어떻게 해야 할까?

 

펼침 연산자로 원본 배열의 사본을 생성하고, 사본을 조작하면 된다.

 

하지만 만만하게 볼 것은 아니다. 조작으로 인한 문제는 표 데이터를 정렬할 때 발생한다.

 

직원 정보가 담긴 배열을 이름 또는 근속 연수를 기준으로 정렬하는 애플리케이션을 개발하는 예제를 보면

 

먼저 배열을 보면

const staff = [
  {
    name: 'Bob',
    years: 10,
  },
  {
    name: 'Amy',
    years: 5,
  },
  {
    name: 'Karen',
    years: 10,
  },
];

이렇게 배열이 구성되어 있고

 

정렬 함수는

function sortByYears(a, b){
    if(a.years == b.years){
        return 0;
    }
    return a.years-b.years;
}
const sortByName = (a,b) => {
    if (a.name === b.name){
        return 0;
    }
    return a.name > b.name ? 1 : -1;
}

 이렇게 구성되어 있다고 하자

 

여기서 근속 연수로 정렬하고 나서 이름으로 다시 정렬했다가 다시 근속 연수로 정렬하면 원래 배열의 순서가 바뀌는 문제가 발생할 수도 있다.(Bob과 Karen의 근속연수가 같아서 저렇게 정렬을 반복한다면 Bob과 Karen의 순서가 바뀌어서 정렬될 수 있다.)

 

그렇기 때문에 배열을 정렬하기 전에 원본 배열과 펼침 연산자로 새로운 배열을 만들기만 하면 된다.

[...staff].sort(sortByYears);

원본 배열을 변경하지 않으므로 정렬 기능을 마음대로 사용할 수 있다.

 

즉, 원본을 내버려 두고 펼침 연산자를 이용해서 사본을 만들고 사본을 정렬한 게 이 글의 핵심이다.