JavaScript Generator 이해하기

Generator Function

• Generator Function은 사용자의 요구에 따라 다른 시간 간격으로 여러 값을 반환할 수 있으며, 내부 상태를 관리할 수 있는 함수이다.

• 단 한 번의 실행으로 함수의 끝까지 실행이 완료되는 일반 함수와는 달리, 제네레이터 함수는 사용자의 요구에 따라 일시적으로 정지될 수도 있고, 다시 시작될 수도 있다.
  제네레이터 함수의 반환으로는 제네레이터가 반환된다.

Generator

• Generator는 이 제네레이터 함수의 반환으로 iterable 프로토콜과 iterator 프로토콜을 따르는 객체이다.

<script>
function* generatorFunction() {
	yield 42;
}

const generator = generatorFunction();

generator === generator[Symbol.iterator]();
</script>

yield / next()

• yield는 제네레이터 함수의 실행을 일시적으로 정지시키며, yield 뒤에 오는 표현식은 제네레이터의 caller에게 반환된다. 즉, 일반 함수의 return과 매우 유사하다고 볼 수 있다.

• 여기서 제너레이터 함수는 Callee이고, 이를 호출하는 함수가 Caller이며, Caller는 Callee의 yield 부분에서 다음 statement로 진행을 할 지 여부를 제어한다. 이는 next로 인해 재개될 수 있다.

제네레이터 함수에서의 return

• return은 수행되고 있는 이터레이터를 종료시키며, return 뒤에 오는 값은 IteratorResult 객체의 value 프로퍼티에 할당되며, done 프로퍼티는 true가 할당된다.

for of, 전개 연산자, 구조 분해, 나머지 연산자

• 제네레이터 함수는 iterable, iterator 프로토콜을 따르고 있다.

<script>
function* generateName() {
  yield 'W';
  yield 'O';
  yield 'O';
  yield 'T';
  yield 'A';
  yield 'I';
  yield 'K';
}

// for..of
const genForForOf = generateName();
for (let i of genForForOf) {
  console.log(i);
}
// W
// O
// O
// T
// A
// I
// K

// ...
const genForSpread = generateName();
console.log([...genForSpread]); // ['W', 'O', 'O', 'T', 'A', 'I', 'K']
</script>