이터레이터와 제너레이터

우리는 6장에서 forEach, map, filter 같은 고차 함수로 데이터를 반복 처리하는 방법을 배웠습니다.

하지만 이런 메서드는 배열 중심이므로, Map, Set, String 같은 다양한 반복 가능(iterable) 구조를 일관되게 순회하려면 별도 개념이 필요합니다.

이 질문에 대한 답이 바로 이터레이터(Iterator)와 제너레이터(Generator)입니다.

이터레이터는 자바스크립트의 모든 반복 가능한 객체를 표준화된 방식으로 순회할 수 있도록 해주는 프로토콜이며, 제너레이터는 이 이터레이터를 쉽게 생성할 수 있도록 돕는 특별한 함수입니다.

제너레이터는 소비자가 요청한 만큼만 값을 만들고 중간 실행 상태를 유지할 수 있습니다. 여기의 일반 function*가 그 자체로 비동기 처리를 하거나 별도 스레드에서 실행되지는 않습니다.

이번 장에서는 이터레이터/제너레이터 개념, 동작 방식, 활용 상황을 정리합니다.

이터레이터 (Iterator) 프로토콜

먼저 “반복을 시작할 객체”, “현재 순회 위치를 가진 객체”, “한 값을 요청하는 호출”을 나누세요. 배열과 for...of를 사용할 수 있으면 아래 세 역할을 추적할 수 있습니다.

이터레이터 프로토콜은 next() 호출로 순회 결과를 받는 규칙입니다. for...of는 먼저 이터러블에서 이터레이터를 얻고 이 규칙에 따라 순회합니다.

이터레이터의 필수 메서드는 next()입니다. Symbol.iterator 메서드를 제공하는 것은 별도의 이터러블 프로토콜입니다.

이터러블 (Iterable) 객체

이터러블(Iterable) 객체는 자신의 속성 또는 프로토타입 체인에서 호출 가능한 Symbol.iterator 메서드를 제공하는 객체입니다.

이 Symbol.iterator 메서드는 호출될 때 이터레이터(Iterator) 객체를 반환합니다.

자바스크립트의 내장 이터러블 객체

• Array
• String
• Map
• Set
• NodeList (DOM API)
• arguments 객체

for...of 루프는 이터러블 객체를 순회할 때 내부적으로 이터레이터 프로토콜을 사용합니다.

const myArray = [1, 2, 3];
const myString = "hello";
const mySet = new Set([1, 2, 3]);

// 이터러블은 for...of로 순회 가능
for (const item of myArray) {
    console.log(item); // 1, 2, 3
}

for (const char of myString) {
    console.log(char); // h, e, l, l, o
}

for (const item of mySet) {
    console.log(item); // 1, 2, 3
}

이터레이터 (Iterator) 객체

이터레이터 객체는 next()라는 메서드를 가지고 있는 객체입니다.

next()는 결과 객체를 반환해야 합니다. 아래 예시에서는 value와 불리언 done을 사용합니다. 프로토콜상 두 속성은 생략 가능하며, 생략한 done은 false로 해석됩니다. 숫자 자체를 반환하는 next()는 이 계약을 만족하지 않습니다.

• value: 순회 과정에서 현재 반환되는 값.
• done: 순회 완료 여부. true인 결과에도 제너레이터의 return 값처럼 최종 value가 있을 수 있지만, for...of는 이를 반복 원소로 사용하지 않습니다.

const numbers = [10, 20, 30];

// 배열의 Symbol.iterator 메서드를 호출하여 이터레이터 객체를 얻습니다.
const iterator = numbers[Symbol.iterator]();

console.log(iterator.next()); // 결과: { value: 10, done: false }
console.log(iterator.next()); // 결과: { value: 20, done: false }
console.log(iterator.next()); // 결과: { value: 30, done: false }
console.log(iterator.next()); // 결과: { value: undefined, done: true } (더 이상 요소가 없음)

사용자 정의 이터러블 만들기

우리가 만든 객체도 Symbol.iterator 메서드를 구현하면 for...of 루프를 사용할 수 있는 이터러블로 만들 수 있습니다.

// 숫자 범위를 나타내는 사용자 정의 이터러블 객체
const range = {
    from: 1,
    to: 5,
    [Symbol.iterator]: function() { // Symbol.iterator 메서드를 구현합니다.
        let current = this.from; // 클로저처럼 from과 to를 기억합니다.
        const last = this.to;

        return { // 이터레이터 객체를 반환합니다.
            next() { // 이터레이터는 next() 메서드를 가져야 합니다.
                if (current <= last) {
                    return { done: false, value: current++ };
                } else {
                    return { done: true };
                }
            }
        };
    }
};

