자바스크립트 중급 강좌(Generator)

히대·2023년 12월 18일

Javascript

목록 보기
28/28

Generator

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

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

const a = fn();

generator 함수를 실행하면 generator 객체를 반환함
generator 객체는 next 메서드가 있음

next()

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

실행시 함수 본문코드는 실행되지 않고 generator 객체만 반환됨

next 사용시
가장 가까운 yield문을 만날때까지 실행되고
데이터 객체를 반환합니다

반환된 데이터 객체는
value와 done property를 가지게 됨

value는 yield 오른쪽 값을 나타냄
값을 생략하면 undefined
done은 함수코드가 끝났는지 나타내고
실행이 끝났으면 true 반환
아니면 false 반환

return()

동일한 코드에서 return 사용시
그 즉시 done을 true로 반환
이후에 next를 사용해도 value 값은 얻어올수 없으므로 undefined 출력

throw()

catch문을 바로 반환(?)하고
그 즉시 done을 true로 반환
이후에 next를 사용해도 value 값은 얻어올수 없으므로 undefined 출력

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

iterable (반복이 가능함)

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

iterator

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

Generator는 iterable이면서 iterator임

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

const it = arr[Symbol.iterator](); * 이 메서드가 반환하는 값이 iteratro이므로
									 iterable 하다고 할수 있음(?)

즉 배열은 반복 가능한 객체

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

const a = fn()

a[Symbol.iterator()] === a; -> true 같다고 나옴

for(let num of a){    
	console.log(num); -> 4,5,6 
    				  * for of가 시작되면 a[Symbol.iterator()]를 호출하고
						없으면 에러가 발생함
                        반환된 iterator에 next 메서드를 호출하면서
                        done이 true가 될때까지 반복함.
}

문자열도 될까?

const str = 'hello'
str[Symbol.iterator] 존재함

const xx = str[Symbol.iterator]()
xx.next() 를 실행하면 동일하게 동작함

for(let s of xx){ * for of도 가능
	console.log(s);
}

next()에 인수 전달

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

const a = fn();

외부로부터 값을 입력 받을수 있고
값을 미리 만들어 두지 않음

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

const a = fn();

무한반복하는 반복문을 만들어도 브라우저가 뻗지않음

이런식으로 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 !

Generator는 다른 작업을 하다가 다시 돌아와서
next()해주면 진행이 멈췄던 부분 부터 이어서 실행

profile
아자아자 파이팅🔥

0개의 댓글