함수형 프로그래밍과 JavaScript ES6+ (4) - reduce

인프런 유인동님의 '함수형 프로그래밍과 JavaScript ES6+' 강의를 들으며 정리 및 공부한 내용입니다.

지금까지 배운 내용들을 실습(적용)해볼 수 있는 대표적인 함수들로 map, filter, reduce가 있음.

이중 reduce 함수를 개발하는 과정을 통해 함수형 프로그래밍을 미리 체험할 수 있다.

그 과정을 기록하고 느낀점을 서술.

• 1단계
  가장 먼저 단순히 reduce의 기능을 구현한 코드

const nums = [1,2,3,4,5]; 
let total = 0;
for (const a of acc) {
  total = total + a;
}
  
console.log(total);

• 2단계
  reduce함수를 만들어 '재활용성 부여'
  필요한 정의는 '필요한 인자'를 받고 '목표에 맞는 값을 반환'하기
  (강의 내용은 3단계로 바로 넘어감, 그러나 내 생각엔 이 단계가 하나 더 있는게 더 자연스럽다는 생각)

const nums = [1,2,3,4,5];
const reduce = (acc) => {
  let total = 0;
  for (const a of acc) {
    total = total + a;
  }
  
  return total;
}

console.log(reduce(nums))

• 3단계
  reduce함수 내부의 반복되는 기능인 '더하기' 기능을 보조 함수로 분리, 이로써 reduce 함수는 add하는 보조함수를 활용하는 '값을 누적하는 기능'에 집중하게 됨.

  add 함수에 '값을 더하는 기능'을 위임 함으로 추후 add 함수 안에 들어가는 인자들이 유동적으로 변경되더라도 유연하게 대처할 수 있어짐. 또한, 이를 통해서 reduce에 add 함수 외에 다른 커스텀된 함수들을 넣어서 로직을 쉽게 변경이 가능해짐.

참고로 이것은 js가 함수를 인자로 사용할 수 있는 1급 객체이기 때문에 가능.

const products = [
  { name: "반팔티", price: 15000 },
  { name: "긴팔티", price: 20000 },
];
const nums = [1,2,3,4,5];
const add = (a, b) => a + b;
const reduce = (f, acc, iter) => {
  for (const a of iter) {
    acc = f(acc, a);
  }
  
  return acc;
}

console.log(reduce(add, 0, nums))
console.log(reduce((totalPrice, product) => totalPrice+product.price, 0, products));

• 4단계
  인자 없을 경우 default를 iterator로 처리. Array object는 iterable한 객체이다. 그러므로 Symbol.iterator()를 통해 iterator로 만들 수 있다. 여기에 next를 이용해 인자가 없을 경우의 default 값으로 처리해준다. 물론 함수에 없을 경우 할당해주는 기능을 사용할 수 있지만 iterator 개념을 확인하기 위해.

const nums = [1,2,3,4,5];
const add = (a, b) => a + b;
const reduce = (f, acc, iter) => {
  if (!iter) {
    iter = acc[Symbol.iterator]();
    acc = iter.next().value;
  }
  for (const a of iter) {
    acc = f(acc, a);
  }
  
  return acc;
}

console.log(reduce(add, nums))