inflearn logo
강의

강의

N
챌린지

챌린지

멘토링

멘토링

N
클립

클립

로드맵

로드맵

지식공유

함수형 프로그래밍과 JavaScript ES6+

go+curry를 사용하여 더 읽기 좋은 코드로 만들기

products가 사라지는 과정

425

benkim077
0

저도 완벽하게 이해했다고 볼 수는 없지만, 정리해봤어요. 혹시 틀리신 부분 지적해주시면 감사합니다!

 

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

 

filter 자체를 log해보면 ..

const anonymous = (a, ..._) => .length ? f(a, ..._) : (..._) => f(a, ..._)

이런 형태에요.

이를 filter에 맞게 풀어보면 ..

const filter = (a, ..._) => {
  _.length ? (
    const anonymous = (a, ..._) => {
      let res = [];
      for (const b of _) {
        if (a(b)) res.push(b);
      }
      return res;
    }
  ) : (
    const anonymous = (a) => (..._) => {
      let res = [];
      for (const b of _) {
        if (a(b)) res.push(b);
      }
      return res;
    }
};

 

여기서 (p) => p.price < 20000) 가 a에 들어가면..

...
    (a) => (..._) => {
      let res = [];
      for (const b of _) {
        if (a(b)) res.push(b);
      }
      return res;
    }
...

const anonymous = (..._) => {
  let res = [];
  for (const b of _) {
    if ((b) => b.price < 20000) res.push(b);
  }
  return res;
}

이렇게 되는 거에요.


go 부분을 풀어보기 전에 reduce를 풀어보면 ..

const reduce = (a, ..._) => {
  _.length ? (
    // 여기서 acc에 ..._이 할당되고 iter는 undefined입니다.
    const anonymous = (a, acc, iter) => {
      if (!iter) {
        iter = acc[Symbol.iterator]();
        acc = iter.next().value;
      }
      for (const b of iter) {
        acc = a(acc, b);
      }
      return acc;
    }
  ) : (
    const anonymous = (a) => (acc, iter) => {
      if (!iter) {
        iter = acc[Symbol.iterator]();
        acc = iter.next().value;
      }
      for (const b of iter) {
        acc = a(acc, b);
      }
      return acc;
    }
  )
}

 

go의 reduce는 ..

const go = (...args) => reduce((a, f) => f(a), args);

const go = (...args) => {
  let iter = args[Symbol.iterator]();
  let acc = iter.next().value;

  for (const b of iter) {
    acc = b(acc);
  }
  return acc;
}

종합했을 때, go(products, filter(p => p.price < 20000), log)는 다음과 같습니다.

// args는 [products, filter(p => p.price < 20000), log]
const go = (...args) => {

  // iter = [filter(p => p.price < 20000), log]
  // acc = products
  let iter = args[Symbol.iterator]();
  let acc = iter.next().value;

  // 원래 for문 자리지만, 2개 뿐이니까 나열할게요.
  // for (const b of iter) {
  //   acc = b(acc);
  // }

  // 1. filter 평가 -> iter[0]
  let res = [];

  // for (const b of products) {
  //   if ((b) => b.price < 20000) res.push(b);
  // }
  if ((b = { name: "반팔티", price: 15000 }) => b.price < 20000) res.push(b);
  if ((b = { name: "긴팔티", price: 20000 }) => b.price < 20000) res.push(b);
  if ((b = { name: "핸드폰케이스", price: 15000 }) => b.price < 20000) res.push(b);
  if ((b = { name: "후드티", price: 30000 }) => b.price < 20000) res.push(b);
  if ((b = { name: "바지", price: 25000 }) => b.price < 20000) res.push(b);
  
  // res = [15000, 15000];
  // filter 끝의 return res와
  // go의 for문에서 acc = b(acc);에 의해
  acc = res;

  // 2. log 수행 -> iter[1]
  acc = log(acc);  // console.log의 리턴은 undefined, 출력은 정상
  
  return acc;
}

 

봐주셔서 감사합니다! 👏

javascript 함수형-프로그래밍

답변 0

함수형 인터페이스 활용

0

357

1

비전공 국비수료생이 볼 수 있을까요?

0

382

1

로드맵으로 프론트엔드 전향이 가능할까요?

0

398

1

요즘시장에 MERN스택으로 개발하는 프로젝트가 많이 있는지 궁금합니다.

0

441

1

이번에 새로 개강한강좌에대해서 문의요

1

238

1

완강 후 결과물 뒤 커버가 겹쳐서 보이는 경우

0

339

0

여러개의 강의 중 어떤걸 먼저 들어야하나요?

1

394

1

업데이트로 인해, Adroid 설정부분이 조금 다릅니다.

1

437

1

질문이 아니라서 여기에 올립니다.

0

367

1

현업에서 백엔드로는 보통 뭐를 사용하나요?

1

390

1

요즘 현직에서 프론트 개발할때...

0

432

1

Frontend도 공부하고 싶은데, NEXT JS 와 Flutter 중 무엇이 나을까요

0

1041

1