[JavaScript] 중급 #18 - Generator

 

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

  -  function 옆에 *을 표시해서 만들고, 내부에 yield 키워드를 사용

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

  -  Generator 함수를 실행하면 generator 객체를 반환

  -  next(), return(), throw()

 

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();

 

 

next()

  →  콘솔창에 a.next();를 입력하면 첫번째 console.log가 실행되어 1이 찍히고, { value: 1, done: false }가 찍힘

  →  여기서 value 값은 yield 옆에 적은 값이고, 아무 값도 적지 않으면 undefined가 찍힘

  →  done은 함수 코드가 끝났는지 나타내며, 끝났으면 true 아니면 false 값을 가짐

  →  한번 더 a.next();를 입력하면 두번째 console.log인 2와 { value: 2, done: false }가 찍힘

  →  yield 3까지 거치고나서 또 다시 a.next();를 입력하면 { value: “finish”, done: true }가 찍힘

  →  그 뒤에 a.next();를 입력하면 { value: undefined, done: true }만 찍힘

 

return()

  →  만약 함수 코드가 끝나기 전에 a.return(“END”);를 하게 되면, { value: “END”, done: true }로 done 속성 값이 true로 끝남

 

throw()

  →  return 메소드와 마찬가지로 함수 코드가 끝나기 전에 a.throw(new Error(‘err’));를 하게 되면, Error메시지와 함께 { value: undefined, done: true }가 찍히면서 done 속성 값이 true로 끝남

 

 

Generator는 iterator이면서 iterable이다.

iterable

  -  Symbol.iterator 메소드가 있음

  -  Symbol.iterator는 iterator를 반환해야 함

 

iterator

  -  next 메소드를 가짐

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

  -  작업이 끝나면 done은 true가 됨

 

 

iterable은 for…of를 이용해서 순회할 수 있음

e.g.)         

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

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


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

 

e.g.)         

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

const a = fn();

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


//	4 
//	5 
//	6

 

 

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 } 출력

 

 

Generator는 값을 미리 만들어 두지 않음

  -  필요한 순간에만 연산해서 값을 주기 때문에 메모리 관리 측면에서 효율적

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

const a = fn();

  →  break문이 없는 while(true)문을 만들어도 브라우저가 꺼지지 않음

  →  next()를 통해서 다음 연산을 하고 값을 주기 때문

 

 

yield*을 이용하여 다른 generator 호출

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 ! 출력

  →  ...gen2 (구조분해할당 사용)은 for...of와 마찬가지로 done이 true가 될 때까지의 값을 펼쳐주는 역할

  →  yield*로 genertor뿐만 아니라 반복 가능한 모든 객체 가져올 수 있음

 

 

 

 

 

↓ [코딩앙마] 자바스크립트 중급 강좌 링크

https://www.youtube.com/watch?v=qi24UqyJLgs&list=PLZKTXPmaJk8JZ2NAC538UzhY_UNqMdZB4&index=18