자바스크립트 Iterator Pattern

Iterator Pattern(이터레이터 패턴) 은 컬렉션의 내부 구조를 노출하지 않고도 요소들을 순차적으로 접근할 수 있도록 해주는 행동 디자인 패턴입니다. 자바스크립트의 for...of, next(), Symbol.iterator 등이 이 패턴을 잘 보여줍니다.

---

🧱 Iterator Pattern이란?

Iterator Pattern은 객체의 내부 데이터를 순회하는 책임을 별도의 반복자(iterator) 객체로 분리합니다. 이로써 컬렉션의 구조가 변경되더라도 순회 방식은 일관되게 유지할 수 있습니다.

const collection = {
    items: [1, 2, 3],
    [Symbol.iterator]() {
        let index = 0;
        const items = this.items;
        return {
            next() {
                return index < items.length
                    ? { value: items[index++], done: false }
                    : { done: true };
            }
        };
    }
};

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

---

✅ 장점

1. 컬렉션 구조에 의존하지 않음: 내부 구조를 노출하지 않고도 순회 가능
2. 다양한 컬렉션에서 일관된 인터페이스 제공
3. 반복 로직 캡슐화: 반복 로직을 재사용하거나 유지보수 용이

---

❌ 단점

1. 복잡도 증가: 간단한 순회에도 이터레이터 객체를 만들어야 할 수 있음
2. 성능 오버헤드: 수많은 객체 생성 및 next 호출로 인한 비용
3. 비동기 순회는 별도 구현 필요: async iterator를 따로 설계해야 함

---

🛠️ 실전 예시: 사용자 배열 순회

function createUserIterator(users) {
    let index = 0;
    return {
        next() {
            if (index < users.length) {
                return { value: users[index++], done: false };
            } else {
                return { done: true };
            }
        }
    };
}

const users = ["Alice", "Bob", "Charlie"];
const iterator = createUserIterator(users);

console.log(iterator.next().value); // Alice
console.log(iterator.next().value); // Bob
console.log(iterator.next().value); // Charlie
console.log(iterator.next().done);  // true

---

🧩 결론

Iterator Pattern은 데이터를 순차적으로 처리해야 하는 모든 상황에서 강력한 도구입니다. 특히 자바스크립트의 Symbol.iterator와 for...of 문법 덕분에 자연스럽게 이 패턴이 녹아들어 있어, 커스텀 반복 로직을 설계하거나 데이터를 균일하게 다루는 데 적합한 설계 방식으로 자리 잡고 있습니다.