[자바스크립트 코딩의 기술] 2장

<자바스크립트 코딩의 기술>을 읽고 작성합니다.

 

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

배열로 유연한 컬렉션을 생성하라

이전 자바스크립트에서는 데이터 컬렉션을 다루는 구조로 배열과 객체 만 있었으나,
모던 자바스크립트에 Map, Set, WeakMap, WeakSet, 객체, 배열 을 사용할 수 있다.
어떠한 형태로든 조작(추가, 제거, 정렬, 필터링, 교체 등)을 해야 한다면 배열이 가장 적합한 컬렉션이다.

이터러블(iterable)이란 컬렉션의 현재 위치를 알고 있는 상태에서 컬렉션의 항목을 한 번에 하나씩 처리하는 방법을 의미한다.
배열은 이터러블(iterable)이 내장되어 있어 다양한 메소드를 활용할 수 있다.
문자열처럼 자체적으로 이터러블이 존재하거나 이터러블로 변환할 수 있는 데이터 형식이면 배열에 사용하는 모든 작업을 동일하게 실행할 수 있다.

Includes()로 존재 여부를 확인하라

const sections = ['concat','shipping'];
function display(sections) {
    return sections.indexOf('shipping') > -1;
}

ES6 이전에는 indexOf로 배열에 특정 데이터가 존재하는지 확인했는지 이 경우 리턴값이 0으로 될 수 있다.
0은 자바스크립트에서 falsy한 값이므로 거짓으로 체크될 수 있다는 위험성이 있다.
하지만 ES2016에 추가된 includes()라는 배열 메소드를 이용하면 값이 배열에 존재하는지 boolean 값을 반환해준다.

const sections = ['concat','shipping'];
function display(sections) {
    return sections.includes('shipping');
}

 

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

책에서는 펼침 연산자라고 지칭하지만 스프레드 연산자 로 정리합니다

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

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

function removeItem(items, removable) {
    const index = items.indexOf(removable);
    return [...item.slice(0,index), ...items.slice(index+1)];
}

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

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

// 파라미터로 배열의 값들을 넣는 경우
formateBook(book[0],book[1],book[2]) // 1
formateBook(...book) // 2

 

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

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

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

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

 

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

const staff = [
    {name: 'Joe', years: 10},
    {name: 'Theo', years: 5},
    {name: 'Dyan', ayearsge: 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;
}

-> 원본데이터로 호출하면 원본 데이터의 순서가 바뀌게 된다. 데이터의 사본을 만들고 조작해야 하는 이유이다.

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