1. 탐구

iterable & iterator

• iterable : 자료를 반복할 수 있는 객체
  • iterable 규약을 따르는 객체
  • iterator를 리턴하는 [Symbol.iterator]()메서드를 가진 객체
• iterator : {value:값,done:true/false} 형태의 iterator 객체를 리턴하는 next()메서드를 가진 객체
  • next메서드로 순환할 수 있는 객체
• iterable 프로토콜 / iterator프로토콜 : iterable을 for..of, 전개연산자, 비구조화 등 iterable이나 iterator 프로토콜을 따르는 연산자들과 함께 동작하도록 하는 약속된 규약

Iterator 직접 만들기

let range = { // 1) 객체 생성
  from: 1,
  to: 5
};

range[Symbol.iterator] = function() { // 2) 새로운 키:밸류 를 추가한다. 키는 변수형태, 밸류는 함수이다.
    return { // 객체를 리턴한다. 그런데 좀 특벽할 형태의 객체
      current: this.from,
      last: this.to,

      next() { // 3) next() 정의
        if (this.current <= this.last) {
          return { done: false, value: this.current++ }; 
          // 4) {value : 값 , done : true/false} 형태의 이터레이터 객체를 리턴합니다.
        } else {
          return { done: true };
        }
      }
    };
};

range의 Symbol.iterator 객체는 클로저 next()를 리턴한다. 이 클로저는 리턴했을 때의 실행 컨텍스트에 있는 변수인 current와 last에 접근이 가능하다.

여기서 range는 Symbol.iterator메서드를 가진 iterable 객체이다. 여기서 Symbol.iterable은 {value,done}을 리턴하는 next()메서드를 가진 객체를 말한다.

유사배열 vs iterable

• iterable : Symbol.iterator메서드가 구현된 객체
• 유사배열 : index와 length 프로터피가 있어서 배열처럼 보이는 객체
  • Map자료형, DOM에서 반환한 배열, argument배열 : 이터러블 작업이 마쳐진 유사배열

모든 유사배열은 Symbol.iterator메서드가 있지 않는 한 iterable객체가 아니다. 유사배열을 iterable객체로 만들기 위해서는 Array.from메서드를 이용해 진짜 배열로 만들어준다.

const obj = {
  0: 1,
  1: 2,
  2: 3,
  length: 3,
};

const array = Array.from(obj);
console.log(array);

for (const it of array) console.log(it);

단, object의 key값이 0부터 시작하는 index여야하고, length값도 가지고 있어야 한다.

• 문자열은 이터러블인 유사배열이다.

Generator