함수형 프로그래밍과 JavaScript ES6+ (5) - mfr

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

아래는 예시로 활용하는 지금까지 구현한 map, filter, reduce 함수

const log = console.log;

const map = (f, iter) => {
  let res = [];
  for (const a of iter) {
    res.push(f(a));
  }
  return res;
};

const filter = (f, iter) => {
  let res = [];
  for (const a of iter) {
    if (f(a)) res.push(a);
  }
  return res;
};

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;
};

const products = [
  { name: "반팔티", price: 15000 },
  { name: "긴팔티", price: 20000 },
  { name: "핸드폰케이스", price: 15000 },
];

const add = (a, b) => a + b;

log(
  reduce(
    add,
    map(
      (p) => p.price,
      filter((p) => p.price < 20000, products)
    )
  )
);

=> 일단 각각의 함수들을 레고 블럭처럼 하나하나 쌓아나가는 부분도 너무 흥미로웠다.
=> 사실 나도 이렇게 프로그래밍을 하고 있었을지도 모른다라는 생각이 들기도 했음 ..

=> 여기서 또 추가로 강의에서 팁을 준 부분은

log(
  reduce(
    add,
    map(
      (p) => p.price,
      filter((p) => p.price < 20000, products)
    )
  )
);

=> 이 함수 덩어리를 읽는 방법이다.
=> 그냥 직관적으로 오른쪽부터 그대로 읽으면 된다.

=> products는 20000이하 필터(함수)된 그리고 p의 price들만 뽑아서 map 한거 그리고 add(함수)를 reduce로 실행해 결과값.

=> 좀더 쉽게 또, 이게 ts랑도 아주 조합이 좋다고 생각이 들었던게

=> add를 사용할때 이용할 데이터를 예상하고

log(
  reduce(
    add,
	[10, 20, 30]
  )
);

=> 또 map 함수를 쓰면서 다음을 예상하고...

log(
  reduce(
    add,
    map(
      (p) => p.price,
      [10, 20, 30]
    )
  )
);

=> 배우면 배울수록 함수형 프로그래밍 방식들은 ts, tdd와 아삼육이라는 생각이 듦.