이터레이션

자바스크립트에서 데이터를 순차적으로 처리하는 핵심 개념인 이터레이션과 관련 기술들을 이해하는 것은 매우 중요하다.

1. 이터레이션 (Iteration)

이터레이션은 데이터를 한 덩어리씩 순회하며 처리하는 과정을 의미한다.
데이터 전체를 한 번에 다루기보다, 한 요소씩 차례대로 접근하여 처리함으로써 효율적이고 유연한 코드 작성을 가능하게 한다.

• 특징

• 데이터를 일정 단위(예: 한 요소씩)로 나누어 처리한다.
• 반복문을 통해 컬렉션 내의 모든 값을 순회한다.

이터레이션은 보통 이터레이터(Iterator) 패턴을 사용하여 구현된다.

2. 이터레이터 소비하기 (Consuming an Iterator)

이터레이터는 데이터를 순차적으로 반환하는 객체이다.
이터레이터를 소비한다는 것은 이터레이터가 제공하는 데이터를 하나씩 받아서 사용하는 것을 의미한다.

2.1. 이터레이터의 기본 구조

이터레이터는 일반적으로 next() 메서드를 가지고 있으며, 이 메서드를 호출할 때마다 다음과 같은 형태의 객체를 반환한다.

{
  value: 현재 처리 중인 값,
  done: 이터레이션이 끝났는지 여부를 나타내는 불리언 값
}

• value: 현재 순회 중인 데이터 값을 나타낸다.
• done: 이터레이션이 완료되었으면 true가, 아직 진행 중이면 false가 된다.

2.2. 이터레이터 소비 방법

이터레이터 소비에는 여러 가지 방법이 있으며, 대표적인 방법은 다음과 같다.

2.2.1. for...of 반복문 사용

for...of 문은 이터러블(Iterator를 소비할 수 있는 객체)을 순회하며 내부적으로 이터레이터 소비 프로토콜을 따른다.

const array = [1, 2, 3];
for (const value of array) {
  console.log(value); // 1, 2, 3 순서대로 출력된다.
}

2.2.2. 전개 구문(Spread Syntax) 사용

전개 구문(...)은 이터레이터를 소비하여 배열이나 함수의 인수 목록 등으로 확장한다.

const iterable = [1, 2, 3];
const arrayCopy = [...iterable];
console.log(arrayCopy); // [1, 2, 3]

2.2.3. 나머지 매개변수(Rest Parameter) 사용

함수의 매개변수로 나머지 매개변수를 사용하면 전달된 이터러블 객체가 배열로 변환된다.

function sum(...numbers) {
  return numbers.reduce((acc, cur) => acc + cur, 0);
}

console.log(sum(1, 2, 3)); // 6

3. 이터러블 (Iterable)

이터러블은 이터레이터 소비 프로토콜을 준수하는 객체를 의미한다.
즉, 이터러블 객체는 Symbol.iterator 메서드를 가지며, 이를 호출하면 이터레이터를 반환한다.

3.1. 기본 이터러블 객체

자바스크립트에서는 여러 기본 데이터 구조가 이터러블로 제공된다.

• 배열(Array)

배열은 이터러블하여 for...of 문, 전개 구문 등으로 쉽게 순회할 수 있다.

• 문자열(String)

문자열은 문자 하나하나가 순회 가능한 요소로 취급된다.

• Map

Map 객체는 [키, 값] 형태의 튜플을 순회할 수 있다.

• Set

Set 객체는 중복되지 않는 값들의 집합으로 이터러블하다.

// 배열의 이터러블 예시
const arr = [10, 20, 30];
for (const num of arr) {
  console.log(num);
}

// 문자열의 이터러블 예시
const greeting = "Hello";
const characters = [...greeting];
console.log(characters); // ["H", "e", "l", "l", "o"]

// Map의 이터러블 예시
const map = new Map();
map.set('a', 1);
map.set('b', 2);
for (const [key, value] of map) {
  console.log(key, value);
}

