이터레이터는 왜 사용하는 것이지?

(개발자의 글임을 양해 부탁드립니다. 오타가 많습니다)

 

유인동님의 강의를 들으면서 공부하면서 의구심이 들기 시작했다.

과연 우리 사이트에서도 제너레이터와 이터레이터를 사용할 수 있는 것인가?

 

#이터러블/이터레이터 프로토콜

 

처음에 이터러블, 이터레이터... 등등 용어가 헷갈렸다.

 

ES6에서 도입된 이터레이션 프로토콜(iteration protocol)은 데이터 컬렉션을 순회하기 위한 프로토콜(미리 약속된 규칙)이다. 이터레이션 프로토콜을 준수한 객체는 for…of 문으로 순회할 수 있고 Spread 문법의 피연산자가 될 수 있다.

 

이러한 이터레이션 프로토콜을 지키는 객체를 이터러블이라고 한다. [Symbol.iterator] 메소드를 가지고 있으면 이터러블로 볼 수 있는 것이다.

 

이터레이터는 이터러블 객체의 [Symbol.iterator] 메소드를 호출하여 생성된 객체를 일컫는다. value, done 프로퍼티를 갖고있다.

 

보통 배열은 Symbol.iterator 메소드를 가지고 있다.

function isIterable (value) {
  return Symbol.iterator in Object(value);
}

const a = [1, 2, 3];
isIterable(a);

//true

배열은 Symbol.iterator 메소드를 가지고 있으므로 이터러블 프로토콜을 준수한 이터러블이라고 할 수 있다.

 

그럼 객체는?

 

function isIterable (value) {
  return Symbol.iterator in Object(value);
}

const a = { 'a' : 1, 'b' : 2, 'c' : 3};
isIterable(a);

//false

객체는 이터러블이 아니다.

 

그러나 사용자 정의를 통하여 이터러블화? 할 수 있다.

 

const iterableMake = obj => {
    let keys = Object.keys(obj);
    let index = 0;
    return {
            [Symbol.iterator]() {
            return {
                next () {
                    return index < keys.length ? {value : obj[keys[index++]], done : false } : {done : true}
                },
                [Symbol.iterator]() {
                    return this;
                }
            }
        }
    }
}

const a = {name : 'pengsu', age : '10', species : 'penguin'};

const b = iterableMake(a)[Symbol.iterator]();
console.log(b.next());
console.log(b.next());
console.log(b.next());