코딩앙마 자바스크립트 중급 강의 13. Generator

Generator

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

next(), return(), throw() 메소드를 가짐

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

const a = fn();

함수에 *를 붙이고 yield 키워드를 사용

yield에서 함수의 실행을 멈출 수 있음

 

generator 함수를 실행하면 generator객체만 반환됨

 

function* fn() {
  console.log(1);
  yield 1;
  console.log(2);
  yield 2;
  console.log(3);
  console.log(4);
  console.log(5);
  yield 3;
  return 'finish';
}

const a = fn();

// console

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

next()를 하면 가장 가까운 yield를 만날 때까지 코드가 실행되고

value와 done 속성을 가진 데이터객체를 반환

 

value는 yield 오른쪽에 있는 값, 생략하면 undefined임

done은 함수코드가 끝났는지 여부

---

return()를 하면 리턴 메소드를 그 즉시 done 속성이 true가 됨

그 이후 next()를 실행해도 value를 얻을 수 없고 done은 true임

a.return('END')
// {value: "END", done: true}

---

throw()도 그 즉시 done 속성이 true가 됨

return과 마찬가지로 그 이후 next()를 실행해도 value를 얻을 수 없고 done은 true임

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

const a = fn();

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

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

a.throw(new Error('err'))
// Error: err
// {value: undefined, done: true}

---

Generator

Iterable

- Symbol.iterator 메소드가 있어야 한다.

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

generator는 iterable-반복이가능함-이다

 

Iterator > value와 done 속성을 가진 데이터객체를 반환하는 메소드

- next 메소드를 가진다.

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

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

 

generator는 iterable이면서 interator이다.

 

 

배열의 프로토타입을 확인해보면 Symbol.iterator메소드 가 있고

next 메소드를 사용해보면 배웠던 내용처럼 interator를 반환함

> 배열은 반복가능한 객체이다. iterable은 for of를 사용해서 순회할 수 있음

for of가 시작되면 가진 Symbol.iterator를 호출하고 없으면 에러를 반환함

 

문자열도 사용할 수 있음

> 문자열도 iterable이다

---

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}
a.next(4);
// 4
// {value: 6, done: true}

제너레이터는 외부로부터 값을 입력받을 수 있음

 

 

값을 미리 만들어 두지 않음 > 메모리 관리측면에서 효율적임

필요한 값만 미리미리 그 때 생성함, 필요한 순간까지 계산을 미룰 수 있음

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

const a = fn();

 

이렇게 while(true)을 사용해도 브라우저가 뻗지 않음!

 

yield* 을 사용해서 다른 제너레이터를 불러 올 수 있음

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

function gen2() {
  yield "hello";
  yield* gen1(); // 반복가능한 모든 객체가 올 수 있음
  yield "!";
}

console.log(...gen2()); // 구조분해할당 > for of와 마찬가지로 done이 true가 될 때 까지 펼쳐주는 역할
// Hello, W o r l d !

 

제너레이터는 다른 작업을 하다가 다시 돌아와서

next() 해주면 진행이 멈췄던 부분부터 이어서 실행

ex) Redux Saga