Iterable

1. Iterable

• 반복 가능한 객체는 for ..of 구문과 함께 ES2015에서 도입됨.
• 반복가능한 객체를 다른 객체와 구분짓는 특징은
  객체의 Symbol.iterator 속성에 특별한 형태의 함수가 들어있다는 것

const str = 'hello';
const iStr = str[Symbol.iterator]();

• iterable: 객체의 Symbol.iterator 속성에 특정 형태의 함수가 들어있다면, 이를 반복가능한 객체 혹은 iterable이라고 함.
• 그리고 해당 객체는 iterable protocol을 만족한다
• 내장된 생성자 중 iterable 객체를 만들어내는 생성자
  • String
  • Array
  • TypedArray
  • Map
  • Set

2. Iterable의 사용

• iterable이라면. 그 객체에 대해서 아래의 기능들이 사용가능함.
  • for...of
  • spread operator
  • 구조분해할당
  • 기타 iterable을 인수로 받는 함수
• 문자열도 위의 기능들이 사용가능함.

// for...of
for(let c of 'hello') {
  console.log(c)	
}
// spread operator
const chars = [...'hello'];
// 구조분해할당
const [c1, c2] = 'hello';
// Array.from은 iterable 혹은 배열비슷한 객체를 인수로 받음
Array.from('hello');

3. Iterator Protocol

• 앞서 말한 거와 같이 iterable 객체는 iterable protocol을 만족한다. 즉, Symbol.iterator 속성에 특별한 형태의 함수가 저장되어 있다.
• iterable protocol을 만족하려면, Symbol.iterator 속성에 저장되어 있는 iterator 객체를 반환해야 함.
• iterator 객체는 아래 조건을 만족하는 객체.
  • next()를 가짐.
  • next() 다음 두 속성을 갖는 객체를 반환
    • done: 반복 끝을 알려주는 boolean type
    • value: 현재의 값
• 위 조건을 iterator protocol 이라고 함.

// 문자열은 iterable 객체이므로, iterator 생성 가능
const iStr = 'hello'[Symbol.iterator]();
iStr.next(); // {value: 'h', done: false}
iStr.next(); // {value: 'e', done: false}
iStr.next(); // {value: 'l', done: false}
iStr.next(); // {value: 'l', done: false}
iStr.next(); // {value: 'o', done: false}
iStr.next(); // {value: undefined, done: true}

// generator()로부터 생성된 객체 역시 iterable 객체이므로
// iterator 생성가능
function* gen() {
  yield 1;
  yield 2;	
}
const iGen = gen()[Symbol.iterator]();
iGen.next(); // {value: 1, done: false}
iGen.next(); // {value: 2, done: false}
iGen.next(); // {value: undefined, done: true}

• generator() 사용하지 않고 등차 수열 구현해보기

function range(start = 0, end = Infinity, step = 1) {
  // `range` 함수는 iterable을 반환합니다.
  return {
    currentValue: start,
    [Symbol.iterator]() {
      // iterable의 `Symbol.iterator` 메소드는 iterator를 반환해야 합니다.
      return {
        next: () => {
          if (this.currentValue < end) {
            const value = this.currentValue;
            this.currentValue += step;
            return {
              done: false,
              value
            }
          } else {
            return {
              done: true
            }
          }
        }
      };
    }
  }
}

출처: [JavaScript로 만나는 세상](https://helloworldjavascript.net/pages/260-iteration.html#iterator-protocol)