TUTORIAL

제너레이터와 이터레이터 완벽 가이드

JavaScript 이터레이션 프로토콜의 핵심. 제너레이터 함수와 이터레이터 패턴으로 효율적인 데이터 처리를 구현합니다.

럿지 AI 팀
2025-01-15
15분
이터레이션 프로토콜

JavaScript의 순회 가능한 객체를 정의하는
Iterable/Iterator 프로토콜을 이해합니다.

Iterable

[Symbol.iterator]() 메서드

Iterator

next() 메서드

제너레이터 기본

function* numberGenerator() {
  yield 1;
  yield 2;
  yield 3;
}

const gen = numberGenerator();
gen.next(); // { value: 1, done: false }
gen.next(); // { value: 2, done: false }
gen.next(); // { value: 3, done: false }
gen.next(); // { value: undefined, done: true }

제너레이터 활용

무한 시퀀스ID 생성기, 피보나치
지연 평가대용량 데이터 처리
비동기 흐름async/await 이전 패턴
상태 머신Redux-Saga

yield* 위임

function* gen1() {
  yield 'a';
  yield 'b';
}

function* gen2() {
  yield* gen1();  // 위임
  yield 'c';
}

[...gen2()]; // ['a', 'b', 'c']

빌트인 이터러블

Array
String
Map
Set
TypedArray
arguments

관련 태그

#Generator
#Iterator
#JavaScript
#이터레이션
#ES6