파트2. ES6에서의 순회와 이터러블 이터레이터 프로토콜

기존과 달라진 ES6에서의 리스트 순회

• for i++
• for of

const list = [1, 2, 3];
for (let i = 0; i < list.length; i++) {
  console.log(list[i]);
}
for(const a of list) {
  console.log(a);
}

이터러블/이터레이터 프로토콜

• 이터러블 : 이터레이터를 리턴하는 [Symbol.iterator]()를 가진 값
• 이터레이터: { value, done } 객체를 리턴하는 next()를 가진 값
• 이터러블/이터레이터 프로토콜 : 이터러블을 for...of, 전개 연산자 등과 함께 동작하도록한 규약

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

const set = new Set([1, 2, 3]);
const setIterator = set[Symbol.iterator](); //SetIterator

const map = new Map([[1, 1], [2, 2], [3, 3]]);
const mapIterator = map[Symbol.iterator](); //MapIterator

사용자 정의 이터러블을 통해 알아보기

const iterable = {
  [Symbol.iterator]() {
    let limit = 3;
    return {
      next() {
        return limit < 1 ? {done: true} : { value: limit--, done: false }
      }
    }
  }
}
const iterator = iterable[Symbol.iterator]();
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());

for (const a of iterable) {
  console.log(a);
}

Iterator는 반드시 자기자신을 리턴하는 Symbol.iterator를 구현되어야 함을 스펙문서에 명시되어 있습니다.

const arr = [1, 2, 3];
const iterator = arr[Symbol.iterator]();
console.log(iterator.next().value);
for ( const a of iterator) { console.log(a); }

전개연산자

사용자 정의 이터러블은 Iterator내에 [Symbol.iterator]가 정의될 때 정상적으로 동작합니다.

const iterable = {
  [Symbol.iterator]: function() {
    let limit = 3;
    return {
      next() {
        return limit < 1 ? {done: true} : { value: limit--, done: false }
      },
      [Symbol.iterator]: function() { return this }
    }
  }
}

console.log([...iterable]);