[JavaScript] 이터러블 객체(Iterator)

이터러블 객체란

순차적인 데이터 접근을 위한 핵심 인터페이스를 제공하며, 반복 가능한 데이터 컬렉션을 일반화 한 것으로, for...of 반복문과 같은 반복 작업에 사용될 수 있는 객체입니다. 이터러블 객체는 Symbol.iterator 메서드를 반드시 구현해야 하며, 다음 값은 next() 메서드를 가지고 있어야 제공됩니다.

이터러블의 핵심

Symbol.iterator

Symbol.iterator 메서드는 이터러블의 핵심입니다. 이 메서드는 이터러블 객체가 반복 가능한 방식으로 동작할 수 있게 해줍니다. 자바스크립트 엔진은 이 메서드를 호출하여 이터레이터 객체를 반환하며, 이터레이터의 next() 메서드를 호출하여 반복을 진행합니다.

next() 메서드

각 반복 단계에서 호출되며 아래와 같은 형태의 객체를 반환합니다.

{
  next() {
    // 다음 값이 있다면:
    //   return { value: <nextValue>, done: false };
    // 더 이상 값이 없으면:
    //   return { done: true };
  }
}

커스텀 이터러블 객체

// FibonacciIterable 객체: max에 지정한 개수만큼 피보나치 수를 생성합니다.
const FibonacciIterable = {
  max: 10, // 생성할 피보나치 수의 개수

  // Symbol.iterator 메서드를 구현하여 이터러블로 만듭니다.
  [Symbol.iterator]() {
    const max = this.max; // 현재 객체의 max 값을 캡처합니다.
    let count = 0;
    let a = 0, b = 1; // 초기 피보나치 값

    // 이터레이터 객체 반환
    return {
      next() {
        if (count < max) {
          // 현재 값 a를 반환한 후 피보나치 수열을 갱신합니다.
          const result = { done: false, value: a };
          // 구조 분해 할당
          [a, b] = [b, a + b];
          count++;
          return result;
        } else {
          // 지정한 개수만큼 반환한 후 반복 종료
          return { done: true };
        }
      }
    };
  }
};

// for..of를 사용하여 이터러블 객체를 순회합니다.
for (let num of FibonacciIterable) {
  console.log(num);
}
// 콘솔 출력 (첫 10개의 피보나치 수): 
// 0, 1, 1, 2, 3, 5, 8, 13, 21, 34

커스텀된 이터레이터 수동 사용

// 위에서 정의한 FibonacciIterable로부터 이터레이터를 직접 얻기
const fibIterator = FibonacciIterable[Symbol.iterator]();

console.log(fibIterator.next()); // { done: false, value: 0 }
console.log(fibIterator.next()); // { done: false, value: 1 }
console.log(fibIterator.next()); // { done: false, value: 1 }
// ...반복 호출하여 각 피보나치 값을 순차적으로 가져올 수 있습니다.

이터러블의 활용: Array.from

이터러블 객체나 유사 배열 객체는 내장 메서드 Array.from()을 사용하면 실제 배열로 변환할 수 있습니다.

유사 배열 객체

const arrayLikeObject = { 0: 'apple', 1: 'banana', length: 2 };
const realArrayFromLike = Array.from(arrayLikeObject); // 유사 배열 -> 배열 변환
console.log(realArrayFromLike); // ['apple', 'banana']
realArrayFromLike.push('orange'); // 배열 메서드 사용 가능

이터러블 객체

// 위 FibonacciIterable을 배열로 변환
const fibArray = Array.from(FibonacciIterable);
console.log(fibArray); // [0, 1, 1, 2, 3, 5, 8, 13, 21, 34]

// 또한, Array.from은 매핑 함수를 함께 전달하여 각 요소를 가공할 수 있습니다.
const squaredFib = Array.from(FibonacciIterable, num => num * num);
console.log(squaredFib);
// [0, 1, 1, 4, 9, 25, 64, 169, 441, 1156]

내장 이터러블 객체

배열

const arr = [10, 20, 30];
for (const value of arr) {
  console.log(value);
}

문자열

각 글자를 순회합니다.

for (const char of "Iterables") {
  console.log(char);
}

 Map, Set

Map과 Set 역시 이터러블이므로 for...of를 사용할 수 있습니다.

const set = new Set(["apple", "banana", "cherry"]);
for (const fruit of set) {
  console.log(fruit);
}