reduce()로 map과 filter를 만들어보자

reduce()

reduce()는 배열을 순회하면서 정의한 조건을 수행하는 반복문중에 하나이다. 더하기 예제가 많아서 더하기 함수라고 착각할 수 있지만 개념을 정확히 알지 못하면 사용하기 굉장히 어려운 반복문이기도 하다.
기본적인 사용방법은 배열.reduce((acc,curr)=>{},initialValue) 이다.

연습1) 배열안에 숫자의 곱을 구해보자.

const arr = [1, 2, 3, 4, 5];
const reduceArr = arr.reduce(function (acc, curr) {
  return acc * curr;
});

console.log(reduceArr);
// 120

acc는 initialValue를 지정하지 않는다면 배열의 첫번째인 1이 될 것이고 curr은 2가 될것이다. return조건으로 acc와 curr의 곱을 적었으니
1.acc = 1, curr = 2
2.acc = 2, curr = 3
3.acc = 6, curr = 4
4.acc = 24, curr = 5
5.acc = 120
으로 끝이 날것이다. 마지막 값은 acc로 반환해준다는 것을 알아야 한다.

---

연습2) initialValue를 사용해보자.

const arr = [1, 2, 3, 4, 5];
const reduceArr = arr.reduce(function (acc, curr) {
  return acc - curr;
}, 100);

console.log(reduceArr);
// 85

initialValue로 100을 주었고 조건을 acc - curr을 주었다. 순서대로 정리해보았을때
1.acc = 100, curr = 1
2.acc = 99, curr = 2
3.acc = 97, curr = 3
4.acc = 94, curr = 4
5.acc = 90, curr = 5
6.acc = 85
가 되는 것이다.

---

연습3) reduce를 이용하여 map을 만들어보자.

const arr = [1, 2, 3, 4, 5];

Array.prototype.reduceMap = function () {
  const reducedValue = this.reduce(function (acc, curr) {
    acc.push(curr * 2);
    return acc;
  }, []);
  return reducedValue;
};

console.log(arr.reduceMap());
// [2,3,4,5,10]

배열의 값에 2씩 곱하는 map()을 만들어 보았다. initialValue로 빈배열을 주었고 curr값을 acc로 push하는 방식이다. 중요한점은 조건을 모두 push하고 최종 배열을 담은 값은 마지막 acc이기 때문에 return acc를 해야 한다는 것이다. 또한 reduceMap함수 자체도 return을 하지않으면 결국 값이 undefined가 되어서 reducedValue를 return해야 기능을 하게된다.

---

연습4) reduce를 이용하여 filter를 만들어보자.

const arr = [1, 2, 3, 4, 5];

Array.prototype.reduceFilter = function () {
  const reducedValue = this.reduce(function (acc, curr) {
    if (curr < 4) {
      acc.push(curr);
    }
    return acc;
  }, []);
  return reducedValue;
};

console.log(arr.reduceFilter());
//[1,2,3]

배열의 4보다 작은 값만 뽑아내도록 filter를 만들어 보았다. map을 만드는 방식에서 if문을 사용하여 curr이 4보다 작아야한다는 조건을 달았으며, 조건의 true값인 curr은 acc로 push하도록 하였다.

---

결론

acc와 curr이 어떻게 작동하는지를 이해하는 것이 가장 중요하다. initialValue값을 주었을때 첫번째 acc는 initialValue가 되는 것이고 curr은 배열의 첫번째 값이 되며 마지막 return값은 acc가 된다는 것이다.