[JavaScript/DeepDive]34.이터러블

• [34.1] 이터레이션 프로토콜
• ES6에서 도입된 이터레이션 프로토콜은 순회 가능한 데이터 컬렉션(자료구조)을 만들기 위해 ECMAScript 사양에 정의하여 미리 약속한 규칙이다.
• ES6에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for ... of 문, 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화했다.
• 이터러블
• 이터러블 프토로콜을 준수한 객체를 이터러블이라 한다.
  • 즉, 이터러블은 Symbol.iterator를 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체를 말한다.
• 예를 들어, 배열은 Array.prototype의 Symbol.iterator 메서드를 상속받는 이터러블이다.
  • 이터러블은 for ... of 문으로 순회할 수 있으며, 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 있다.
    • const array = [1, 2, 3];
      
      // 배열은 Array.prototype의 Symbol.iterator 메서드를 상속받는 이터러블이다.
      console.log(Symbol.iterator in array); // true
      
      // 이터러블인 배열은 for ... of 문으로 순회 가능하다.
      for (const item of array) {
           console.log(item);
      }
      
      // 이터러블인 배열은 스프레드 문법의 대상으로 사용할 수 있다.
      console.log([...array]); // [1, 2, 3]
• Symbol.iterator 메서드를 직접 구현하지 않거나 상속받지 않은 일반 객체는 이터러블 프로토콜을 준수한 이터러블이 아니다. 따라서 일반 객체는 for ... of 문으로 순회할 수 없으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 없다.
  • 하지만 일반 객체도 이터러블 프로토콜을 준수하도록 구현하면 이터러블이 된다.
• 이터레이터
• 이터러블의 Symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다.
• 이터러블의 Symbol.iterator 메서드가 반환한 이터레이터는 next 메서드를 갖는다.
  • 이터레이터의 next 메서드는 이터러블의 각 요소를 순회하기 위한 포인터의 역할을 한다.
  • 즉, next 메서드를 호출하면 이터러블을 순차적으로 한 단계씩 순회하며 순회 결과를 나타내는 이터레이터 리절트 객체를 반환한다.
    • // 배열은 이터러블 프로토콜을 준수한 이터러블이다.
      const array = [1, 2, 3];
      
      // Symbol.iterator 메서드는 이터레이터를 반환한다. 이터레이터는 next 메서드를 갖는다.
      const iterator = array[Symbol.iterator]( );
      
      // next 메서드를 호출하면 이터러블을 순회하며 순회 결과를 나타내는 이터레이터 리절트 객체를 반환한다.
      // 이터레이터 리절트 객체는 value와 done 프로퍼티를 갖는 객체다.
      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}
      
      
      
      
• [34.3] for ... of 문
• for ... of 문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다.
• for ... of 문의 문법은 다음과 같다.
  • for (변수선언문 of 이터러블) { ... }
• for ... of 문은 내부적으로 이터레이터의 next 메서드를 호출하여 이터러블을 순회하며 next 메서드가 반환한 이터레이터 리절트 객체의 value 프로퍼티 값을 for ... of 문의 변수에 할당한다.
• 그리고 이터레이터 리절트 객체의 done 프로퍼티 값이 false이면 이터러블의 순회를 계속하고 true이면 이터러블의 순회를 중단시킨다.
  • for (const item of [1, 2, 3]) {
         // item 변수에 순차적으로 1, 2, 3이 할당된다.
         console.log(item); // 1 2 3
    }