1. reduce() 메소드의 정의

reduce 메소드는 배열의 각 요소에 대해 주어진 리듀서 함수를 실행하고 하나의 결과값을 반환한다.
reduce 메소드의 콜백함수는 4개의 인자를 가지며 그 요소는 아래와 같다.

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

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

위의 문구는 MDN 공식문서에 있는 reduce 메소드에 대한 설명이다.

리듀서 함수의 반환값을 누산기에 할당되고

이 문구가 아주 중요하다.
아래의 코드를 보자.

2. 잘못된 사용

const totalPrice = cartItem.reduce(
    (acc, cart) =>
      checkedItem.indexOf(cart.id) !== -1
        ? acc + Number(cart.price) * cart.amount
        : null,
    0
  );

위의 코드의 의도는 id가 일치하는 것의 가격만 누산기에 누적해주는것이다.
그렇기에 일치하지 않은경우에는 null을 줌으로서 아무일도 일어나지 않게 하였다.

그것이 패착이었다.
3항 연산자는 표현식의 결과를 리턴해준다.
그렇기에 저렇게 null을 입력해주면 나의 의도대로 아무일도 일어나지 않는게 아니라
null값을 누산기에 누적해준다.

그렇다면 이후 누산기에는 내가 원하는 값이 들어있지 않다.

3. 개선

하여 기존에 의도했던 id값이 일치하면 acc에 가격을 누적하고 일치하지 않으면 누산기값에 변동을 주지않는 코드는 아래와 같다.

const totalPrice = cartItem.reduce(
    (acc, cart) =>
      checkedItem.indexOf(cart.id) !== -1
        ? acc + Number(cart.price) * cart.amount
        : acc,
    0
  );