Mistrie's story
ES6 간단 정리 - Iterable & iterator... iteration protocol 본문
# 출처 - poiemaweb.com/es6-iteration-for-of을 공부하면서 내용을 간단히 정리함!
- Iterable / iterator를 알기 위해선 iteration protocol을 먼저 알아야 함.
Iteration protocol
- Iteration protocol 이란, 데이터 컬렉션을 순회하기 위한 프로토콜임.
- 이 프로토콜을 준수한 객체는 for...of 문으로 순회할 수 있고, Spread 문법의 피연산자가 될 수 있음!
- 이 프로토콜에는 iterable protocol 과 iterator protocol 이 있음!

Iterable
- iterable protocol을 준수한 객체를 iterable 이라고 부름.
- iterable 은 Symbol.iterator 메소드를 구현하거나, 프로토타입 체인에 의해 상속한 객체를 말함
- Symbol.iterator 메소드는 iterator를 반환함
- iterable 은 for...of 문에서 순회할 수 있으며, spread 문법의 대상으로 사용 가능함!
- Array는 iterable 메서드를 소유했으며, 위 프로토콜을 준수한 객체이므로 iterable 임
const array = ['a', 'b', 'c'];
console.log(Symbol.iterator in array); // true
for(let item of array) {
console.log(item); // 'a', 'b', 'c'
}
- 이에 반해 일반 객체는 Symbol.iterator 메소드를 갖고 있지 않음. 즉, 일반 객체는 iterable 이 아님.
- 이 말은 for... of 문으로 순회할 수 없고, Spread 문법의 대상으로 사용할 수도 없음.
- 그러나 ECMAScript2018 에서는 객체 리터럴에서도 Spread 프로퍼티를 사용할 수 있도록 제안됨
var a = { a: 1, b: 2 };
var b = [...a]; // a is not iterable
var c = { c: 3, d: 4 };
var d = {...a, ...c}; // { a: 1, b: 2, c: 3, d: 4 };
Iterator
- Iterator 프로토콜은 next 메서드를 소유함
- next 메서드를 호출하면 iterable 을 순회하며, value, done 프로퍼티를 갖는 iterator result 객체를 반환함.
- 이 규약을 준수한 객체가 iterator 임.
- iterable 객체에서 Symbol.iterator 메소드를 호출하면 iterator를 반환함.
const array = ['a', 'b', 'c'];
const iterator = array[Symbol.iterator]();
console.log(iterator.next()); // { value: 'a', done: false };
console.log(iterator.next()); // { value: 'b', done: false };
console.log(iterator.next()); // { value: 'c', done: false };
console.log(iterator.next()); // { value: 'undefined', done: true };
- value 프로퍼티는 현재 순회 중인 iterable 값을 담고 있음
- done 프로퍼티는 iterable의 순회 완료 여부를 담고 있음.
Iteration protocol의 필요성
- 데이터 소비자는 여러 문법들을 통해서 데이터 소스를 사용함.
- 그런데 데이터 공급자가 여러 방식의 데이터 소스를 제공하는데, 이를 순회하는 방식이 전부 제각각이라면
데이터 소비자의 입장에서는 이러한 데이터들을 순회하기 위한 방식을 모두 지원해야 함.
- 그러나 iteration protocol을 준수하도록 규정하면, 데이터 소비자의 입장에서는 iteration protocol 만을 지원하도록
구현하면 됨.
'개발 > ES6' 카테고리의 다른 글
| ES6 간단 정리 - async / await (0) | 2021.01.06 |
|---|---|
| ES6 간단 정리 - Generator (0) | 2021.01.06 |
| ES6 간단 정리 - Symbol (0) | 2021.01.06 |
| ES6 간단정리 - Promise (0) | 2021.01.06 |
| ES6 간단정리 - Destructuring (0) | 2021.01.05 |