[JavaScript] Iterator

🍏 <모던 자바스크립트 Deep Dive>를 바탕으로 요약 정리한 글입니다.

1. 이터러블 (Iterable)

• 이터레이션 프로토콜(iteration protocol): 순회 가능한(iterable) 자료구조를 만들기 위해 미리 약속한 규칙이다.
  이터러블 프로토콜과 이터레이터 프로토콜이 있다.
• 순회 가능한 자료구조: 배열, 문자열, Map, Set 등
• 이 자료구조들은 for…of문, 스프레드 문법, 배열 디스트럭처링 할당이 가능하다

2. 이터러블

• 순회 가능한 자료구조
• 이터러블 프로토콜을 준수한 객체를 말한다.
• 이터러블 프로토콜이란 Symbol.iterator 메서드를 호출했을때 이터레이터를 반환하는 규약이다.
• 일반 객체는 이터러블 프로토콜을 준수하지 않는다.

       
        // 사용자 정의로 어터러블 객체를 만드는 코드
        // 이터러블 객체
        const iterable = {
          [Symbol.iterator]() {
            let num = 0;
            return {
              next() {
                return {
                  value: num++, done: num === 5
                };
              }
            }
          }
        }
        
        // 이터러블 객체는 for ...of로 순회가능하다
        for (const item of iterable) {
          console.log(item);
        }

3. 이터레이터

• 이터러블에 존재하는 Symbol.iterator메서드의 반환값
• 이터레이터는 next 함수를 갖는다. 이 함수는 이터러블의 요소를 탐색하기 위한 포인터이다.
• next 함수를 호출하면 자료구조를 순회하면서 value와 done을 갖는 객체를 반환한다.
  여기서 value는 현재 순회중인 데이터의 값이고 done은 순회 완료 여부를 나타내는 boolean타입의 값이다.

  // 이터러블을 리턴하는 함수
  const func = () => {
   let i = 0;
   const max = 3;
   return {
     [Symbol.iterator]() {
       return {
         next() {
           return { value: i, done: i++ >= max };
         }
       }
     }
   }
  }
  const iterable = func();
  // 이터러블의 Symbol.iterator함수를 통해 이터레이터를 생성할 수 있다.
  const iterator = iterable[Symbol.iterator]();
  // 이터레이터의 next메서드는 이터러블을 순서대로 하나씩 순회할 수 있다.
  console.log(iterator.next()); // {value: 0, done: false}
  console.log(iterator.next()); // {value: 1, done: false}
  console.log(iterator.next()); // {value: 2, done: false}
  console.log(iterator.next()); // {value: 3, done: true}