자바스크립트 이터레이터와 제너레이터

2018-02-26

javascript

1. 이터레이션 프로토콜

1-1. iterable

이터러블은 순회 가능한 자료 구조이다. Symbol.iterator를 key로 사용한 메서드를 구현하는 것에 의해 순회 가능한 자료구조인 이터러블이 된다.

ES6에서 제공하는 빌트인 이터러블은 아래와 같다.

Array: Array.prototype[Symbol.iterator]
String: String.prototype[Symbol.iterator]
Map: Map.prototype[Symbol.iterator]
Set: Set.prototype[Symbol.iterator]
DOM data structures: NodeList.prototype[Symbol.iterator], HTMLCollection.prototype[Symbol.iterator]

1-2. iterator

이터러블의 Symbol.iterator를 key로 사용한 메서드는 이터레이터를 반환한다. 이터레이터는 순회 가능한 자료 구조인 이터러블의 요소를 탐색하기 위한 포인터로써 next() 메서드를 갖는 객체이다. next() 메서드는 value, done 프로퍼티를 갖는 객체를 반환하며, 이 메서드를 통해 이터러블 객체를 순환 할 수 있다.

이터레이션 프로토콜은 이터레이터의 next() 메소드를 통해 다양한 데이터 소스에 순차적으로 접근할 수 있는 일관된 방법을 제시한다.

배열 이터레이션 예제
피보나치수열 예제(커스텀)

1-3. for…of 루프

for…of 루프는 이터러블 객체를 순회한다. for…of 루프는 이터레이터의 next() 메소드를 호출하고, next() 메소드가 반환하는 객체의 done 프로퍼티가 true가 될 때 까지 루핑한다.

2. 제너레이터

제너레이터란 이터레이터를 사용해 자신의 실행을 제어하는 함수.
일반적인 함수는 매개변수를 받고 값을 반환한다. 호출자는 매개변수 외에는 함수의 실행을 제어할 방법이 없으며, 함수를 호출하면 그 함수가 종료될 때까지 제어권을 완전히 넘긴다.
제너레이터는 이와 달리 함수의 실행을 개별적인 단계로 나눔으로써 함수의 실행을 제어하며, 실행 중인 함수와 통신할 수 있다.

2-1. 제너레이터 특징

제너레이터는 언제든 호출자에게 제어권을 넘길(yield) 수 있다
제너레이터는 호출한 즉시 실행되지 않는다. 대신 이터레이터를 반환하고, 이터레이터의 next 메소드를 호출함에 따라 실행된다.
제너레이터를 만들때는 function 키워드 뒤에 애스터리스크(*)를 붙인다.
제너레이터 예제

2-2. yield 표현식과 양방향 통신

yield 표현식을 통해 통신이 이루어진다.
호출자가 제너레이터에 정보를 전달하므로, 제너레이터는 그 정보에 따라 자신의 동작 방식 자체를 바꿀 수 있다.
제너레이터 yield 예제

2-3. 제너레이터와 return

제너레이터에서 return 문을 사용하게 되면 그 위치와 관계없이 done은 true가 되고, value 프로퍼티는 return이 반환하는 값이 된다.
제너레이터에서 반환하는 값을 사용할 때는 yield를 사용하고, return은 제너레이터를 종료하는 목적으로만 사용해야 한다.
따라서 제너레이터에 return을 쓸 때는 반환값을 쓰지 않는 습관을 들여야 한다.
제너레이터 return 예제

 자바스크립트 예외와 에러 처리 자바스크립트 함수와 추상적 사고 