3.2. 직접 이터러블 구현하기

사용자가 직접 이터러블 객체를 만들고 싶다면, 객체에 Symbol.iterator 메서드를 정의하면 된다.

const customIterable = {
  data: [1, 2, 3],
  [Symbol.iterator]() {
    let index = 0;
    const data = this.data;
    return {
      next() {
        if (index < data.length) {
          return { value: data[index++], done: false };
        } else {
          return { value: undefined, done: true };
        }
      }
    };
  }
};

for (const value of customIterable) {
  console.log(value); // 1, 2, 3 순서대로 출력된다.
}

• 설명

위 예시에서 customIterable 객체는 Symbol.iterator 메서드를 통해 이터레이터를 반환한다.

이터레이터의 next() 메서드는 현재 인덱스가 배열의 길이보다 작으면 다음 값을 반환하고, 그렇지 않으면 done: true를 반환하여 순회를 종료한다.

정리하자면

// ✅ 1. 이터러블 객체 (Iterable) - 과자 상자 만들기
const snackBox = {
  snacks: ["🍫 초콜릿", "🍪 쿠키", "🍬 사탕"], // 이터러블 대상
  [Symbol.iterator]: function () {
    let index = 0;
    return {
      next: () => {
        return index < this.snacks.length
          ? { value: this.snacks[index++], done: false } // 과자 반환
          : { value: undefined, done: true }; // 반복 종료
      },
    };
  },
};

// ✅ 2. 이터레이션 (Iteration) - for...of 사용해서 과자 먹기
console.log("🎯 for...of 반복문 실행 (이터레이션)");
for (const snack of snackBox) {
  console.log(snack); // 과자를 하나씩 출력
}

// ✅ 3. 이터레이터 직접 사용 (next() 호출)
console.log("\n🎯 next()를 직접 호출 (이터레이터)");
const iterator = snackBox[Symbol.iterator]();
console.log(iterator.next()); // { value: "🍫 초콜릿", done: false }
console.log(iterator.next()); // { value: "🍪 쿠키", done: false }
console.log(iterator.next()); // { value: "🍬 사탕", done: false }
console.log(iterator.next()); // { value: undefined, done: true } // 반복 끝

// ✅ 4. 제너레이터 (Generator) 사용해서 쉽게 구현
console.log("\n🎯 제너레이터 사용해서 과자 자동 나누기");
function* snackGenerator() {
  yield "🍫 초콜릿";
  yield "🍪 쿠키";
  yield "🍬 사탕";
}

const gen = snackGenerator();
console.log(gen.next()); // { value: "🍫 초콜릿", done: false }
console.log(gen.next()); // { value: "🍪 쿠키", done: false }
console.log(gen.next()); // { value: "🍬 사탕", done: false }
console.log(gen.next()); // { value: undefined, done: true } // 반복 끝

개념	의미	역할	예제
이터레이션 (Iteration)	반복하는 행위 자체	for...of, while 같은 반복 과정	for...of, while
이터레이터 (Iterator)	반복을 수행하는 도구	next() 를 호출해 값을 하나씩 꺼냄	.next() 메서드 사용
이터러블 (Iterable)	반복 가능한 객체	for...of에서 사용할 수 있는 객체	배열, 문자열, Set, Map 등
제너레이터(Generator)	이터레이터를 쉽게 만드는 함수	yield 키워드로 값을 순차적으로 반환	function*, yield 사용

• 이터레이션은 데이터를 한 덩어리씩 순회하여 처리하는 방식이다.
• 이터레이터는 next() 메서드를 통해 순차적으로 데이터를 반환하며, 이터레이터 소비는 이를 활용하는 것이다.
• 이터러블은 Symbol.iterator 메서드를 가진 객체로, 배열, 문자열, Map, Set 등이 대표적이다.
• yield 키워드를 사용해 next() 를 쉽게 관리 할 수 있는 함수.