Mistrie's story

ES6 간단 정리 - Iterable & iterator... iteration protocol 본문

개발/ES6

ES6 간단 정리 - Iterable & iterator... iteration protocol

Mistrie 2021. 1. 6. 13:07

# 출처 - poiemaweb.com/es6-iteration-for-of을 공부하면서 내용을 간단히 정리함!

 

- Iterable / iterator를 알기 위해선 iteration protocol을 먼저 알아야 함.

 

Iteration protocol

- Iteration protocol 이란, 데이터 컬렉션을 순회하기 위한 프로토콜임.

- 이 프로토콜을 준수한 객체는 for...of 문으로 순회할 수 있고, Spread 문법의 피연산자가 될 수 있음!

- 이 프로토콜에는 iterable protocol 과 iterator protocol 이 있음!

Iteration 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