for (const num of range) {
    console.log(num); // 1, 2, 3, 4, 5
}

// 직접 이터레이터 사용도 가능
const rangeIterator = range[Symbol.iterator]();
console.log(rangeIterator.next()); // { value: 1, done: false }

위 range는 유한한 정수 from·to를 가정합니다. for...of가 요청한 첫 이터레이터와 뒤에서 직접 얻은 rangeIterator는 별개라, 직접 호출은 다시 1부터 시작합니다. 반환한 이터레이터에는 Symbol.iterator가 없으므로 for...of (const n of rangeIterator)를 바로 쓸 수는 없습니다. 이터러블인 range와 next()만 가진 순회 상태를 구별하세요.

제너레이터 (Generator)

제너레이터(Generator)는 이터레이터 프로토콜을 훨씬 더 쉽게 구현할 수 있도록 도와주는 특별한 종류의 함수입니다.

제너레이터 함수는 실행을 일시 중지하고 재개할 수 있는 능력을 가지고 있으며, yield 키워드를 사용하여 값을 '생성(yield)'해낼 수 있습니다.

제너레이터 함수 선언

제너레이터 함수는 function* 문법으로 선언합니다.

일반 함수와 달리, 제너레이터 함수를 호출하면 즉시 실행되는 것이 아니라 제너레이터 객체(Generator Object)를 반환합니다.

이 제너레이터 객체는 이터레이터이자 이터러블입니다.

function* simpleGenerator() {
    console.log("제너레이터 시작");
    yield 1; // 첫 번째 값을 생성하고 여기서 일시 중지
    console.log("첫 번째 yield 후");
    yield 2; // 두 번째 값을 생성하고 일시 중지
    console.log("두 번째 yield 후");
    return 3; // 마지막 값 (done: true)
    console.log("return 후 (실행 안 됨)"); // return 이후 코드는 실행되지 않음
}

const generator = simpleGenerator(); // 함수 호출 시 제너레이터 객체 반환

console.log("제너레이터 함수 호출됨, 하지만 아직 실행 안 됨");

console.log(generator.next()); // '제너레이터 시작' 출력, { value: 1, done: false } 반환
console.log(generator.next()); // '첫 번째 yield 후' 출력, { value: 2, done: false } 반환
console.log(generator.next()); // '두 번째 yield 후' 출력, { value: 3, done: true } 반환
console.log(generator.next()); // { value: undefined, done: true } 반환

yield 키워드

• yield 키워드는 제너레이터 함수 내부에서 사용됩니다.
• yield는 함수의 실행을 일시 중지하고, yield 뒤에 오는 값을 이터레이터의 value로 반환합니다.
• 다음에 next()가 호출되면, 함수는 yield가 있었던 지점부터 실행을 재개합니다.

for...of 루프와 제너레이터

제너레이터 객체는 이터러블이기 때문에 for...of 루프에서 직접 사용할 수 있습니다.

function* countGenerator() {
    for (let i = 1; i <= 5; i++) {
        yield i;
    }
}

for (const num of countGenerator()) {
    console.log(num); // 1, 2, 3, 4, 5
}

next() 메서드로 값 전달하기

generator.next(value)를 호출할 때 인자를 전달하면, 이 값은 이전 yield 표현식의 결과값으로 전달됩니다.

이를 통해 제너레이터의 내부 동작에 외부에서 값을 주입하여 제어할 수 있습니다.

function* multiplyGenerator() {
    console.log("제너레이터 시작");
    const num1 = yield; // 첫 번째 yield는 값을 받기 위해 대기
    console.log(`첫 번째 받은 값: ${num1}`);
    const num2 = yield; // 두 번째 yield는 값을 받기 위해 대기
    console.log(`두 번째 받은 값: ${num2}`);
    return num1 * num2;
}

const multiplier = multiplyGenerator();

console.log(multiplier.next());    // 결과: 제너레이터 시작, { value: undefined, done: false }
console.log(multiplier.next(5));   // 결과: 첫 번째 받은 값: 5, { value: undefined, done: false }
console.log(multiplier.next(10));  // 결과: 두 번째 받은 값: 10, { value: 50, done: true }
console.log(multiplier.next());    // 결과: { value: undefined, done: true }

첫 multiplier.next(99)처럼 인수를 넣어도 처음에는 값을 받을 이전 yield가 없어 99는 사용되지 않습니다. 두 번째 호출의 5가 num1, 세 번째 호출의 10이 num2로 들어갑니다. return 50은 최종 결과이므로 직접 next()로는 읽지만 for...of의 반복 원소에는 포함되지 않습니다.

next(value)에서 전달한 값은 지금 막 멈춘 yield의 반환값이 아니라, 직전에 멈춰 있던 yield 표현식의 결과로 들어갑니다.

