모던 자바스크립트

Iterantion

ECMAScript 2015 (ES6)에는 새로운 문법이나 빌트인(Built-in) 뿐만이 아니라, 프로토콜(Protocols, 표현법들)도 추가되었습니다. 이 프로토콜은 일정 규칙만 충족한다면 어떠한 객체에 의해서도 구현될 수 있습니다

영상 강의

PART 1

예제

Iterable 프로토콜

Iterable 프로토콜의 조건은 다음과 같습니다.

  • [Symbol.iterator] 메서드를 소유해야 합니다.
  • Iterator 프로토콜에 준하는 객체를 반환해야 합니다.

사용자 정의 Iterable 객체 예시


 





































const star4 = {
  [Symbol.iterator]() {
    let _star = Symbol('_star');
    return {
      [_star]: '',
      next() {
        if ( this[_star].length < 4 ) {
          this[_star] += '*';
          return {
            value: this[_star],
            done: false
          };
        } else {
          return { done: true };
        }
      }
    }
  }
};

/* -----------------------------------
// 검토
------------------------------------ */

star4[Symbol.iterator]();
// 출력: {next: ƒ, Symbol(_star): ""}

[...star4];
// 출력: ["*", "**", "***", "****"]

for (let star of star4) {
  console.log(star);
}
// 출력:
// *
// **
// ***
// ****

Iterator 프로토콜

Iterator 프로토콜의 조건은 다음과 같습니다.

  • 인자를 받지 않는 next() 메서드를 소유해야 합니다.
  • next() 메서드의 반환 값은 객체로 value, done 속성을 소유해야 합니다.
  • done은 반복이 종료될 경우 true, 종료되지 않을 경우 false 여야 합니다.
  • value는 JavaScript의 모든 데이터 타입 설정이 가능합니다.

사용자 정의 Iterator 객체 예시

function iteratorMaker(array) {
  let index = 0;
  return {
    next() {
      if (index < array.length) {
        return { done: false, value: array[index++] };
      } else {
        return { done: true };
      }
    }
  }
}

/* -----------------------------------
// 검토
------------------------------------ */

const protocols = iteratorMaker(['iteration', 'iterable', 'iterator']);
// 출력: {next: ƒ}

protocols.next(); // {done: false, value: 'iteration'}
protocols.next(); // {done: false, value: 'iterable'}
protocols.next(); // {done: false, value: 'iterator'}
protocols.next(); // {done: true, value: undefined}

주의!

for..of문은 Iterable 프로토콜을 준수하는 객체만 순환 처리합니다.

참고

← Iteration Object →