함수형 프로그래밍과 JavaScript ES6+ (3) - generator

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

1. generator

암기

제너레이터: 이터레이터이자 이터러블을 생성하는 함수
iterator, next, return

=> 위 사진의 9번째 줄을 보면 알겠지만 iter 자신을 return 하는 것을 알 수 있다.
=> 그러므로 해당 이터레이터는 well-formed-iterator에 해당.

2. yield/return

2-1 yield

next() 함수를 실행하면 value, done을 산출함.

2-2 return

return 은 next의 done을 true로 끝내주는 역할
참고로 for of 문 등의 반복에는 return이 출력되지는 않음

3. generator의 의의

generator를 이용하면 모든 상태, 데이터들을 iterable하게 만들어줄 수 있음.
js에서 어디에서나 어떤 값에서든가 모두 순회를 가능하게 만들어줄 수 있음

4. odds 만들어보기

function *odds(num) {
  for (let i=1; i<=num; i++) {
    if (i%2) {
      yield i;
    }
  }
  return;
}

=> generator를 이용해 홀수만을 출력하는 함수를 제작

=> 여기서 iterable 함수들을 활용해서 관심사 분리를 통해 위의 간단한 기능이지만 함수들로 분리할 수 있음

=> 가장 먼저 무한루프를 도는 함수 작성
=> 신기한게 이 보통 while 무한 반복문 같은 경우는 런타임 에러가 발생하기 쉽상이다.
=> 그렇데 이 generator로 만든 iterator 함수 같은 경우는 함시가 실행 (next())가 됐을때만 yield를 생성하기 때문에 런타임 에러가 발생하지 않는다.

=> 무한 루프를 함수로 기능을 분리

function *infi(num) {
  while (true) yield num++;
}

function *odds(num) {
  for (let i of infi(num)) {
    if (i%2) {
      yield i;
    }
  }
  return;
}

=> 여기에 추가로 limit 범위를 제한하는 기능을 함수로 분리

function *infi(x=0) {
  while (true) yield x++;
}

function *limit(l, iter) {
  for (const a of iter) {
    yield a;
    if (a === l) return;
  }
}

function *odds(num) {
  for (let i of limit(num, infi(1))) {
    if (i%2) {
      yield i;
    }
  }
  return;
}

=> 현재 기존 코드를 리펙토링을 계획하고 있는데 이전 코드를 작성할 때 생각 못했던 컴포넌트 분리, 재활용성 등을 고려해서 계획하고 있다.
=> 이 작업들에서 가장 중요한 포인트는 관심사의 분리라고 생각했다.
=> 그리고 이런 함수형 프로그래밍은 관심사 분리를 위해 TDD와 함께 굉장히 중요한 도구라고 생각됐다.

5. iterable 함수들을 조합하는 방법들

• for of
• 전개 연산자

console.log(...odds(10));
console.log([...odds(10), ...odds(20)]);

• 구조분해, 나머지 연산자

const [head, ...tail] = odds(5);
const [a, b, ...rest] = odds(5);