iterable과 iterator에 대하여 for..of...🧠

이터러블(iterable)

이 개념들은 ES6(ECMAScript 2015)에서 도입되었습니다.

• 이터러블(iterable) 프로토콜
• 이터레이터(iterator) 프로토콜
• 이터러블은 반복 가능해야 하고
• 이터레이터 프로토콜은 Symbol.iterator 메서드를 갖고 있어야 한다.

이터러블은 즉, 반복 가능한 객체를 의미합니다. 배열 이외에도 다수의 내장 객체가 반복이 가능합니다.
문자열 역시 이터러블의 예입니다.

    const name = 'nami';
    const nameArr = Array.from(name);
    console.log(nameArr);
    //(4) ['n', 'a', 'm', 'i']

"console 결과")

1. Symbol.iterator는 이터레이터 객체를 반환
2. 이후 for..of는 반환된 이터레이터 객체만을 대상으로 동작
3. 이 iterator 객체와 이 객체의 메서드 next()매서드를 호출
4. next()는 값을 객체 {done:.., value :...}형태로 반환
5. done 부분이 true 가 되었을때 헤당 for..of 문이 멈춘다.
6. iterable 객체는 Symbol.iterator매서드를 가지고 있고, 이 매서드는 객체의 iterator 를 반환합니다.

이터레이터(iterator)

iterator는 값을 하나씩 차례로 꺼낼 수 있는 객체를 의미,
iterator 객체는 "next()"메서드를 가지고 있으며 이 메서드는 "value" 와 "done" 속성을 가지고 객체를 반환
"done" 속성이 'true' 를 반환할 때까지 반복합니다.

      const name = 'nami';
      const nameArr = Array.from(name);
      const nameIterator = nameArr[Symbol.iterator]();
      console.log(nameIterator.next());
      console.log(nameIterator.next());
      console.log(nameIterator.next());
      console.log(nameIterator.next());
      console.log(nameIterator.next());

      { value: 'n', done: false } FetchandAsync.html: 29 
      { value: 'a', done: false } FetchandAsync.html: 30 
      { value: 'm', done: false } FetchandAsync.html: 31 
      { value: 'i', done: false } FetchandAsync.html: 32
      {value: undefined, done: true} FetchandAsync.html:33

Custom iterable

const myIterable = {
    from: 1,
    to: 5,
    [Symbol.iterator]() { // 속성에 Symbol.iterator 매서드 구현
        return {
            current: this.from,
            last: this.to,
            next() {
                if (this.current <= this.last) {
                    return { value: this.current++, done: false };
                } else {
                    return { value: undefined, done: true };
                }
            }
        };
    }
};

for (const item of myIterable) {
    console.log(item); // 1, 2, 3, 4, 5
}

요약👍🏻

• iterable : 반복할 수 있는 모든 객체, Symbol.iterator매서드를 가짐
• iterator : 값들을 하나씩 꺼낼 수 있는 객체, 'next()' 매서드를 가짐