ECMA Script 6 - generator 함수

generator함수는 다음과 같은 표현식을 사용하여 선언한 함수를 의미한다.
generator함수를 호출하면 generator객체를 생성하여 반환한다. 일반적으로 함수를 호출하면, {} 이 실행되지만, generator함수는 {}를 실행하지 않고, generator객체를 생성하여 반환한다.

function* 함수명 (){}

generator함수는 generator객체를 생성하여 반환한다.

  <script type="text/javascript">
    function* a() {
      console.log('1');
    }
    const x = a();  //generator객체 
    console.log(typeof a);  // function
    console.log(typeof x);  // object
  </script>

generator 함수 내의 코드를 실행하기 위하여 generator 객체의 next() 메서드를 호출해야한다.

  <script type="text/javascript">
   function* a() {
     console.log('1');
     console.log('2');
     console.log('3');
   }
   const x = a(); //generator객체
   // console.log(typeof a); // function
   console.log(typeof x); // object

   x.next(); // next를 명시하지 않으면 generator함수 내의 코드를 실행하지 않음
 	//1
   //2
   //3
 </script>

generator 함수 안에 yield 키워드를 사용하면 함수 블록의 코드 모두를 실행하지 않고, yield단위로 나누어 실행 가능하다.

따라서 yield가 여러개가 작성되어 있으면, yield 수 만큼 next() 메서드를 호출해야 generator 함수 전체를 실행하게 된다.

  <script type="text/javascript">
    function* a() {
      console.log('1');
      yield console.log('2');
      console.log('3');
    }
    const x = a(); //generator객체
    x.next(); // next를 명시하지 않으면 generator함수 내의 코드를 실행하지 않음

    // 1
    // 2
    console.log('========');
    x.next();
    // 3
  </script>

yield 키워드는 다음에 설정한 표현식을 next() 메서드를 호출할 때 리턴 가능. 리턴 현태는 { value:값, done:불린값}

yield가 수행되었으면 false값 반환, 수행되지 않으면 true값 반환된다.

done의 의미는 함수 내 실행문이 끝까지 실행되었는지 안되었는지로 이해하자!

  <script type="text/javascript">
  function* a(n, n2) {
    console.log('1');
    yield n + n2;
    yield '곰돌이';
    console.log('3');
  }
  const fna = a(10, 20);
  console.log(fna); // 1

  console.log(fna.next()); // {value:30, done:false}
  console.log(fna.next()); // {value:"곰돌이", done:false}
</script>

3은 출력이 안된다.
.next는 yield단위로 수행된다.

generator함수 내의 iterator를 종료하기 위하여 return()메서드를 사용한다.

반환 값은 {value:undefined, done:true}

  <script type="text/javascript">
  function* a(k, k2) {
    console.log('1');
    yield k + k2;
    yield '홍길동';
    console.log('end');
  }
  const x = a(10, 20); // 1
  console.log(x.next()); // {value:30, done:false}
  console.log(x.return()); // 강제 종료 {value:undefined, done:true}
  console.log(x.next()); // {value:undefined, done:true}
</script>

next() 메서드 안에 파라미터 값을 설정할 수 있다. 이 값은 yield 정의시 사용된 변수값에 저장된다.

  <script type="text/javascript">
  function* a() {
    const aaa = yield 'A';
    const bbb = yield 'B';
    console.log(aaa, bbb);
  }
  const x = a();
  console.log(x.next()); // {value:"A", done: false}
  console.log(x.next(2000)); // {value:"B", done:false}
  console.log(x.next(3000)); //2000,3000
  // {value:undefined, done:true}
</script>

1. x.next() 호출하면 yield ‘A’가 수행되어 { value='A' done:false} 반환된다.
2. x.next(2000) 호출하면 2000을 이전 라인의 var aaa 변수에 설정하고 yield ‘B’가 수행되어 { value='B' done:false}를 반환한다.
3. x.next(3000) 호출되면 3000을 이전 라인의 var bbb 변수에 설정하고 consol에 aaa와 bbb 값을 출력한다. yield 가 더 이상 없기 때문에 {value: undefined, done: true} 반환되어 출력된다.