[자바스크립트] reduce로 api 배열 데이터 변환하기

API 데이터 변환 함수

API를 호출해서 배열 데이터를 받았다.

화면에서는 타입별로 데이터를 보여줘야 해서,
배열을 { 타입이름 : 아이템이름[] } 의 객체로 만드는 함수를 만들고 싶다.

 

API 데이터

const res = [
{
    id: 1,
    name: 'A',
    typeId: 1,
    typeName: 'typeA'
},
{
    id: 2,
    name: 'B',
    typeId: 2,
    typeName: 'typeB'
}
];

 

객체로 변환

const object = {
    typeA: ['A'],
    typeB: ['B'],
}

 

reduce

배열 데이터를 변환할 때 reduce를 유용하게 쓸 수 있다.
배열의 각 요소에 대해 주어진 reducer 함수를 실행하고, 결괏값을 반환한다.

 

문법

array.reduce(callback, initialValue);

객체 배열 👉 특정 key 값만 모은 배열
key 하나의 값만 모아야 한다면 map 메서드를 쓰는 것이 더 적절하나,
더 많은 값을 다루고 싶을 때는 reducer가 도움이 된다.

 

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

객체 배열 👉 객체

const filters = dogs.reduce((filters, item) => {
    filters.breed.add(item['견종']);
    filters.size.add(item['크기']);
    filters.color.add(item['색상']);
    return filters;
},
{
    breed: new Set(),
    size: new Set(),
    color: new Set(),
});

 

구현

처음에는 forEach로 구현했으나, reduce로도 구현해보았다.
개인적으로 reduce가 배열을 변환한다는 목적이 더 명확하게 드러나는 것 같아서
변환할 때는 reduce를 사용하는 것이 더 좋을 것 같다.

 

forEach

const formatData = (res) => {
  const object = {};

  res.forEach(item => {
      cosnt { typeName, name } = item;

      // 1. 요소가 있을 때
      if(object[typeName]?.length) {
          object[typeName] = [...object[typeName], name];
          return;
      }

      // 2. 요소가 없을 때
      object[typeName] = [name];
  });
};

 

reduce

const formatData = (res) => {
    const object = res.reduce((object, item) => {
        const { typeName, name } = item;

        return {
            ...object,
            [typeName]: [...object[typeName], name],
        }
    }, {});
};

 

 

reduce dogs 사례 출처

: 자바스크립트 코딩의 기술 (길벗, 2019)을 학습하고 개인 학습용으로 정리한 내용입니다.
  API 데이터 사례는 창작한 내용입니다.