출처 : https://blog.smartcodehub.com/reduce-function-from-different-view/

reduce 는 array 에 2가지 파라미터(fn:reducer, init-value)를 가지는 함수 입니다. 초기값(init-vale)에서 시작하며, reducer(acc, currentItem, index, fullArray) 함수를 통해 값을 처리할 수 있습니다.

acc : 누적된 값
currentItem : 현재 정보
index : 처리 인덱스
fullArray : 입력받은 초기 전체 배열 값

아래와 같은 배열을 만들고

let data = [
  {name: "Raphel", gender: "male"},
  {name: "Tom", gender: "male"},
  {name: "Jerry", gender: "male"},
  {name: "Dorry", gender: "female"},
  {name: "Suzie", gender: "female"},
  {name: "Dianna", gender: "female"},
  {name: "Prem", gender: "male"},
];

아래와 같은 데이터셋으로 변경하고 싶다면

genderwise : {
"male":[
    {"name":"Raphel","gender":"male"},
    {"name":"Tom","gender":"male"},
    {"name":"Jerry","gender":"male"},
    {"name":"Prem","gender":"male"}
    ],
"female":[
    {"name":"Dorry","gender":"female"},
    {"name":"Suzie","gender":"female"},
    {"name":"Dianna","gender":"female"}
]}

1. forEach 반복문을 활용한 방법

const genderwise = {male: [], female: []};
data.forEach(item => genderwise[item.gender].push(item));

2. reduce 를 활용한 방법

let data = [
  {name: "Raphel", gender: "male"},
  {name: "Tom", gender: "male"},
  {name: "Jerry", gender: "male"},
  {name: "Dorry", gender: "female"},
  {name: "Suzie", gender: "female"},
  {name: "Dianna", gender: "female"},
  {name: "Prem", gender: "male"},
];


let genderwise = data.reduce((acc, currentItem, index, fullArray) => {
    acc[currentItem.gender].push(currentItem);
    return acc;  
}, {male: [], female: []});

맺음말

reduce 를 사용하면 datapipe (데이터 연결기법)을 통해 하나의 라인으로 데이터를 처리하는 것이 가능해 집니다.