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

SOLEE_DEV·2021년 1월 30일
0

Javascript

목록 보기
6/19
post-thumbnail

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로써 출력
profile
Front-End Developer

0개의 댓글