이터레이터 패턴

김세빈·2025년 4월 24일

디자인패턴

목록 보기

4/7

이터레이터 패턴(Iterator Pattern)으로 다양한 자료구조 순회하기

이터레이터 패턴은 컬렉션(자료구조)의 내부 구조를 노출하지 않고도 그 안의 요소들을 순차적으로 접근할 수 있도록 해주는 디자인 패턴입니다.
JavaScript에서는 이터레이터(Iterator)를 통해 다양한 자료구조를 동일한 방식으로 순회할 수 있는 인터페이스를 제공합니다.

배열, Map, Set은 구조가 다르지만...

자바스크립트에는 다양한 내장 자료구조가 있습니다. 대표적으로 배열(Array), 맵(Map), 집합(Set)이 있습니다.
이 자료구조들은 각기 다른 특성과 구조를 가지고 있지만, 이터레이터 덕분에 for...of 루프를 이용해 똑같이 순회할 수 있습니다.

예제 코드

const mp = new Map();
mp.set('a', 1);
mp.set('b', 2);
mp.set('cccc', 3);

const st = new Set();
st.add(1);
st.add(2);
st.add(3);

const a = [];
for (let i = 0; i < 10; i++) {
  a.push(i);
}

// 배열 순회
for (let aa of a) console.log(aa);

// Map 순회
for (let m of mp) console.log(m);

// Set 순회
for (let s of st) console.log(s);

실행 결과

0
1
2
...
9
[ 'a', 1 ]
[ 'b', 2 ]
[ 'cccc', 3 ]
1
2
3

핵심은 "이터레이터"

이터레이터가 없다면, Map을 순회하기 위해 Object.keys()나 for...in을 사용하고, 다시 hasOwnProperty로 키가 실제로 존재하는지 확인하는 등 복잡한 로직이 필요했을 것입니다.

하지만 이터레이터 덕분에 for...of 문 하나로 배열, 맵, 셋 등 다양한 자료구조를 동일한 방식으로 순회할 수 있게 됩니다.