자바스크립트 이터레이터란

자바스크립트 이터레이터를 구글에 검색해 보면 다음과 같은 정의가 나온다.

"이터레이터는 ECMA2015부터 반영된 자바스크립트 반복기이다."

반복기..? 반복기가 도대체 뭐지..? 뭘 돌리는 기계 같은데.. 전혀 이해가 안 갔다. 나뿐만 아니라 많은 사람들도 헷갈리는 표현이라는 생각이 들었다. 그래서 이터레이터를이터레이터를 다음과 같이 더 쉽게 표현해보고자 한다. 이터레이터를 쉽게 풀어서 한 문장으로 정의하자면, 

이터레이터란,모든 순회할 수 있는 객체(대표적으로 배열, 스트링)의 원소에 하나하나에 접근할 수 있는 능력을 가진 객체이다. 

다만, 개별 원소에 접근하는 방식에는 일정한 규칙을 따라야지 이터레이터이다. 여기서 말하는 일정한 규칙이란 이터레이터 프로토콜이다. 즉 접근하는 방법이 객체마다 다르지 않고 동일한 방법(프로토콜)을 사용하는 것이다. 그리고 이러한 일정한 규칙을 준수하는 객체를 이터러블하다고 표현할 수 있다. 대표적인 이터러블은 배열이 있다.

이터러블은 for of 문을 사용하여서 내부의 원소에 접근할 수 있다. for of 문에서 내부적으로 이터레이터를 이용하기 때문이다. 이터레이터 리절트 객체의 done 프로퍼티 값이 false이면 이터러블의 순회를 계속하고 true이면 이터러블의 순회를 중단한다.

아래와 같이 이터레이터가 내장돼있지 않은 객체들 대상으로 이터레이터를 이용하여 이터러블한 객체를 만들 수 있다.

const fibonacci = {
    // Symbol.iterator 메소드를 구현하여 이터러블 프로토콜을 준수
    [Symbol.iterator]() {
      let a = 0; // 1, 2
      let b = 1; // 1, 2

      // 최대값
      const max = 20;
  
      // Symbol.iterator 메소드는 next 메소드를 소유한 이터레이터를 반환해야 한다.
      // next 메소드는 이터레이터 리절트 객체를 반환
      return {
        // fibonacci 객체를 순회할 때마다 next 메소드가 호출된다.
        next() {
          b = b + a; 
          a = b - a;       
          return {
            value: b, // 1, 2
            done: b >= max
          };
        }
      };
    }
  };
  
  // 이터러블의 최대값을 외부에서 전달할 수 없다.
  // for…of 문은 내부적으로 이터레이터의 next 메소드를 호출하여 이터러블을 순회하며
  //  next 메소드가 반환한 이터레이터 리절트 객체의 value 프로퍼티 값을 for…of 문의 변수에 할당한다
  for (const num of fibonacci) {
    // for...of 내부에서 break는 가능하다.
    // if (num >= 10) break;
    console.log(num); // 1 2 3 5 8
  }