[009] 자바스크립트 (JavaScript) - Generator(제너레이터), yield 활용

안녕하세요~ totally 개발자입니다.

 

Generator (제너레이터)

제너레이터 함수는 일반적인 함수가 끝까지 실행되고 return 되는 것과는 달리, 중간에 실행을 멈추고 그 멈춘 자리에서 다시 실행을 시작할 수 있게 하는 함수를 말합니다. 더 구체적으로 이야기하면 함수를 호출하는 caller에게 함수를 실행을 control하는 것을 yield(양도)하여 함수의 상태를 주고 받을 수 있는 것을 말합니다. 이 제너레이터는 리턴할 때 Generator Object(제너레이터 객체)를 반환하게 되는데 이 객체는 Iterable하면서 Iterator입니다. Iterable은 Array, Map, Set등이 여기 포함되며 (반복 가능한 객체), iterator는 arr[Symbol.iterator]() 이렇게 넣었을 때 리턴되는 값입니다. 

 

function* generator() {
	yield 10;
	yield 20;
	yield 30;
}

const genObj = generator();

console.log(genObj.next().value);
console.log(genObj.next().value);
console.log(genObj.next().value);

기본적인 generator의 예시로써 genObj.next().value 맨 처음에는 10를 yield하게 됩니다. 그리고 멈추게 되며 다시 next로 호출했을 때에는 20, 그 다음에 최종적으로 30의 value를 가져올 수 있는 방식으로써 기존의 return 함수하고는 다르게 작동됩니다. 만일 return를 사용하면 주어진 값을 반환하고 제너레이터 함수를 종료시킵니다. next에는 value와 done를 포함하는 객체를 반환하며 value에 10, done에는 false라는 형식으로 반환됩니다. 30이후에 next를 다시 실행시키면 done이 true로 반환됩니다. 

 

function* generator() {
	const value1 = yield + 10;
	const value2 = yield(value1 - 10);
	const value3 = yield(value2 + 5);
	return value3;
}

const genObj = generator();

console.log(genObj.next());
console.log(genObj.next(10));
console.log(genObj.next(20));
console.log(genObj.next().done);

위 예제를 보면 yield를 마치 함수, 변수처럼 사용하고 있는 것을 확인해볼 수 있습니다. 아래 결과를 보면 바로 이해가 되실 것으로 생각되며 next()를 함수처럼 parameter를 전달할 수 있습니다. value1에는 10이, value2에는 10 - 10 = 0이, value3에는 20 + 5 = 25가 됩니다. 그리고 마지막의 genObj.next().done는 true가 반환됩니다.

참고 사이트

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Global_Objects/Generator

Generator - JavaScript | MDN