34 이터러블

 

34 이터러블

 

34.1 이터레이션 프로토콜

 

es6에서 도입된 프로토콜은 순회 가능한 데이터 컬렉션을 만들기 위해 

Ecma에서 정의하여 약속한 규칙

 

Es6 에서는 순회 가능한 데이터 컬렉션을 이터레이션 프로토콜을 준수하는 이터러블로 통일하여 for … of문 스프레드 문법, 배열 디스트럭처링 할당의 대상으로 사용할 수 있도록 일원화 하였음.

 

이터러블 프로토콜 

symbol.iterator프로퍼티 키로 사용한 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속 받은 메서드를 호출하여 반환 하게 된다 

 

Symbol.iterator 메서드를 직접구현하지 않거나, 상속 받지 않은 일반 객체는 이터러블 프로토콜을 준수한 이터러블이 아니다. 따라서 일반 객체는 for… of로 순회하지 못한다.

우리가 객체를 순회하고자 할 떄 를 생각해보면 편할 듯 하다 .

 

symbol.iterator 메서드가 반환한 이터레이터는 next 메서드를 가지고 이를 통해 

다음 이터레이터에 접근 가능하다 .

 

빌트인 이터러블

 

Array 

String 

Map

Set

TypedArray

Arguments

DOM 컬렉션 .

 

위와 같이 7가지가 빌트인 이터러블 이라고 할 수 있다.

 

34.3 for … of 문

 

For …of문은 이터러블을 순회하면서 이터러블의 요소를 변수에 할당한다. 

 

For .. in 메서드와 매우 유사한 형식을 띄고 있다. 

이때 Enumerable 옵션이 true인 경우를 순회하면서 열거한다. 

 

34.4 이터러블과 유사 배열 객체 

 

유사배열 객체는 이터러블이 아닌 일반 객체 임으로 for of 를 사용할 수 없다.

 

34.5 이터레이션 프로토콜의 필요성

다양한 데이터 공급자가 하나의 순회 방식을 갖도록 규정함으로 효율적으로 다양한 데이터 공급자를

사용 할 수 있다. 따라서 위와 같은 친구들이 하나의 인터페이스로 동작을 함으로 

효율 적으로 사용 가능하다 .

 

34.6 사용자 정의 이터러블

 

이터레이션 프로토콜을 준수하지 않는 일반 객체도 이터레이션 프로토콜을 준수하도록 구현하면

For of 를 사용할 수 있다.

const fibo = {
	[Symbol.iterator]() {
		let [pre, cur] = [0, 1];
		const max = 10;

		return {
			next() {
            	[pre, cur] = [cur, pre + cur];
				return { value : cur, done : cur >= max};
			}
		};
	}
};

 

34.6.2 이터러블을 생성하는 함수

 

const fibonacciFunc = function (max) {
	let [pre, cur] = [0, 1];
    
    return {
    	[Symbol.iterator]() {
        	next() {
            	[pre, cur] = [cur, cur + pre];
                return {value : cur, done : cur >= max);
            }
        }
    };
}

for (const num of fibonacciFunc(10)) {
	console.log(num);
}

와 같이 수정할 수 있도록 사용할 수 있다.

 

34.6.3 이터러블이면서 이터레이터인 객체를 생성하는 함수 .

 

const iterable = fibonacciFunc(5);
const iterator = iterable[Symbol.iterator]();

위와 같은 코드를 말하는데 이터러블 이면서 이터레이터를 반환하는 객체 라고 할 수 있다.

 

const fibonacciFunc = function (max) {
	let [pre, cur] = [0, 1];
	return {
		[Symbol.iterator]() {return this;},
		next () {
			[pre, cur] = [cur, pre + cur];
			return {value : cur, done : cur >= max};
        }
    };
};

let iter = fibonacciFunc(10);
for (const num of iter) {
	console.log(num);
}

무한 이터러블은 여기서 max를 생략하고 done을 끝내지 않는다면 된다.

위를 이용하면 무한 스크롤 등을 구현 할 수 있을것 같다. 나중에 기회가 된다면 해보도록 하겠다.