그래서 제너레이터는 값을 밖으로 내보내는 동시에, 다음 next() 호출에서 값을 다시 받을 수 있습니다.

yield* (Yield Delegation)

yield*는 다른 이터러블(또는 제너레이터)에 순회를 위임할 때 사용합니다.

function* generatorA() {
    yield 1;
    yield 2;
}

function* generatorB() {
    yield 3;
    yield* generatorA(); // generatorA의 모든 yield 값을 내보냄
    yield 4;
}

for (const value of generatorB()) {
    console.log(value); // 3, 1, 2, 4
}

제너레이터의 활용 사례

function* infiniteSequence() {
    let i = 0;
    while (true) { // 무한 루프
        yield i++;
    }
}

const seq = infiniteSequence();
console.log(seq.next().value); // 0
console.log(seq.next().value); // 1
// 필요한 만큼만 값을 가져오므로 무한히 생성 가능

// (개념적인 예시, 실제 async/await와 비교)
function* fetchUserAndPosts() {
    const user = yield fetch('/api/user').then(res => res.json());
    const posts = yield fetch(`/api/posts?userId=${user.id}`).then(res => res.json());
    return { user, posts };
}

// 이런 제너레이터는 특정 실행기(runner)가 next()를 반복적으로 호출하며 Promise를 처리해줘야 함
// 이것이 async/await로 발전함

일찍 종료한 순회와 잠시 멈춘 순회

첫 yield까지 실행한 뒤 for...of를 break하면 이터레이터의 return이 호출될 수 있습니다. 제너레이터는 그 종료 요청에서 finally를 실행합니다. 반면 직접 next()를 한 번 호출한 것은 순회를 닫았다는 뜻이 아닙니다.

function* stepsForIteration() {
    try {
        yield 1;
        yield 2;
    } finally {
        console.log("정리");
    }
}
const closedForIteration = stepsForIteration();
for (const value of closedForIteration) {
    console.log("값", value);
    break;
}
console.log("닫힌 결과", closedForIteration.next().done);

출력은 값 1, 정리, 닫힌 결과 true입니다. 그림의 종료 화살표는 소비자가 조기 종료할 때의 return() 요청입니다. 정상적으로 done: true를 받은 모든 경우나, next() 자체가 오류를 던진 경우까지 같은 정리 호출이 추가된다고 일반화하지 않습니다.

독립 연습

같은 stepsForIteration을 사용하되 새 제너레이터 const pausedForIteration = stepsForIteration();를 만드세요. for...of 대신 차례로 console.log(pausedForIteration.next().value);, console.log(pausedForIteration.next().value);, console.log(pausedForIteration.next().done);을 호출합니다. 출력 순서와 정리의 위치를 예상하세요.

근거: MDN 반복 프로토콜과 조기 종료, Generator.next의 값 전달.

이터레이터와 제너레이터 정리

이번 장에서는 자바스크립트에서 반복 가능한 객체를 다루는 표준인 이터레이터 프로토콜과, 이 이터레이터를 쉽게 생성하고 함수의 실행 흐름을 제어할 수 있는 제너레이터에 대해 학습했습니다.

배열, 문자열, 맵 같은 반복 가능한 객체는 이터러블 프로토콜을 따릅니다.

Symbol.iterator와 next()를 확인하면 for...of가 값을 순회하는 방식을 직접 이해할 수 있습니다.

더 나아가, function* 문법과 yield 키워드를 사용하여 제너레이터 함수를 만들고, next()를 통해 실행을 일시 중지하고 재개하는 방법을 익혔습니다.

또한, yield*를 이용한 위임과 next()로 값을 전달하는 고급 기능, 그리고 무한 스크롤, 비동기 코루틴 등의 활용 사례를 통해 제너레이터의 잠재력을 엿보았습니다.

제너레이터는 async/await의 등장 이후 비동기 처리의 주요 패턴에서는 덜 사용되지만, 데이터 스트림 처리나 실행 흐름을 세밀하게 제어해야 할 때 여전히 검토할 수 있습니다.

이터레이터와 제너레이터를 이해하면 순회 프로토콜과 지연 실행 구조를 더 정확히 해석할 수 있습니다.

앞의 iterable·iterator·generator 대화 다이어그램은 세 역할이 next()로 협력하는 순서를 보여줍니다.

반복 도구를 선택할 때는 데이터가 이미 있는지, 값을 지연 생성해야 하는지, 외부에서 실행 흐름을 제어해야 하는지를 먼저 확인하면 됩니다.

배열 순회, 이터레이터, 제너레이터, yield*는 데이터 보유 여부, 지연 생성, 위임 요구로 구분해 선택합니다.