JS 중급 | Generator

uoah·2023년 2월 11일

자바스크립트

목록 보기

33/33

🚀 오늘의 학습 목표

Generator
next(), return()
throw()
iterable
iterator
next() 에 인수 전달
yield*

18. Generator

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

📝 구문(Syntax)

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

18.1. next(), return()

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

const a = fn();

a 를 입력하면 함수는 실행되지 않는다.
a.next() 를 입력하면 함수 중 가장 가까운 yield문 을 만날 때까지 실행되고 데이터 객체를 반환한다.
반환된 데이터 객체는 value 와 done 프로퍼티를 갖으며 value 는 yield문 의 값이다. (오른쪽에 입력한 값)
만약 값을 생략하면 undefined
done 은 함수가 끝났는지를 알려 준다.
더 이상 표현할 것이 없으면 undefined 값을 반환한다.

yield문 을 모두 실행하기 이전에 중간에 return 메서드를 실행하면 done 속성값이 true 로 바뀌며 a.next(); 를 호출해도 더이상 value 를 얻어올 수 없다.

18.2. throw() 예외 처리

throw() 도 done 을 true 로 바꾼다.
예외 처리를 위해 try..catch문을 사용해 보자.

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

const a = fn();

에러 발생으로 done 속성값이 true 로 바뀌며 a.next(); 를 호출해도 더이상 value 를 얻어올 수 없다.

18.3. iterable

Symbol.iterator 메서드가 있다.
Symbol.iteraotr 는 iterator 를 반환해야 한다.

18.4 iterator

next 메서드를 가진다.
next 메서드는 value 와 done 속성을 가진 객체를 반환한다.
작업이 끝나면 done 은 true 가 된다.

배열에도 `ierator` 가 존재한다.

위의 예제와 동일하게 동작한다.
Symbol.iterator 가 존재하므로 배열 또한 ierable 하다. 즉, 배열은 반복 가능한 객체이다.

iterable 은 for...of 을 적용하여 순회할 수 있다.

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

const a = fn();

a[Symbol.iterator]() === a; // true

즉, generator 는 iterable 객체이다.

⭐️ 문자열도 동일하게 iterable 이다.

18.5. next()에 인수 전달

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

const a = fn();

외부로부터 값을 받아올 수 있다.

⭐️ Generator 는 값을 미리 지정해 놓지 않고, 필요한 순간까지 계산을 미룰 수 있다.

18.6. yield*

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

function* gen2(){
  yield "Hello";
  yield* gen1(); // generator 객체 뿐 아니라 반복 가능한 모든 객체가 올 수 있다.
  yield "!";
}