이터레이션 프로토콜과 for-of

iteration protocol

우선 이터러블(iterable)에 대한 개념부터 알아보자. 이터러블은 순회 가능한 자료구조를 뜻한다. Symbol.iterator를 프로퍼티 키로 사용한 메서드를 구현함으로써 순회 가능한 자료구조가 된다.

그럼 어터레이터(iterator)는 무엇일까? 이터러블 메서드는 이터레이터를 반환하는데 여기서 이터레이터는 요소를 탐색하기 위한 포인터이다.
(next() 메서드를 갖는 객체) next() 메서드는 value, done 프로퍼티를 갖는 객체를 반환해서 이터러블 객체를 순회할 수 있다.

그래서 next() 메서드를 통해 데이터에 순차적으로 접근할 수 있는 방법을 보여주는 것이다.

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

console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());
console.log(iterator.next());


// for문 으로 순회


for (;;) {
  const res = iterator.next();
  console.log(res);
  if (res.done) break;
}

for-of

for-of는 이터러블 객체를 순회한다. next() 메서드를 호출하며 반환하는 객체의 done 프로퍼티가 true값이 될 떄까지 반복된다.

for (const val of ['a','b','c']) {
  console.log(val);
}

// 문자열

for (const val2 of 'abc') {
  console.log(val2);
}

// Map

for (const [key, value] of new Map(['a','1'],['b','2'],['c','3'])) {
  console.log(`key : ${key} value: ${value}`);
}


// Set

for (const val3 of new Set([1,2,3,])) {
  console.log(val3);
}

커스텀 이터러블

이터레이션 프로토콜을 지킨다면 객체도 이터러블로 만들 수 있다. 밑 예제는 피보나치 수열을 이터러블 객체로 구현해본 것이다.

const fibonacci = {
  [Symbol.iterator]() {
    let [prev, curr] = [0,1];
    let step = 0;

    const maxStep = 5;
    return {
      next() {
        [prev,curr] = [curr, prev + curr];
        return { value: curr, done: step++ >= maxStep };
      }
    };
  }
};

for (const num of fibonacci) {
  console.log(num);
}

const arr = [...fibonacci];
console.log(arr);

const [first, second, ...rest] = fibonacci;
console.log(first,seond,rest);