javascript에서 이터러블(iterable)과 이터레이터(iterator)란

자바스크립트를 사용하면서 반복되는 객체를 어떻게 효율적으로 사용해야 할지 고민을 합니다.

그렇기 때문에 ES6가 들어서면서 생기게된 이터러블과 이터레이터에 관련된 개념을 정리하여 새기기 위하여 정리를 했습니다.

이터러블(iterable)이란?

우리가 사용하는 String, Array도 iterable이고 ES6에서 추가된 Set, Map도 iterale입니다. 이터러블을 충족하기 위해서는 두가지 조건을 충족해야 되는데 아래와 같은 조건을 충족해야합니다.

• Symbol.iterator의 @@iterator 메소드를 구현해야 합니다.
• [Symbol.iterator] 메서드는 Iterator 객체를 반환해야 한다.

이터러블을 알아보기 전에 잠시 이터레이터(iterator)에 대해 알아봅시다.

iterator

반복자(iterator)는 두 개의 속성(value, done)을 반환하고 next() 메소드 사용하여 객체의 Iterator protocol을 구현을 하면 이터레이터라고 정의할 수 있습니다.

※ iterator protocol: next()라는 메서드를 가지고 있고 done이 ture가 될 때까지 반복해야 합니다.

• done (boolean): 마지막 반복 작업을 마쳤을 경우 true. 만약 iterator(반복자)에 return 값이 있다면 value의 값으로 지정되며 done은 false로 리턴합니다.
• vlaue: iterator의 값으로 done이 true가 될 때까지 반복하여 리턴합니다.

const iterable = {
  [Symbol.iterator]() {
    let i = 0
    // iterator 객체
    return {
      next() {
        while(i < 10) { // i가 10이 될 때까지 반복기 수행
          return { value: i++, done: false }
        }
        return { done: true } // i 가 10이 되면 반복 종료(value 값 생략 가능)
      }
    }
  }
}

for(let num of iterable) console.log(num) // 0, 1, ..., 9

위 소스코드와 같이 iterable은 반복자 객체를 반환하는 객체를 이터러블하다고 할 수 있습니다.

Well-formed iterable

이터레이터와 이터러블의 특징을 모두 가진 객체를 Well-formed iterable이라고 합니다.
쉽게 말하자면 Symbol.iterator의 @@iterator메서드를 가지고 있고 next() method를 구현하면 됩니다.
아래의 코드를 보면

const iterable = {
  i: 0,
  next(){
    while(this.i < 10) {
      return { value: this.i++, done: false }
    }
    return { done: true }
  },
  [Symbol.iterator]() {
    return this
  }
}

const iter = iterable[Symbol.iterator]()

console.log(iter.next()) // { value: 0, done: false }
console.log(iter.next()) // { value: 1, done: false }
console.log(iter.next()) // { value: 2, done: false }

// 앞에서 next()를 호출했기 때문에 3부터 시작된다.
for (num of iter) console.log(num) // 3, 4, ..., 9

iterable처럼 iterator 객체를 리턴하고 iterator처럼 next()를 구현함으로써 현재 상태를 저장하고 반복자를 사용할 수 있습니다.

 

참조

https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Iteration_protocols

Iteration protocols - JavaScript | MDN

https://armadillo-dev.github.io/javascript/what-is-iterable-and-iterator/