[JavaScript] ES6에서의 순회와 이터러블

1. ES6에서의 리스트 순회 

우리가 일반적으로 사용하는 리스트의 순회는 for( let i = 0; 1 < 10; i++) 방식이다. 

const list = [1, 2, 3];

for(let i = 0; i < list.length; i++) {
	console.log(list[i]);
}

 

ES6에 오면서 새로운 방식의 리스트 순회가 생겼다. 

const list = [1, 2, 3];

for(const a of list) {
	console.log(a);   
}

for of 방식으로 내부 데이터를 쉽게 조회하는 방법이 생겼다. 

 

2. 이터러블/이터레이터 프로토콜

이터러블 프로토콜은 ES6에서 도입된 것으로 순회 가능한 객체를 나타내는 프로토콜이다. 

for of 반복문, ... 전개 연산자, 구조 분해 등과 같이 함께 동작할 수 있도록한 프로토콜이다. 

 

• 이터러블 : 이터레이터를 리턴하는 [Symbol.iterator]()를 가진 값
• 이터레이터 : { value, done } 객체를 리턴하는 next()를 가진 값
• 이터러블/이터레이터 프로토콜 : 이터러블을 for of, 전개 연산자 등과 함께 동작 가능하도록한 규약

배열이 for of 순회가 가능한 이유는 이터러블이기 때문이다. 

배열 내부에 Symbol(Symbol.iterator): f value()를 확인하므로, 배열은 Symbol.iterator 이라는 키값의 메서드를 가진

객체에 부합하는 것을 확인할 수 있다. 

list[Symbol.iterator] = null 을 통해 배열이 더이상 이터러블이 아니게 되므로 

for of에 사용했을 때 더이상 이터러블이 아니라는 오류를 만나게 된다. 

const list = [1, 2, 3];
const listIter = list[Symbol.iterator]();

console.log(listIter.next()); // {value: 1, done: false}
console.log(listIter.next()); // {value: 2, done: false}
console.log(listIter.next()); // {value: 3, done: false}
console.log(listIter.next()); // {value: undefined, done: true}

list[Symbol.iterator]는 이터레이터를 반환하는 함수이다. 

 

그렇기때문에 next() 메서드를 사용했을 때 { value, done } 객체가 반환되는 것을 볼 수 있다. 

이때, value에 값이 있으면 done은 false를 가지고 값이 없는 순회 불가능한 상황에는 done이 true를 가진다. 

 

3. 사용자 정의 이터러블

이터러블 프로토콜을 따라 순회 동작을 사용자가 정의할 수 있다는 점이 이터러블을 활용하는데 중요한 의미가 있다. 

const iterable = {
    [Symbol.iterator]() {
    	let i = 3;
        return {
        	next() {
            	return i === 0 ? 
                { value : undefined, done : true } 
                 : 
                { value : i--, done : false };
            },
            [Symbol.iterator]() { return this; }
        }
    }
}

let iter = iterable[Symbol.iterator]();

iter.next();

for(const a of iter) console.log(a);  // 2  1