34장: Iterable

이터러블

이터레이션 프로토콜은 iterable 데이터 컬렉션(자료구조)을 만들기 위해 ES6에서 도입되었다.

이전에는 통일된 규약 없이, 각자 나름의 구조를 가지고 for 문, for...in 문, forEach 메서드 등 다양한방법으로 순회할 수 있었다.

• Iterable protocol

  • 이 프로토콜을 준수한 객체를 이터러블 이라고 한다

  • 빌트인 Iterable 종류 (link)

    • String, Array, TypedArray, Map, Set, and Segments

  • Symbol.iterator 를 프로퍼티 key로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체이다.

  • for...of 문 으로 순회할 수 있으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다.

  • Symbol.iterator 메서드를 직접구현하지 않거나 상속받지 않은 일반객체는 이터러블 프로토콜을 준수한 이터러블이 아니다.

• Iterator protocol

  • 이터러블의 Symbol.iterator 메서드를 호출하면 iterator를 반환한다

  • next 메서드 소유

    • value와 done 프로퍼티 반환

• iterable 과 iterator 차이 (원문링크)

  • iterable은 iterator를 리턴하는 [Symbol.iterator]() 를 가진 값

  • iterator는 {value, done} 객체를 리턴하는 next() 를 가진 값입니다.

Iterable

// Array, String, Map, Set 등은 이터러블이다.
const a = [1,2,3,4];
const b = {
    'a':1,
    'b':2,
    'c':3
};
const c = '1234';

console.log(typeof a[Symbol.iterator] === "function") // true 
console.log(typeof b[Symbol.iterator] === "function") // false
console.log(typeof c[Symbol.iterator] === "function") // true

for (const cElement of c) {
    console.log(cElement) // {1, 2, 3, 4}
}

const isIterable = v => v !== null && typeof v[Symbol.iterator] === 'function';
isIterable(new Map()); // -> true
isIterable(new Set()); // -> true

// 스프레드 문법 사용 가능
console.log([...c]) // [ '1', '2', '3', '4' ]
// 배열 디스트럭처링 할당 사용 가능
const [d, ...rest] = c

참고

2021/01 현재, 일반객체도 스프레드 문법 사용을 허용하도록 제안되었다.

Iterator

const array = [1, 2, 3];
const iterator = array[Symbol.iterator]();

// result 객체 반환 
console.log(iterator.next()); // { value: 1, done: false }
console.log(iterator.next()); // { value: 2, done: false }
console.log(iterator.next()); // { value: 3, done: false }
console.log(iterator.next()); // { value: undefined, done: true }

빌트인 이터러블

• for...in

  • 객체의 프로토타입 체인상에 존재하는 모든프로토타입의 프로퍼티중에서 프로퍼티 어트리뷰트 [[Enumerable]] 의 값이 ture인 프로퍼티를 순회하며 열거한다. 이때 프로퍼티 키가 Symbol인 프로퍼티는 열거하지 않는다.

• for...of

  • 내부적으로 이터레이터의 next 메서드를 호출하여 이터러블을 순회하며 next 메서드가 반환한 이터레이터 result 객체의 value 프로퍼티값을 for..of문의 변수에 할당한다. 그리고 이터레이터리절트 객체의 done 프로퍼티 값이 false 이면 이터러블의 순회를 계속하고 true이면 중단한다.

for ... of 문의 내부동작을 for 문으로 표현하면 다음과 같다.

const iterable = [1, 2, 3];
const iterator = iterable[Symbol.iterator]();

for (;;) {
  const res = iterator.next();
  if (res.done) break;
  const item = res.value;
  console.log(item); // 1 2 3
}

유사 배열 객체

유사 배열 객체 이터러블이 아닌 일반 객체이다.

이터레이션 하는법

// 유사 배열 객체
const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

// length 프로퍼티를 갖기 때문에 for로 순회 O
for (let i = 0; i < arrayLike.length; i++) {
  // 마치 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있다.
  console.log(arrayLike[i]); // 1 2 3
}

// 이터러블이 아니기 때문에 for...of 로 순회 X
for (const item of arrayLike) {
  console.log(item); // 1 2 3
}
// -> TypeError: arrayLike is not iterable

참고

ES6 이후 arguments, NodeList , HTMLCollection 에는 Symbol.iterator 메서드가 추가되었기에, 이터러블이 가능하다.

유사 배열 객체에서 for of 를 사용하려면

// 유사 배열 객체
const arrayLike = {
  0: 1,
  1: 2,
  2: 3,
  length: 3
};

// Array.from은 유사 배열 객체 또는 이터러블을 배열로 변환한다
const arr = Array.from(arrayLike);
console.log(arr); // [1, 2, 3]

사용자 정의 이터러블

이터레이션 프로토콜을 준수하지 않는 일반 객체도 이터레이션 프로토콜을 준수하도록 구현하면 사용자 정의 이터러블이 된다.

// 피보나치 수열을 구현한 사용자 정의 이터러블
const fibonacci = {
  // Symbol.iterator 메서드를 구현하여 이터러블 프로토콜을 준수한다.
  [Symbol.iterator]() {
    let [pre, cur] = [0, 1]; // "36.1. 배열 디스트럭처링 할당" 참고
    const max = 10; // 수열의 최대값

    // Symbol.iterator 메서드는 next 메서드를 소유한 이터레이터를 반환해야 하고
    // next 메서드는 이터레이터 리절트 객체를 반환해야 한다.
    return {
      next() {
        [pre, cur] = [cur, pre + cur]; // "36.1. 배열 디스트럭처링 할당" 참고
        // 이터레이터 리절트 객체를 반환한다.
        return { value: cur, done: cur >= max };
      }
    };
  }
};

// 이터러블인 fibonacci 객체를 순회할 때마다 next 메서드가 호출된다.
for (const num of fibonacci) {
  console.log(num); // 1 2 3 5 8
}

이 이터러블은 스프레드 문법과 배열 디스트럭처링에도 사용될 수 있다.

const arr = [...fibonacci];
console.log(arr); // [ 1, 2, 3, 5, 8 ]

const [first, second, ...rest] = fibonacci;
console.log(first, second, rest); // 1 2 [ 3, 5, 8 ]

이터러블이면서 이터레이터인 객체를 만드려면,

// 이터러블이면서 이터레이터인 객체를 반환하는 함수
const fibonacciFunc = function () {
    let [pre, cur] = [0, 1];
    let max = 10;

    // Symbol.iterator 메서드와 next 메서드를 소유한 이터러블이면서 이터레이터인 객체를 반환
    return {
        [Symbol.iterator]() { return this; },
        // next 메서드는 이터레이터 리절트 객체를 반환
        next() {
            [pre, cur] = [cur, pre + cur];
            return { value: cur, done: cur >= max };
        }
    };
};

iter = fibonacciFunc(10);

// iter는 이터레이터이므로 이터레이션 리절트 객체를 반환하는 next 메서드를 소유한다.
console.log(iter.next()); // { value: 1, done: false }
console.log(iter.next()); // { value: 2, done: false }
console.log(iter.next()); // { value: 3, done: false }
console.log(iter.next()); // { value: 5, done: false }
console.log(iter.next()); // { value: 8, done: false }
console.log(iter.next()); // { value: 13, done: true }