reduce

reduce는 상당히 난해한 개념으로 인식이 되었다.

그래도 원리만 알면 별거 없는게 문법이다.

 

reduce에 대해 알아보자.

 

---

reduce는 배열내 값을 계속 누산(accumulate)해서 연산하는 메서드이다.

연산이 된 값이 계속 이어져 나가서 마지막 배열이 연산될 `때,

reduce의 최종 값이 return 된다고 생각을 해야한다.

 

const scores = [22, 28, 80, 48, 32]
const addNumber = scores.reduce((acc, e) => {
  console.log(acc, e)
  return acc + e
}, 19)

console.log(`addNumber의 누산된 값 : `, addNumber);

이 때 19가 어디서 나왔냐고 물을 수 있다.

19는 reduce의 콜백함수 다음 인자로써 누산값의 첫번째 값에 해당한다. (위의 코드를 살펴보자)

 

---

reduce는 파라미터로 콜백함수와 초기누산값이 있으며

reduce의 콜백함수의 파라미터는 실질적으로 4개이다.

 

즉 reduce 메서드는 아래와 같은 방식으로 구성된다.

배열.reduce( ( 누산값, 현재 요소(element), 현재 요소의 인덱스, 현재 배열 )=> { }, 초기누산값 )

 

 

---

 

reduce가 사용하는 파라미터가 상당히 많지만, 꼭 모든 파라미터를 사용할 필요는 없다.

3개의 파라미터만 활용해서 reduce 메서드를 사용해보자.

 

const winter = [5, 6, 6].reduce((acc, e, idx) => {
  console.log(`${acc} + ${e} + ${idx}`)
  return acc + e + idx
}, 5)

/*
5 + 5 + 0
10 + 6 + 1
17 + 6 + 2

= 25
*/

console.log(winter);

reduce가 내부적으로 어떤 파라미터를 받는지 기억하자.

 

---

또한 꼭 누산된 값이 숫자가 아니여도 된다.

push 등의 메서드를 활용한다면 누산된 최종 리턴값을 배열로 만들 수도 있다.

 

const cherries = [1, 2, 3]
const tomatoes = [5, 6, 7].reduce((farm, weight, tax) => {
  if (weight > 5) farm.push(weight + tax)
  return farm
}, cherries)

console.log(tomatoes)

/*
초기 누산값이 cherries라는 배열로 들어간다.
그러므로 farm의 초기 값은 cherries이다.  :  [1, 2, 3]
내부 요소(weight 파라미터)가 5보다 큰 경우, 누산값(farm)에 (weight + tax)한 값을 push한다.
아니라면 그냥 누산하지 않고 넘어간다.

이것이 반복되면
[1, 2, 3, 7, 9]가 될 것이다.
[1, 2, 3]은 cherries의 것이고
나머지 7, 9는 기존 배열을 순회하며 조건에 맞는 요소의 값들을 farm 배열에 push한 것이다.

*/