[자바스크립트 코딩의 기술] 5장 Tip 26

Reduce()로 배열 데이터를 변환하라

배열의 메서드는 콜백함수를 이해하기도 전에 결괏값을 한눈에 예측가능한 것이 장점이다.

게다가 테스트하기도 쉽다.

배열을 이용해서 새로운 데이터를 만들거나, 특정항목의 수가 필요하거나, 배열을 객체처럼 다른형태로 변환해야 하는 경우가 있다. 이럴떄 reduce() 메서드를 사용할 수 있다.

reduce() 메서드는 배열의 길이와 데이터 형태 모두 또는 각각 변경할 수 있다.

  const callback = function (collectedValues, item) { // <label id="reduce.callback" />
    return [...collectedValues, item];
  };
const saying = ['veni', 'vedi', 'veci'];
  const initialValue = [];
  const copy = saying.reduce(callback, initialValue); // <label id="reduce.method" />
  /

1행에서 콜백 함수에 두개의 인수 전달한다. 두 인수는 반환되는 항목(collectedValues)과 개별항목이다.

이 반환값은 누적값이라고 생각하면 된다.

7행의 reduce() 메서드는 두 가지 값, 즉 콜백 함수와 기본값을 전달받는다.

기본값을 작성하면 반환값을 담을 수 있다.

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

reduce() 메서드를 사용한다면

  const colors = dogs.reduce((colors, dog) => { // <label id="reduce.params" />
    if (colors.includes(dog['색상'])) { // <label id="reduce.includes"/>
      return colors;
    }
    return [...colors, dog['색상']]; // <label id="reduce.returnUpdate" />
  }, []); // <label id="reduce.initial" />

마지막 코드를 보면 [] 배열로 함수를 초기화 한다는 것을 알 수 있다.

누적값 또한 중요한데 함수 몸체를 살펴보지 않아도, 다른 배열이 반환된다는 점을 이미 알 수 있다.

그렇게 때문에 누적값은 명시적으로 작성하는 것이 좋다.

또한 누적값을 반환하지 않으면 값은 완전히 사라지기 때문에 오류가 발생한다.

const colors = dogs.reduce((colors, dog) => {
    if (colors.includes(dog['색상'])) {
      return colors;
    }
    [...colors, dog['색상']]; // <label id="reduce.mistake" />
  }, []);

이미 배열에 담겨져있는지 확인하고 새로운 색상이면 5행 컬렉션에 추가 후 갱신된 배열 반환한다.

다시 정리하자면

• 데이터의 일부를 반환해 크기변경
• 동시에 형태 변경

중요한 것은 배열 내부 정보를 기반으로 크기를 변경한다.

const colors = dogs.map(dog => dog['색상']);

강아지 색상만 모을때 코드

const colors = dogs.reduce((colors, dog) => {
    return [...colors, dog['색상']];
  }, []);

두 코드 모두 같은 결과이다.

한가지 속성의 값을 모아야한다면 map()을 사용하는 것이 적절하다. 하지만 더 간단한 방법은 리듀서(reducer)가 더 많은 값을 쉽게 다룰 수 있도록 유연성을 더해준다.

두가지 방법이 있다.

• 첫번째 방법은 어떤 객체의 모든 키에 대해 고윳값을 분류하려면 map()을 여러번 실행하고 세트에 값을 전달한다.

• 두번째 방법은 초기값을 빈 세트로 한 reduce()를 사용해 객체를 채운다.

후자가 더욱 간단한 방법이다.

즉 많은 값을 필요로 할때 map()이 아닌 reduce()를 사용하는 것이 좋다.

const filters = dogs.reduce((filters, itme)=> {
    filters.breed.add(item['breed']);
    filters.size.add(item['size']);
    filters.color.add(item['color']);
    return filters;
}, {
    breed: new Set(),
    size: new Set(),
    color: new Set(),
});

이 게시물은 자바스크립트 코딩의 기술 책을 요약한 내용입니다.