Javascript 자바스크립트 코딩의 기술 2장 배열로 데이터 컬렉션을 관리하라 (2)

---

2장 배열로 데이터 컬렉션을 관리하라

tip7. 펼침(Spread) 연산자로 배열을 본떠라

책에서는 펼침 연산자라고 지칭하지만 스프레드 연산자로 정리하겠다.(너무 번역투....)

스프레드 연산자는 마침표 세 개...로 표시하며 자바스크립트에서 아주 중요한 연산자이다.
배열뿐만 아니라 Map Collection이나 Generator를 이용하는 데이터 구조 등에서도 사용할 수 있다.
또한 스프레드 연산자는 단독으로 사용할 수 없고 어떤 곳 안에 정보를 펼쳐 넣어야 한다.

반복문이 늘어날수록 코드는 복잡해지기 때문에 스프레드 연산자를 잘 활용하는 것이 중요하다.
또한 원본 데이터에 영향을 주지 않고 새로운 데이터를 생성할 수 있어 데이터 불변성 유지에 좋다. 

function selectBook(title, author, price) {
    return `${title} by ${author} $${price}`;
}

const book = ['에세이', '소설', '시집'];

// selectBook은 임의로 선언된 함수라고 가정
// 파라미터로 배열의 값들을 넣는 경우
selectBook(book[0], book[1], book[2]);

// spread 연산자를 사용한 경우
selectBook(...book);

// 스프레드 연산자 단독으로 사용 시 에러 발생
...book;

 

 위와 같이 코드를 작성했을 때 좋은 점

• mutation이 없음
• 읽기 쉽고 간결함
• 재사용이 가능하고 예측 가능함

tip8. push() 메서드 대신 스프레드 연산자로 원본 변경을 피하라

함수를 호출할 때, 함수에 전달한 값을 변경하지 않을 것이라는 신뢰가 필요하다.
side effect가 없는 함수를 순수 함수(pure function)이라고 하며, 순수 함수를 작성하려고 노력해야 한다.

// push를 사용한 경우
const titles = ['tit1','tit2','tit3'];
titles.push('tit4');
let pushTitles = titles;

const titles = ['tit1','tit2','tit3']
const moreTitles = ['tit0',...titles] // 배열의 앞에 추가하기

const titles = ['tit1','tit2','tit3']
const copyTitles = [...titles] // 배열 복사하기

• 위와 같이 코드 작성시 push를 사용하는 경우, 새로운 항목을 배열 뒤에 추가해 원본 배열이 변경될 뿐더러, 코드도 지저분해진다.
• 스프레드 연산자를 사용하면 앞뒤 상관없이 배열을 추가할 수도 있다.

tip9. 스프레드 연산자로 정렬에 의한 혼란을 피하라

아래 코드는 직원 정보가 담긴 배열을 이름 또는 근속연수로 정렬하는 코드이다.

// 직원 정의
const staff = [
    {
        name: 'Joe',
        years: 10
    },
    {
        name: 'Theo',
        years: 5
    },
    {
        name: 'Dyan',
        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 b.name > a.name ? 1 : -1;
}

 

위의 코드를 이용해 먼저 근속연수로 정렬해 보면,

staff.sort(sortByYears);

// [{name: "Thoe", years: 5} {name: "Joe", years: 10} {name: "Dyan", years: 10}]

이때 staff 변수의 객체도 근속연수로 정렬된다.

이후에 이름순, 근속년수 순으로 정렬해보면 아래와 같이 처음 근속연수로 정렬했을 때와 다른 기댓값을 가지게 된다.

staff.sort(sortByName);
staff.sort(sortByYears);

// {name: "Theo", years: 5} {name: "Dyan", years: 10} {name: "Joe", years: 10}

때문에 스프레드 연산자를 이용하여, 원본 배열에 영향이 가지 않도록 사본을 만들어 조작한다!!

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

//   {name: "Thoe", years: 5} {name: "Joe", years: 10} {name: "Dyan", years: 10}

Reference

자바스크립트 코딩의 기술 요약 / 정리