[JavaScript_study] Generator

* Generator : 함수의 실행을 중간에 멈췄다가 재개할 수 있는 기능

ex) Redux Saga

 

  > * 을 사용해서 만든다.

  > 내부에 yield를 사용한다.

  > yield에서 함수의 실행을 멈출수있다.

  > next(), return(), throw() 메소드를 가진다.

 

* Generator

> iterable (반복이 가능한)

  - Symbol.iterator 메서드가 있다.

  - Symbol.iterator는 iterator를 반환해야한다.

  - for ... of 를 통해서 순회 가능하다.

 

> iterator (반복자)

  - next 메서드를 가진다.

  - next 메서드는 value와 done속성을 가진 객체를 반환한다.

  - 작업이 끝나면 done는 true가 된다.

function* fn() {
  yield 1;
  yield 2;
  yield 3;
  return "finish";
}

const a = fn();

// next()를 사용하면 가장가까운 yield를 만날때까지 코드를 실행시키고 데이터 객체를 반환해준다. 
// yield를 만나면 멈춘다.
// value는 yield옆에 있는 값이다. 생략하면 undefined가 반환된다.
// done는 함수가 끝났는가 여부이며 함수가 끝나면 true가 반환된다.

a.next(); // {value: 1, done: false}
a.next(); // {value: 2, done: false}
a.next(); // {value: 3, done: false}
a.next(); // {value: 'finish', done: true} // 함수 끝
a.next(); // {value: undefined, done: true} // 함수가 끝나고 값이 없음

 

* return()

 

function* fn() {
  yield 1;
  yield 2;
  yield 3;
  return "finish";
}

const a = fn();

// return()메서드를 사용하면 그 즉시 done : true가 된다.
a.return("END") // {value: 'END', done: true}
a.next() // {value: undefined, done: true} 함수가 종료되었기때문에 undefined가 출력된다.

 

* throw()

 

function* fn() {
  try {
    yield 1;
    yield 2;
    yield 3;
    return "finish";
} catch (e) {
  console.log(e);
  }
}

const a = fn();

a.next(); {value : 1, done : false}
a.throw(new Error('err')) // error로그가 찍히고 value : undefined, done : true가 된다.

 

* array가 가지고있는 iterator확인

  > 배열은 Symbol.iterator메서드를 가지고 있고 이 메서드가 반환하는 값이 iterator이므로 iterable하다고 할 수 있다.

  > 즉, 배열은 반복가능한 객체이다.

  > for ... of를 통해서 순회 가능하다.

const arr = [1, 2, 3, 4, 5]

const it = arr[Symbol.iterator]();

it.next(); // {value : 1, done: false}
it.next(); // {value : 2, done: false}
it.next(); // {value : 3, done: false}
it.next(); // {value : 4, done: false}
it.next(); // {value : 5, done: false}
it.next(); // {value : undefined, done: true}

for (let num of arr) {
  console.log(num)
};

// 1
// 2
// 3
// 4
// 5

 

* iterator예시 코드

 

function* fn() {
  yield 4;
  yield 5;
  yield 6;
}

const a = fn();

a[Symbol.iterator]() === a; // true
// Generator의 Symbol.iterator메서드를 실행한 값이 자기자신이다. (true)
// 즉, Generator는 iterable객체이다.

// for of또한 사용가능하다.
for(let num of a){
  console.log(num);
}

// 4
// 5
// 6

 

* 문자열 iterator

 

const str = 'hello';

str[Symbol.iterator]

const xx = str[Symbol.iterator]

xx.next(); { value : "h", done: false }
xx.next(); { value : "e", done: false }
xx.next(); { value : "l", done: false }
xx.next(); { value : "l", done: false }
xx.next(); { value : "o", done: false }

for(let s of xx) {
  console.log(s);
}

// h
// e
// ②l
// o

 

* next()에 인수 전달 : 외부로부터 값을 입력 받을 수 있다.

function* fn() {
  const num1 = yield "첫번째 숫자를 입력해주세요";
  console.log(num1);
  
  const num2 = yield "두번째 숫자를 입력해주세요";
  console.log(num2);
  
  return num1 + num2;
}

const a = fn();

a.next(); // {value: '첫번째 숫자를 입력해주세요', done: false}
a.next(2); // 2 {value: '두번째 숫자를 입력해주세요', done: false} // 값은 num1에 저장된다.
a.next(4); // 4 {value : 6, done: true} // value에는 num1 + num2값이 반환된다.

 

* Generator은 값을 미리 만들어 두지않는다. // 메모리 관리측에서 효율적이다.

  > while(true)를 사용해서 무한반복을 만들어도 브라우저가 꺼지지않는다.

  > next()를 줄때마다 값을 호출하기 때문이다.

  > 필요한순간까지 계산을 미룰 수 있다.

function* fn() {
  let index = 0;
  while (true) {
    yield index++;
  }
}

const a = fn();

a.next(); // {value: 0, done: false}

 

yield*을 이용

  > for of와 마찬가지고 done : true가 될때까지 값을 펼쳐준다.

  > *옆에는 반복가능한 모든 객체가 옆에 올수있다.

 

function* gen1() {
  yield "W";
  yield "o";
  yield "r";
  yield "l";
  yield "d";
}

function* gen2() {
  yield "Hello,";
  yield* gen1();
  yield "!";
}

console.log(...gen2()); // Hello, W o r l d !