Reduce

오늘은 reduce 에 대해서 알아보려고 한다 ! 사이드 미니 프로젝트를 하다가 장바구니에 있는 고객의 상품의 총 수량의 값을 구해야 하는 상황이 왔다! 원래 같았다면 for문을 이용하여 하나하나 더했을 텐데 구글 검색을 하다가 발견한 방법중 하나가 reduce 함수였다 !!

reduce란 ?

정의는 다음과 같다 . reduce() 메서드는 배열의 각 요소에 대해 주어진 리듀서 (reducer) 함수를 실행하고, 하나의 결과값을 반환한다

리듀서 함수는 네 개의 인자를 가진다

1.누산기 (acc)
2.현재 값 (cur)
3.현재 인덱스 (idx)
4.원본 배열 (src)

리듀서 함수의 반환 값은 누산기에 할당되고, 누산기는 순회 중 유지되므로 결국 최종 결과는 하나의 값이 된다!

 arr.reduce(callback[, initialValue])

다시말해 누적 계산의 결과 값을 말한다 / 이걸 이용하여 고객의 장바구니에 총 수량의 배열을 다 합칠 수가 있었다!

작동방식

[0, 1, 2, 3, 4].reduce(function(accumulator, currentValue, currentIndex, array) {
  return accumulator + currentValue;
});

화살표 함수 사용

[0, 1, 2, 3, 4].reduce( (prev, curr) => prev + curr );

기본적인 작동방식인데 + 뿐만 아니고 여러가지 기능을 할 수 있다

사용 예 / 프로젝트에서 실 사용

고객의 장바구니의 총 개수를 더하는 작업이다 !

useEffect(() => {
    const userCartCount = carts
      .filter((item) => item?.userId === auth.currentUser?.uid)
      .map((item) => {
        return item.count;
      });

    const CartTotal = userCartCount.reduce((acc, cur) => {
      return acc + cur;
    }, 0);

    setCartCount(CartTotal);
  }, [carts]);

useEffect로 의존성 배열에 carts 가 증가할 때 마다 실행을 하게 해주었고 map과 fillter를 사용하여 사용자의 장바구니 수량만 있는 배열을 userCartCount로 가져온 후 reduce를 사용하여 cartTotal 변수에 고객의 상품 수량을 더해주었다 ! 더한 값을 state로 관리하여 개인 고객들의 총 수량을 얻을 수 있었다!
원래라면 for문의 반복문을 사용하여 코드가 복잡했을텐데 reduce를 사용하여 짧은 코드로 간편하게 코드를 구현 할 수 있었다