이터러블과 이터레이터

AI로 생성해 봤습니다. 오타가 있지만 나쁘지 않네요!

 

이터러블(Iterable)

정의

• 반복 가능한 객체
• `for...of`, `스프레드(...)`, `디스트럭처링 할당` 등에 사용 가능
• 이터러블은 Symbol.iterator 메서드를 가지고 있으며, 이 메서드가 이터레이터를 반환

 

예시

const arr = [1, 2, 3]; // 배열 (대표적인 이터러블) 
const str = "hi"; // 문자열도 이터러블 
const set = new Set([1, 2, 3]); // Set도 이터러블 
for (const val of arr) console.log(val); // 1, 2, 3

이터레이터(Iterator)

정의

• 이터러블을 실제로 순회하는 메커니즘
• `next()` 메서드를 가지고 있으며 `{ done: Boolean, value: any }`와 같은 형태의 객체를 반환
• `done: true` 가 될 때까지 순회

 

예시

const arr = [1, 2, 3]; 
const iterator = arr[Symbol.iterator](); 
console.log(iterator.next()); // { done: false, value: 1 } 
console.log(iterator.next()); // { done: false, value: 2 }
console.log(iterator.next()); // { done: false, value: 3 } 
console.log(iterator.next()); // { done: true, value: undefined }

 

이터러블  ↔  배열 메서드 활용

• 이터러블을 배열로 변환해 `map`, `filter` 같은 고차 함수 활용 가능

const set = new Set([1, 2, 3]); 
const doubled = [...set].map(x => x * 2); // [2, 4, 6]

 

 

장점

1. 일관된 반복 프로토콜 제공
   → for...of, 스프레드, 디스트럭처링 등 어디서든 활용 가능
2. 데이터 구조 확장 가능
   → 트리, 그래프 같은 사용자 정의 구조에서도 원하는 순서(DFS, BFS 등)로 순회 정의 가능
3. 유연성
   → 어떤 순서, 어떤 조건으로든 반복 동작을 직접 정의할 수 있음

 

 

한계

1. 성능 문제
   • 대규모 데이터 순회 시 next() 호출 비용 누적
   • 복잡한 구조일수록 접근 비용 증가
2. 메모리 사용량 증가
   • 이터레이터는 상태(state)를 저장해야 하므로 동시에 여러 개를 쓰면 메모리 부담

// 상태 누적 예시
  [Symbol.iterator]() {
    this.current = this.from;
    return this;
  },

 

 

  3. 배열 메서드 직접 사용 불가

• 이터러블 자체는 map, filter 같은 배열 메서드를 바로 쓸 수 없음 → 배열로 변환해야 함

 

개선방안

1. 제너레이터(Generator)
   • 이터러블+이터레이터를 쉽게 구현할 수 있는 문법
   • yield를 사용해 필요할 때만 값을 생성 (lazy evaluation)
   • 메모리 효율적
   • `function* numbers() { yield 1; yield 2; yield 3; } for (const n of numbers()) { console.log(n); // 1, 2, 3 }`
2. Lazy Evaluation 기법 활용
   • 전체 데이터를 한꺼번에 메모리에 올리지 않고, 필요한 순간에만 계산/반환

 

유사 배열(array-like object)

정의

• 인덱스와 `length` 프로퍼티를 가지고 있어 배열처럼 보이지만
• `next()` 메서드를 가지고 있으며 `{ done: Boolean, value: any }`와 같은 형태의 객체를 반환
• 반드시 `Symbol.iterator`가 구현되어 있는 것은 아님 → for...of, 스프레드 불가

예시

const obj = {0: 'a', 1: 'b', length: 2};
console.log(obj[0]); // 'a'
console.log(obj.length); // 2
// [...obj] // Error! 유사 배열은 스프레드 불가

 

변환 방법

Array.from(obj); // ['a','b']

 

주의할 점

• 유사 배열과 이터러블을 헷갈리기 쉬움
• 유사 배열이면서 이터러블인 경우도 존재
  • 예: arguments, NodeList, HTMLCollection 등
  • 이런 경우는 for...of나 스프레드(...) 사용 가능

관계 정리

이터러블(Iterable)
 └─ Symbol.iterator 메서드 존재
      └─ 반환 → 이터레이터(Iterator)
             └─ next() 호출로 실제 반복 수행
                 └─ { value, done } 반환

유사 배열(array-like)
 └─ 인덱스 + length만 존재
      └─ Symbol.iterator 없으면 for...of/스프레드 불가
      └─ Symbol.iterator 있으면 이터러블처럼 사용 가능 (예: arguments, NodeList)

 

 

 

정리

• 이터러블(Iterable): “반복할 수 있는 객체” (배열, 문자열, Set, Map 등)
• 이터레이터(Iterator): “실제로 반복을 수행하는 도구” (next() 사용)
• 관계: 이터러블은 Symbol.iterator를 구현해야 하고, 이 메서드가 이터레이터를 반환
• 강점: 일관된 반복 프로토콜, 다양한 구조 지원, 유연한 순회
• 한계: 대규모 데이터에서 성능·메모리 부담
• 보완: 제너레이터와 lazy evaluation 활용

 

 

📃 참고 문헌

코어 자바스크립트

Inpa Dev - 이터러블 & 이터레이터

F-Lab - 자바스크립트에서의 반복 프로토콜 이해하기