제너레이터와 async/await

목차

1. 제너레이터란?
2. 제너레이터 객체
3. 제너레이터 일시중지와 재개
4. 제너레이터의 비동기 처리
5. async/await

출처

모던 자바스크립트 46강
이터러블 객체
https://yceffort.kr/2021/02/javascript-array-and-iterable

1. 제너레이터란?

정의

ES6에서 도입된 제너레이터(generator)는 코드 불록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수이다.

선언방식

function* generateFunc(){
  yield 1;
  yield 2;
  yield 3;
  
}

위의 예제처럼 function 옆에 *(별표)를 붙여주고 일시중지가 필요한 시점마다 yield를 호출하면 된다.

이때, 제너레이터 함수는 arrow function과 생성자 함수(new)로는 함수를 호출할 수 없다.

---

2. 제너레이터 객체

제너레이터 함수를 호출하면 일반 함수처럼 함수 코드 블록을 실행하는 것이 아니라 제너레이터 객체를 생성해 반환한다. 제너레이터 함수가 반환한 제너레이터 객체는 이터러블(iterable)이면서 이터레이터(iterator)이다.

iterable 이란?

해당 객체 내 요소들을 하나씩 순환하며, 이를 꺼내서 사용(처리) 가능함을 말함

iterable 객체란?

내부에 반복 가능한 요소,기능들을 갖춘 객체
객체 내 값들의 반복 처리 동작의 정의를 허용하는 객체

iterator 객체란?

연속된 반복 값들을 만들어 낼 수 있고,
이들을 하나하나 세밀하게 제어 가능한 방법이 정의된 객체
=> next 메소드를 갖음

3. 제너레이터의 일시 중지

예제 )

function* genFunc(){
  yield 1;
  yield 2;
  yield 3;
}  

// 이때 generator는 next 메서드를 갖는다 (iterable + iterator 객체)
const generator = genFunc();

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

4. 제너레이터의 비동기 작업

제너레이터는 사용자의 임의대로 함수를 일시중지와 재개가 가능하다는 점에서 비동기 작업에 굉장한 이점을 가지고 있다.

5. async/await

제너레이터를 사용해서 비동기 처리를 동기 처리처럼 동작하도록 구현했지만 코드가 무척이나 장황해지고 재귀함수를 쓴다는 것 자체가 굉장히 불편하였다. ES8에서는 제너레이터보다 간단하고 가독성도 좋은 async/await가 도입되었다.

자세한 내용은 내 블로그에 async/await부분에서 더 자세히 다룰 것이다.