Iteration protocols?

Parker.Park·2022년 7월 8일

개념

목록 보기

4/16

Iteration protocols?

Iteration protocols는 ECMAScript 2015(ES6)에서 추가된 protocols 이다. 데이터 컬렉션을 순회하기 위한 규칙으로 볼 수 있다. Iteration protocols에는 두 가지 protocol이 있다고 한다.

Iterable protocol
Iterator protocol

Iterable protocol

Iterable protocol을 준수한 객체를 Iterable이라고 한다. Iterable은 Symbol.iterator메소드를 구현 하거나, 프로토타입 체인에 의해 상속한 객체를 의미한다고 한다. Symbol.iterator 메소드는 Iterator을 반환한다고 한다.

let arr = [1, 2, 3]

console.log(Symbol.iterator in arr) //true

Iterator protocol

Iterator protocol은 next 메소드를 소유하고 있으며, 이터러블을 순회 하며 value, done 프로퍼티를 갖는 객체를 반환한다고 한다.
정리하자면 Iterable protocol을 준수한 객체를 Iterable이라고 하며, Iterable은 Symbol.iterator 메소드를 호출하여 Iterator를 생성하고, Iterator는 next 메소드를 갖으며, next 메소드를 호출하면 value와 done 프로퍼티를 갖는 iterator result 객체를 반환한다고 한다.

let arr = [1, 2, 3]

let abc = arr[Symbol.iterator]()

console.log('next' in abc) //true

console.log(abc.next()) //{ value: 1, done: false }

next 메소드를 호출하면 이터러블을 순차적으로 한 단계씩 순회하며 iterator result 객체를 반환한다고 한다.

let arr = [1, 2, 3]

let abc = arr[Symbol.iterator]()

console.log(abc.next()) //{ value: 1, done: false }
console.log(abc.next()) //{ value: 2, done: false }
console.log(abc.next()) //{ value: 3, done: false }
console.log(abc.next()) //{ value: undefined, done: true }

Built-in iterable

ES6 에서 제공하는 built-in iterable은 다음과 같다.

Array
String
Map
Set
TypedArray
DOM data structure
Arguments

iterable이기 때문에 순회 for...of 사용이 가능하다.

function iterator(a, b){
 
  for(let key of arguments){
    console.log(key)
  }
  
}

iterator(10, 20) 
//10
//20

let s = "abc" //String 또한 iterable이다.
let iter = s[Symbol.iterator]()

console.log(iter.next()) //{ value: 'a', done: false }
console.log(iter.next()) //{ value: 'b', done: false }
console.log(iter.next()) //{ value: 'c', done: false }
console.log(iter.next()) //{ value: undefined, done: true }