[JS Deep Dive] 34장 - 이터러블

1. 이터레이션 프로토콜

-순회 가능한 데이터 컬렉션(자료구조) 를 만들기 위해 ECMASCript 사양에 정의하여 미리 약속한 규칙이다. 

순회 가능한 데이터 컬렉션을 통일하여 for - of 문, 스프레드 문법, 배열 할당의 대상으로 사용할 수 있게 일원화했다. 

 

(1) 이터러블 프로토콜

for- of 문으로 순회할 수 있으며 스프레드 문법과 배열할당의 대상으로 사용할 수 있다. 

 

(2) 이터레이터 프로토콜

이터러블의 Symbol, iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터 반환함

next 메서드를 소유하며 value done 프로터리를 갖는 이터레이터 리절트 객체 반환

 

2. 이터러블이란 ?

이터러블 프로토콜을 준수한 객체

-Symbol.iterator 을 프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체를 말한다. 

-즉 이 메서드를 직접 구현하지 않거나 상속받지 않은 일반 객체는 이터러블 프로토콜을 준수한 이터러블이 아니기 때문ㅇ네 

for - of 로 순회할 수 없으며 스프레드 문법과 배열 디스트럭처링 할당의 대상으로 사용할 수 없다. 

 

(단, TC39 프로세스의 stage 4 단계에 제안되어있는 스프레드 프로퍼티 제안은 일반 객체에 스프레드 문법의 사용을 허용한다. )

 

3. 이터레이터

---

이터레이터는 이터러블의 요소를 탐색하기 위한 포인터 역할

---

symbol.iterator 메서드를 호출하면 이터레이터 프로토콜을 준수한 이터레이터를 반환한다. 

이터러블의 symboliterator 메서드가 반환한 이터레이터는 next 메서드를 가진다.

const array = [1,2,3];

//이터레이터 반환
const iterator = array[Symbol.iterator]();

//이 이터레이터는 next 메서드 가진다. 
console.log('next' in iterator);
//true

 

next 메서드는 이터러블의 각 요소를 순회하기 위한 포인터의 역할을 한다. 
즉 next 메서드를 호출하면 이터러블을 순차적으로 한 단계씩 순회하며 순회 결과를 나타내는 이터레이터 리절트 객체를 반환한다. 

value 프로퍼티는 현재 순회중인 이터러블의 값을 나타내고
done 프로퍼티는 순회완료 여부를 나타낸다. 

 

4. 빌트인 이터러블

 

5. for - of 문

=이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다. 

즉 내부적으로 이터레이터의 next 메서드를 호출하여 이터러블을 순회하며 

next 메서드가 반환한 이터레이터 리절트 객체의 v alue 프로퍼티 값을 for - of 변수에 할당한다. 

 

그리고 done 프로퍼티 값이 false 이면 순회를 계속하고 ture 이면 순회를 중단한다.

//for-in 과 매우 유사
for (변수선언문 of 이터러블) {...}

for (변수선언문 in 객체) {...}
//체인 상에 존재하는 모든 프로토타입의 프로퍼티 중 [[enumberable]] 값이 true 인 프로퍼티를 순회하며 열거

 

6. 이터러블과 유사배열 객체

마치! 배열처럼 인덱스로 프로터피값에 접근 o, 

length 프로퍼티를 갖는 객체를 말한다. 

유사배열 객체는 Length 프로퍼티를 가지기 때문에 for 문으로 순회할 수 있고 인덱스를 나타내는 숫자형식의 문자열을 프로퍼티로 가지기 때문에 배열처럼 인덱스로 프로퍼티 값에 접근할 수 있다. 

 

const arrayLike= {
	0:1,
    1:2,
    length:2
};

//유사배열 객체는 length 프로퍼티를 가지기 때문에 for 문으로 순회가능

for (let i = 0; i < arraylike.length;i++) {
	console.log(arrayLike[i]);
    //1 2
}

 

하지만 ! 

유사배열객체는 이터러블이 아니라 일반 객체이기 대문에 Symbol.iterator 메서드가 없기 때문에 for- of 로 순회할 수 없다. 

근데 또 arguments, NodeList, HTMLCollection 은 ES6에서 이터러블이 도입되면서 유사배열객체이면서 이터러블임...