(ES6) - 04 Iteration

  • SUNGMIN SHIN
  • 6 Minutes
  • 2017년 9월 26일

[ ECMA Script6 ]

(http://book.naver.com/bookdb/book_detail.nhn?bid=11556385)


4.1 개요


Iteration의 사전적 의미는 되풀이, 반복으로 이터레이션은 반복 처리를 나타내며 이를 위한 프로토콜(protocol)을 가지고 있습니다.
프로토콜은 통신에 있어 약속된 기준과 방법으로 데이터를 송, 수신하는 것을 의미하는 것으로 즉 통신 프로토콜은 통신 규약입니다. ES6에서의 프로토콜 역시 규약입니다. 이터레이션을 위한 규약이 있으며 이를 지켜야 반복 처리를 할 수 있습니다.
이터레이션 프로토콜은 이터러블(Iterable) 프로토콜과 이터레이터(Iterator) 프로토콜로 구성 됩니다.


4.2 이터러블 프로토콜


이터러블 프로토콜은 오브젝트의 반복 처리 규약을 정의 합니다. 빌트인 String, Array, Map, Set, TypedArray, Argument 오브젝트는 디폴트로 이터러블 프로토콜을 가지고 있으며 DOM의 NodeList도 가지고 있습니다.
위의 오브젝트는 JS 엔진이 랜더링될 때 이터러블 프로토콜이 설정되어 사전 처리를 하지 않아도 반복 처리를 할 수 있습니다. 이렇게 이터러블 프로토콜이 설정된 오브젝트를 이터러블 오브젝트라고 합니다.

JS는 이터러블 오브젝트에 Symbol.iterator가 있어야 하며 이것이 이터러블 프로토콜 입니다.(즉 Symbol.iterator가 있으면 이터러블 오브젝트) 자체 오브젝트에는 없지만 상속 받은 prototype chain에 있어도 이터러블 오브젝트가 됩니다.

[ 소스 iterator-1 ]

1
2
3
4
5
6
// Array를 생성
let arrayObj = [];
// result에 Array 내부에 존재하는 Symbol.iterator를 대입
let result = arrayObj[Symbol.iterator];

console.log(result);

위 예제는 Array 오브젝트게 Symbol.iterator의 존재 여부를 체크하는 코드 입니다.
빌트인 Array 오브젝트에 Symbol.iterator가 설정되어 있으므로 함수 코드를 출력하게 됩니다.
(Symbol은 일반적인 객체 표기식과 다르게 대괄호 안에 작성해야 함)

[ 소스 iterator-2 ]

1
2
3
4
5
6
// object를 생성
let objectObj = {};
// result에 object에 내부에 존재할지도 모르는 Symbol.iterator를 대입
let result = objectObj[Symbol.iterator];

console.log(result);

object는 Array와 달리 Symbol.iterator가 존재하지 않으므로 이터러블 오브젝트가 아닙니다.


4.3 이터레이터 오브젝트


이터레이터 프로토콜은 오브젝트의 값을 차례대로 처리할 수 있는 방법을 제공합니다. 이 방법은 오브젝트에 있는 next() 메서드로 구현 합니다. 따라서 오브젝트에 next()메서드가 있으면 이터레이터 프로토콜이 적용된 것 입니다.

JS에서 {key: value}형태의 Object는 작성한 순서대로 열거되는 것을 보장하지 않습니다. 이는 Object 오브젝트에 next()가 없다는 의미이기도 합니다. (Object 오브젝트에서 key, value가 순서대로 열거되는 Map 오브젝트를 제공 함, 이후 나오는 Map 오브젝트 참고)

지금까지의 내용을 정리하면 이터러블 오브젝트는 방복 가능한 오브젝트를 나타내고 이터레이터 프로토콜은 이터러블 오브젝트의 값을 작성한 순서대로 처리하는 규약을 말합니다.

[ 소스 iterator-3 ]

1
2
3
4
5
6
7
8
9
10
11
12
// Array를 생성
let arrayObj = [1,2];
// iteratorObj에 Array의 Symbol.iterator 메서드를 대입
let iteratorObj = arrayObj[Symbol.iterator]();

//iteratorObj의 데이터형 출력(Symbol.iterator의 존재를 확인하기 위함)
console.log('1:', typeof iteratorObj);

// iteratorObj의 값을 next()메서드를 사용하여 순서대로 출력
console.log('2:', iteratorObj.next());
console.log('3:', iteratorObj.next());
console.log('4:', iteratorObj.next());

위 코드와 같이 이터레이터를 사용하여 이터러블 오브젝트의 값을 작성한 순서대로 하나씩 읽을 수 있습니다.


요약


Iterator

  • 이터러블 프로토콜은 오브젝트의 반복 처리 규약을 정의하는 것으로 이터러블 프로토콜이 존재해야 이터레이터 프로토콜을 사용하여 값을 차례대로 처리할 수 있게 됨
  • 이터레이터 프로토콜은 오브젝트의 값을 차례대로 처리할 수 있는 방법을 제공
  • String, Array, Map, Set, TypedArray, Argument 오브젝트와 DOM의 NodeList는 는 디폴트로 이터러블 프로토콜을 가지고 있음
  • {key: value}형태의 Object는 이터러블 프로토콜을 가지고 있지 않지만 Map 오브젝트를 통해 순서대로 열거할 수 있음