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

---

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

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

이전 자바스크립트에서는 데이터 컬렉션을 다루는 구조로 배열과 객체 만 있었으나,
모던 자바스크립트에 Map, Set, WeakMap, WeakSet, 객체, 배열 을 사용할 수 있다.

컬렉션을 선택할 때는 정보로 어떤 작업을 할지 먼저 생각 해야한다.

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

아래 코드는 team 배열을 스프레드 연산자(...)를 사용해 배열을 펼치고, sort() 메서드로 오름차순으로 정렬한 코드이다.

const team = ['Lee','Kim','Son'];
function alphabetizeTeam(team) {
    return [...team].sort();
}

alphabetizeTeam(team); // ["Kim", "Lee", "Son"]

map(), filter(), reduce()등의 배열 메서드를 이용하면 코드 한줄로 정보를 변경하거나 갱신할 수 있다.

• map() : 배열 내의 모든 요소 각각에 대하여 주어진 함수를 호출한 결과를 모아 새로운 배열을 반환
• filter() : 주어진 함수의 테스트를 통과하는 모든 요소를 모아 새로운 배열로 반환
• reduce() : 배열의 각 요소에 대해 주어진 리듀서(reducer) 함수를 실행하고, 하나의 결과값을 반환

const staff = [
        {
            name: 'duckhee', 
            position: 'developer'
        },
        {
            name: 'rain', 
            position: 'musician'
        }];

function getMusician(staff) {
    return staff.filter(member => member.position === 'musician')
}
getMusician(staff);  // [ {name: "rain", position: "musician"} ]

• 위 코드는 객체 값이 들어있는 staff 배열을 받아 getMusician 함수에서 position의 값이 'musician'인 객체를 return 하고 있다.
• 배열에 이터러블(iterable)이 내장되어 있다. 간단히 말해 컬렉션의 현재 위치를 알고 있는 상태에서 컬렉션의 항목을 한 번에 하나씩 처리하는 방법이다.
• 위와 같은 메서드를 통해 배열을 특별한 컬렉션으로 쉽게 변환하거나 다시 배열로 만들 수 있다.

tip6. includes()로 존재 여부를 확인하라

ES6 이전에는 indexOf()로 배열에 특정 데이터가 존재 여부로 존재하면 해당 위치에 index 값을, 존재하지 않으면 -1을 리턴한다.

그러나 아래 코드와 같이, 배열의 길이가 1인 경우, 리턴값이 0이 나오며,

자바스크립트에서 0은 falsy한 값이므로 거짓으로 체크될 수 있다.

하지만 ES2016에 추가된 includes()라는 배열 메소드를 이용하면 값이 배열에 존재하는지 boolean 값을 반환해준다.

const sections = ['shipping'];

function displayShipping(sections) {
    if (sections.indexOf('shipping')) { // 0 를 반환하므로 false로 실행된다.
        return true;
    }
    return false;
}
// false

// 보완코드
function displayShipping(sections) {
    return sections.indexOf('shipping') > -1
}
// true

// includes() 를 사용한 코드
function displayShipping(sections) {
    return sections.includes('shipping')
}

보완코드와 같이, 실무에서 보통 레거시 코드들은 indexOf의 리턴값을 비교하여, indexOf() < 0 인 경우 예외처리하여 사용한다.

하지만 이보다는 includes를 사용하는 것이 나중에 조건이 여러개가 되어도 훨씬더 가독성이 좋다!

(물론 사람에 따라서 indexOf를 더 많이 사용했다면 이게 눈에 더 잘 들어올지도...ㅎㅎ)

Reference

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