모던 자바스크립트 Deep Dive - 46. 제너레이터와 async/await

46.1. 제너레이터란?

• 제너레이터(generator): ES6 도입
  • 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수
• 일반 함수와의 차이점
  • 함수 호출자에게 함수 실행의 제어권 양도 가능
    • 코드를 일괄 실행하는 일반 함수와 달리 함수 실행 후에도 일시 중지하거나 재개할 수 있음
    • 함수 제어권을 호출자에게 양도(yield) 가능
  • 함수 호출자와 함수 상태를 주고받을 수 있음
    • 함수 호출자와 양뱡향으로 함수 상태를 주고 받을 수 있음
  • 제너레이터 객체 반환
    • 제너레이터 함수는 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환함

46.2. 제너레이터 함수 정의

• function* 키워드 선언
• 하나 이상의 yield 표현식 포함
• 애스터리스크(*) 위치: function 키워드와 함수 이름 사이면 무관
  • 일관성을 위해 function 키워드 바로 뒤 권장
• 화살표 함수, new 연산자 생성자 함수 불가

46.3. 제너레이터 객체

• 제너레이터 객체: 이터러블이면서 동시에 이터레이터
• 이터레이터에 없는 return, throw 메서드 가짐
  • next : yield 표현식까지 코드 실행 후 이터레이터 리절트 객체 반환
    • { value: yield, done: true/false }
  • return : 전달 받은 인수를 갖는 이터레이터 리절트 객체 반환
    • { value: param, done: true }
  • throw : 전달 받은 인수로 에러를 발생시키고 이터레이터 리절트 객체 반환
    • { value: undefined, done: true }

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

• yield 키워드는 제너레이터 함수의 실행을 일시 중지시키고, 표현식의 평가 결과를 제너레이터 함수 호출자에게 반환함
• next 메서드를 통해 일시 중지 및 재개 가능
  • 인수 전달 가능 -> yield 표현식을 할당 받는 변수에 인수가 할당됨
  • generator.next() > yield > generator.next() > yield > return
• 함수 호출자와 함수의 상태를 주고 받을 수 있음
  • 비동기 처리를 동기 처리처럼 구현 가능

46.5. 제너레이터 활용

46.5.1. 이터러블의 구현

• 이터레이션 프로토콜을 준수하여 간단하게 이터러블 구현 가능
• cf. 무한 피보나치 수열 생성 함수

46.5.2. 비동기 처리

• 함수 호출자와 함수의 상태를 주고받을 수 있어 비동기 처리 결과를 동기 처리처럼 구현 가능
• async / await 또는 co 라이브러리 권장

46.6. async/await

46.6.1. async 함수

• async 함수 내부에서 await 사용 가능
• 언제나 프로미스 반환
  • 명시적으로 반환하지 않더라도 암묵적으로 반환값을 resolve하는 프로미스 반환
• 클래스의 constructor 메서드는 인스턴스를 반환해야 하므로 불가

46.6.2. await 키워드

• 프로미스 settled 상태까지 대기하다가 resolve 처리 결과 반환
• 반드시 프로미스 앞에서 사용해야 함
• 처리 순서 보장이 필요한 경우 모든 프로미스에 await 키워드 사용해야 함

46.6.3. 에러 처리

• asynce/await은 try ... catch문 사용 가능
• HTTP 네트워크 통신 에러뿐만 아니라 try 코드 블록 내의 모든 에러 캐치
• 발생한 에러를 reject 하는 프로미스 반환
• .then 후속 처리 메서드로도 가능

[출처] 모던 자바스크립트, Deep Dive