Javascript 자바스크립트 코딩의 기술 3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라 (3)

---

3장 특수한 컬렉션을 이용해 코드 명료성을 극대화하라

tip16. Set를 이용해 고윳값을 관리하라.

드디어 3장의 마지막 Set!! 를 정리하고 마무리하려고 한다.

앞에 tip15에서 언급했던 강아지에 대한 정보가 들어있는 필터링 조건을 보자.

const dogs = [
    {
        이름 : '맥스',
        크기: '소형견',
        견종: '보스턴테리어',
        색상: '검정색',
    },
    {
        이름 : '도니',
        크기: '대형견',
        견종: '래브라도레트리버',
        색상: '검정색',
    },
    {
        이름 : '섀도',
        크기: '중형견',
        견종: '래브라도레트리버',
        색상: '갈색',
    },
]

• 사용자가 선택할 수 있는 조건을 알려면 선택할 수 있는 모든 값을 수집해야 한다.
• 색상 조건을 수집하기 위해 배열 메서드 map()을 활용해보자.

function getColors(dogs) {
    return dogs.map(dog => dog['색상']);
}

getColors(dogs);
//  ["검정색", "검정색", "갈색"]

• 원하는 대로 색깔로 필터링을 했지만 중복된 정보를 제거해보자.
• 중복된 값을 제거하기 위해 for문을 사용하면 다음과 같다.

function getUnique(attributes) {
    const unique = [];
    for (const attribute of attributes) {
        if (!unique.includes(attribute)) {
            unique.push(attribute);
        }
    }
    
    return unique;
}

const colors = getColors(dogs);
getUnique(colors);
// ['검정색','갈색']

• map() 메서드를 활용해 색깔을 추출했지만, 중복제거를 위해 위와 같이 for문을 활용하여 중복을 제거했다.
• 하지만 for문을 사용하면 코드가 길어지기에 Set를 사용하면,

const colors = ['검정색', '검정색', '갈색'];
const unique = new Set(colors)
// Set {'검정색', '갈색'}

• 중복 제거는 잘 되었지만 우리가 원하는 건 색깔이라는 고유 속성만 담긴 배열이다.
• 그래서 reduce() 메서드를 활용하면 결과값을 배열로 얻을 수 있을뿐더러, 한줄로 간단하게 표현이 가능하다.

[...dogs.reduce((colors, { 색상 }) => colors.add(색상), new Set())];

• reduce() : 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환
• reduce() 문법

arr.reduce(callback[, initialValue])

• callback : 배열 arr의 각 요소에 대해 실행할 함수로 다음 네 가지 인수를 받을 수 있다.
  • accumulator : 콜백의 반환값을 누적. 콜백의 이전 반환값 또는, 콜백의 첫 번째 호출이면서 initialValue를 제공한 경우에는 initialValue의 값
  • currentValue : 처리할 현재 요소.
  • currentIndex(Optional) : 처리할 현재 요소의 인덱스. initialValue를 제공한 경우 0, 아니면 1부터 시작
  • array(Optional) : reduce()를 호출한 배열.
• initialValue(Optional) : callback의 최초 호출에서 첫 번째 인수에 제공하는 값. 초기값을 제공하지 않으면 배열의 첫 번째 요소를 사용한다. 빈 배열에서 초기값 없이 reduce()를 호출하면 오류가 발생한다.
• return : 누적 계산의 결과 값.

Reference

• 자바스크립트 코딩의 기술 요약 / 정리
• reduce() 메서드 문법 : https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Array/reduce

Array.prototype.reduce() - JavaScript | MDN