[JavaScript] 함수형 프로그래밍 (3) - '사용자 정의 이터러블'

3. 사용자 정의 이터러블

• for of문은 내부적으로 iterable 객체의 [Symbol.iterator]에 접근해서 next() 메소드를 수행하게 되어있음
• iterable iterator는 JS 내장 객체에서만 지원하는 것이 아니다.
  • 많은 오픈소스 라이브러리, JS에서 순회가 가능한 값을 가진 객체는 이러한 프로토콜을 따르게 된다.
  • ex) imutable JS도 for of문을 순회할 수 있도록 구현
  • DOM 관련 값들도 이러한 for of문을 통한 순회가 가능하다!

// 사용자 정의 이터러블 객체 구현
const iterable = {
  [Symbol.iterator]() {
    let i = 3;
    return {
      next() {
        return i == 0 ? {done:true} : {value:i--, done:false}
      }
    }
  }
}

let iterator = iterable[Symbol.iterator]();
for(const a of iterable) {
  console.log(a);
}

이렇게 설계된 iterable 객체의 단점?

• 설계된 iterator 자체를 for of문에돌리면 오류가 발생!
• 잘 설계된 iterable (well-formed iterable, iterator)
  1. iterator를 만들었을 때 next()를 진행하다가 그대로 이어서 순회를 진행 O
  2. iterator 자체를 for of에 넣었을 때 그대로 모든 값을 순회할 수 있음
  3. 왜냐면 iterator 자체도 '자기 자신을 return하는 iterator'를 가지고 있기 때문
• 따라서, iterator 내부에도 iterator 메소드를 선언에서 자기 자신을 반환하게 끔 해줘야 됨

사용자 정의 iterable 객체 재설계

const iterable = {
  [Symbol.iterator]() {
    let i = 3;
    return {
      next() {
        return i== 0 ? {done: true} : {value: i--, done: false}
      },
      [Symbol.iterator]() {
        // 이터레이터 내부에서 이터레이터를 호출하면 
        // 자기 자신을 호출하게!
        return this;
      }
    }
  }
};

let iterator = iterable[Symbol.iterator]();
iterator.next();

for(const a of iterator) {
  console.log(a);
}

4. 전개 연산자

• 전개 연산자 역시, 이터러블, 이터레이터 프로토콜을 따르기 때문에 이터러블 객체를 펼쳐서 전개해줄 수 있음

const a = [1,2];
console.log(...a); // 1 2

// a[Symbol.iterator] = null; // iterable이 아니라는 오류!

console.log([...a, ...[3,4]); // 하나의 array로써 출력