generator

[왜 제너레이터 함수를 써야하는가]

1. 비동기 구조를 동기적 코드방식으로 작성할 수 있게한다

   • async await도 제너레이터 기반으로 만들어 졌다
   • 작성된 형태는 동기적이나 실행되는 방식은 비동기적으로 코드 작성 가능 ex) async await

2. 이터레이터와 이터러블을 쉽게 사용 할 수 있다

   • next()코드와 Symbol.iterator() 코드를 이미 내장하고 있다

3. generator 함수는 동시적 특성, 코루틴 특성을 가지고있다

   • 코루틴 : 협동루틴, 서로가 서로를 호출하는 관계 suspend/ resume 이 가능
   • 서브루틴 : 값을 반환하는 보통 함수
   • 차이점 : 일반함수는 caller가 call 하면 callee함수가 콜스택에 작동하고 로직을 끝내면 return 하고 사라진다. 다시 호출하면 처음부터 다시 시작한다.
   • 반면, 코루틴은 종료된 함수라도 다시 실행될때 진입점을 자신이 원하는 곳으로 다시 설정할 수 있다. generator 함수의 경우 함수의 스택 프레임(함수 컨텍스트)을 저장 하고있기 때문에 가능하다. 객체가 yield 표현 식을 만나면 잠시 suspend 되는 동시에 함수컨텍스트를 복사한 후 콜스택을 벗어 낫다가 next() 메서드를 호출하면 저장해 놓은 스택 프레임들을 복원 한다.
   • 코루틴 특성을 잘이용하면 쓰레드 프로그래밍 없이 동시성 프로그래밍이 가능해진다

4. 메모리 효율에 기여 할 수 있다

   • 느긋한 계산(값을 받기까지 그 시간을 지연시키고 늦춤)이 가능하다
   • yield 값을 넘겨주거나 저장하고 값이 필요할때 next() 호출해 시간을 지연하며 작업할 수 있다

[코드로 보기]

function* quips(name) {
  yield "hello " + name + "!";
  yield "i hope you are enjoying the blog posts";
  if (name.startsWith("X")) {
    yield "it's cool how your name starts with X, " + name;
  }
  yield "see you later!";
}
// yield는 return 과 비슷
// return은 함수당 한번 실행되지만
// yield 는 여러번 실행 가능

// 함수는 스스로 실행을 멈출 수 없지만
// 제너레이터 함수는 실행을 멈출 수 있다

> var iter = quips("jorendorff");
  [object Generator]
	// 함수를 바로 호출하지 않고 제너레이터 객체 를 리턴

> iter.next()
  { value: "hello jorendorff!", done: false }
> iter.next()
  { value: "i hope you are enjoying the blog posts", done: false }
> iter.next()
  { value: "see you later!", done: false }
> iter.next()
  { value: undefined, done: true }
	// 다음 yield 구분에 다 다를 때까지 계속 실행
	// .done이 true가 되고 마지막에 undefined를 리턴

[generator는 쓰레드가 아니다]

• 쓰레드를 지원하는 언어는 여러 코드를 동시에 실행시킨다
• 제너레이터 코드는 제너레이터를 호출하는 코드와 같은 쓰레드에서 실행된다
• 동시에 실행되는 경우는 없고 yield구문에 의해서만 실행을 멈춘다

[generator는 이터레이터다]

• Symbol.iterator(), . next() 두가지 메소드 구현만으로도 자기만의 이터레이터를 만들수 있다.

  • 객체가 이터러블 하기위해서는 Symbol.iterator 메서드를 추가해야한다
  • next() 메서드를 통해 하나씩 출력한다

  const iterableObj = {
    [Symbol.iterator]() {  
      let step = 0;
      return {
        next() {
          step++;
          if (step === 1) {
            return { value: 'This', done: false};
          } else if (step === 2) {
            return { value: 'is', done: false};
          } else if (step === 3) {
            return { value: 'iterable.', done: false};
          }
          return { value: '', done: true };
        }
      }
    },
  }
  for (const val of iterableObj) {
    console.log(val);
  }
  
  // 출력
  // This
  // is 
  // iterable.
  

• generator를 이용해서 만든 이터레이터

  Symbol.iterator() , next()가 이미 구현 되어있다

  function * iterableObj() {
    yield 'This';
    yield 'is';
    yield 'iterable.'
  }
  for (const val of iterableObj()) {
    console.log(val);
  }
  
  // 모든 generator 는 symbol.iterator와 .next()를 기본 내장 하고있다
  // 호출 될때마다 다음 yield 까지 구동
  // this가 바뀌고 next() 호출
  
  // 동일하게 출력