reduce()

reduce()는 일반적으로 누산을 할때 사용되는 함수로 알고있었다.
하지만 프로젝트 도중 데이터에 있는 날짜 별로 분류를 하거나
데이터를 비교후 합쳐서 새로운 데이터를 만들어야 하는 상황이 생겼고 reduce()함수를 이용해 처리해보았다.

reduce() mdn사이트 링크

reduce()함수의 기본설명은 공식사이트에 잘 나와있어 생략하고 간단하게 사용예시만 알아보자!

예제에 사용된 임시 데이터

    const people = [
      { name: "Jane", age: 20, account_no: "12345", date: "2022-01-02" },
      { name: "Jane", age: 20, account_no: "######", date: "2022-01-02" },
      { name: "Ironman", age: 20, account_no: "12345", date: "2022-01-05" },
      { name: "Ironman", age: 20, account_no: "######", date: "2022-01-05" },
      { name: "Cho", age: 25, account_no: "77777", date: "2022-01-08" },
      { name: "Thor", age: 500, account_no: "66666", date: "2022-01-08" },
    ];

예제1

중복된 이름의 객체를 하나로 만들며 account_no2를 새롭게 추가해 정리하는 방법이다.

    const test = people.reduce((acc, data, idx) => {
      console.log("data:", data, "인덱스", idx);
      //acc의 기본은[]이기 때문에 처음 실행될때 acc.find((e) => e.name === data.name)의 결과는 undefined
      //else에서 { name: "Jane", age: 20, account_no: "12345" }를 acc를 푸쉬
      //다음으로 돌때 name: "Jane" 이 acc에 들어 있음
      //findIndex()를 통해 data의 name과 일치하는 배열에 account_no2 추가

      if (acc.find((e) => e.name === data.name)) {
        const find_data_index = acc.findIndex((e) => e.name === data.name);
        acc[find_data_index].account_no2 = data.account_no;
      } else {
        acc.push({ ...data, index: idx }); //몇번째 동작때 push 되었는지 인덱스로 표시
      }
      return acc;
    }, []);
    console.log("결과", test);

콘솔 결과

중복되는 이름의 객체가 하나로 합쳐지고 account_no는 account_no2라는 이름으로 추가되었다.

예제2

날짜를 기준으로 데이터를 정렬하는 방법이며 날짜는 키값이 된다.

    const test2 = people.reduce((acc, data) => {
      const key = data["date"];
      if (!acc[key]) {
        acc[key] = [];
      }
      acc[key].push(data);
      return acc;
    }, []);
    console.log(test2);

날짜를 기준으로 데이터들이 정리되었다.

리액트를 기준으로 데이터들을 화면에 찍어줄때 map()함수를 자주 사용하게 되는데

console.log(Object.keys(test2));

Object.keys()를 이용해 키값을 추출한 뒤 사용하면 편하게 사용할 수 있다!

예제3

quantity(수량)값의 합계를 구할때도 reduce를 사용하면 편리하다

var items =  [
        {
          item_id: "10830699",
          item_name: "당근",
          item_price: 32000,
          price: 32000,
          quantity: 1
        },
        {
          item_id: "10842408",
          item_name: "고구마",
          item_price: 29900,
          price: 29900,
          quantity: 1
        },
        {
          item_id: "10843115",
          item_name: "감자",
          item_price: 9900,
          price: 9900,
          quantity: 1
        }
      ]

const Quantity_Sum = items.reduce((accumulator, currentObject) => {
  return accumulator + currentObject.quantity;
}, 0);

결과값으로 3이 나온다.

예제4

예제3은 코드프로그래머스 문제를 예시로했다.

위와같은문제를 for문을 돌려서 풀 수 있지만 reduce()를 이용하면 아래와 같이 간단하게 한줄로 풀수있다.

function solution(absolutes, signs) {
    return absolutes.reduce((acc, val, i) => acc + (val * (signs[i] ? 1 : -1)), 0);
}

예제5

function solution(a, b) {
    var answer = a.reduce((acc, val, i) => (acc + val * b[i]), 0);
    return answer;
}