[모던 자바스크립트 딥다이브] 46장 제너레이터와 async/await

제너레이터

• 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수
• 특징
  • 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있음
  • 제너레이터 함수는 함수 호출자와 함수 상태를 양뱡향으로 주고받을 수 있음
  • 제너레이터 함수를 호출하면 제너레이터 객체를 반환함 => 제너레이터 함수를 호출하면 함수 코드를 실행하는 것이 아니라 이터러블 이면서 동시에 이터레이터인 제너레이터 객체를 반환함

 

 

제너레이터 함수의 정의

• function* 키워드로 선언
• 하나 이상의 yield 표현식을 포함
• 화살표 함수로 정의 불가, new 연산자와 함께 생성자 함수로 호출 불가

// 제너레이터 함수 선언문
fuction* genDecFunc() {
	yield 1;
}

// 제너레이터 함수 표현식
const getExpFunc = function* () {
	yield 1;
}

// 제너레이터 메서드
const obj = {
	* genObjMethod() {
    	yield 1;
    }
}

// 제러레이터 클래스 메서드
class MyClass {
	* genClsMethod() {
    	yield 1;
    }
}

 

 

제너레이터 객체

• 제너레이터 객체는 Symbol.iterator 메서드를 상속받는 이터러블이면서 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환하는 next 메서드를 소유하는 이터러블
• 제너레이터 객체 메서드
  • next : 제너레이터 함수의 yield 표현식까지 코드 블록을 실행하고 yield된 값을 value 프로퍼티 값으로, false를 done 프로퍼티 값으로 갖는 이터레이터 리절트 객체를 반환함
  • return : 인수로 전달받은 값을 value 프로퍼티 값으로, true를 done 프로퍼티 값으로 갖는 이터레이터 리절트 객체를 반환함
  • throw : 인수로 전달받은 에러를 발생시키고 undefined를 value 프로퍼티 값으로, true를 done 프로퍼티 값으로 갖는 이터레이터 리절트 객체를 반환함

fuction* genFunc() {
	try {
    	yield 1;
        yield 2;
        yield 3;
    }
    catch (e) {
    	console.error(e);
    }
}

const gen = genFunc();

console.log(gen.next()); // {value : 1 , done : false}
console.log(gen.return('End!')); // {value : "End!", done : true}
console.log(gen.thorw('Error!)); // {value : undefined, done : true}

 

 

제너레이터의 일시 중지와 재개

• 제너레이터는 yield 키워드와 next 메서드를 통해 실행을 일시 중지했다가 필요한 시점에 다시 재개할 수 있음
• yield 키워드는 제너레이터 함수의 실행을 일시 중지시키거나 yield 키워드 뒤에 오는 표현식의 평가 결과를 제너레이터 함수 호출자에게 반환함
• 제너레이터 객체의 next 메서드를 호출하면 yield 표현식까지 실행되고 일시 중지됨. 이 때 함수의 제어권이 호출자로 양도됨
• 함수 호출자는 next 메서드를 통해 yield 표현식까지 함수를 실행시켜 제너레이터 객체가 관리하는 상태를 꺼내올 수 있고, next 메서드에 인수를 전달해 제너레이터 객체에 상태를 밀어넣을 수 있음
• 따라서 제너레이터의 특성을 활용해 비동기 처리를 동기 처리처럼 구현 가능함

fuction* genFunc() {
	try {
    	yield 1;
        yield 2;
        yield 3;
    }
    catch (e) {
    	console.error(e);
    }
}

const gen = genFunc();

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

 

 

 

제너레이터의 활용

• 이터러블의 구현

const infiniteFibonacci = (function* () {
	let [pre, cur] = [0,1];
    
    while(true) {
    	[pre, cur] = [cur, pre+cur];
        yield cur;
    }
}());

for(const num of infiniteFibonacci) {
	if(num > 10000) break;
    console.log(num);
}

 

• 비동기 처리
  • 프로미스의 후속 처리 메서드 없이 비동기 처리 결과를 반환하도록 구현 가능함

 

async / await

• ES8에서 제너레이터보다 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있음
• 프로미스 기반으로 동작
• 프로미스의 후속 처리 메서드 없이도 마치 동기 처리처럼 프로미스가 처리 결과를 반환하도록 구현할 수 있음

const fetch = require('node-fetch');

async function fetchTodo() {
	const url = '/todos/1';
    
    const response = await fetch(url);
    const todo = await response.json();
    console.log(todo);
}

 

 

 

 

async 함수

• await 키워드는 반드시 async 함수 내부에서 사용해야 함
• async 함수는 async 키워드를 사용해 정의하며 언제나 프로미스를 반환
• 명시적으로 프로미스를 반환하지 않아도 암묵적으로 반환값을 resolve 하는 프로미스를 반환함
• 클래스의 constuctor 메서드는 async 메서드가 될 수 없음 => 인스턴스를 반환하기 때문

 

 

await 키워드

• 프로미스가 settled 상태가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리 결과를 반환함
• await 키워드는 반드시 프로미스 앞에서 사용해야 함
• await 키워드는 다음 실행을 일시 중지시켰다가 프로미스가 settled 상태가 되면 다시 재개함

 

 

에러 처리

• 에러는 호출자 방향, 즉 콜 스택의 아래 방향으로 전파되지만 비동기 함수의 콜백 함수를 호출한 것은 비동기 함수가 아니기 때문에 try - catch 문을 사용해 에러를 캐치할 수 없었음
• async / await 에서는 에러 처리를 try - catch 문을 사용할 수 있음
• 프로미스를 반환하는 비동기 함수를 명시적으로 호출할 수 있기 때문에 호출자가 명확함
• catch문은 HTTP 통신에서 발생한 네트워크 에러뿐 아니라 try 코드 블록 내의 모든 문에서 발생한 일반적인 에러까지 모두 캐치 가능
• async 함수 내에서 catch 문을 사용해 에러 처리를 하지 않으면 async 함수는 발생한 에러를 reject 하는 프로미스를 반환함 => 이후에 후속 처리 메서드인 catch문으로 에러 처리 가능