Iteration protocols는 ECMAScript 2015(ES6)에서 추가된 protocols 이다. 데이터 컬렉션을 순회하기 위한 규칙으로 볼 수 있다. Iteration protocols에는 두 가지 protocol이 있다고 한다.
Iterable protocol을 준수한 객체를 Iterable
이라고 한다. Iterable
은 Symbol.iterator
메소드를 구현 하거나, 프로토타입 체인에 의해 상속한 객체를 의미한다고 한다. Symbol.iterator
메소드는 Iterator
을 반환한다고 한다.
let arr = [1, 2, 3]
console.log(Symbol.iterator in arr) //true
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 }
ES6 에서 제공하는 built-in iterable은 다음과 같다.
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 }
for...of , for...in에서 출발한 벨로그이다. 아직 결말은 없는 가운데...
[Iterable, MDN, 2022년07월07일 접속]
https://developer.mozilla.org/ko/docs/Web/JavaScript/Reference/Iteration_protocols#iterable
[이터레이션과 for...of 문, poiemweb, 2022년07월13일 접속]
https://poiemaweb.com/es6-iteration-for-of