제너레이터
- ES6에서 도입
- 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 특수한 함수
- 함수 호출자에게 함수 실행의 제어권 양도 가능
- 함수 호출자와 함수 상태 주고받기 가능
- 함수 호출 시, 함수 코드 블록 실행이 아닌 이터러블이면서 동시에 이터레이터인 제너레이터 객체 반환
제너레이터 정의
function*키워드로 선언- 하나 이상의
yield표현식 포함 - 화살표 함수로 정의할 수 없음
- new 연산자와 함께 생성자 함수로 호출 불가
function* genDecFunc() {
yield 1;
}제너레이터 객체
- (
Symbol.iterator메서드를 상속받는)이터러블이면서 동시에 (next메서드를 소유하는)이터레이터 - 이터레이터에는 없는
return,throw메서드를 가짐
메서드
1. next
- yield 표현식까지 코드 블록을 실행
- { value: yield된 값, done: false } 이터레이터 리절트 객체 반환
2. return
- { value: 인수로 전달 받은 값, done: true } 이터레이터 리절트 객체 반환
3. throw
- 인수로 전달받은 에러를 발생 시킴
- { value: undefined, done: true } 이터레이터 리절트 객체 반환
제너레이터의 일시 중지와 재개
next메서드 호출 시, 제너레이터 함수의 코드 블록 실행
- 모든 코드 블록 일괄 실행이 아닌,yield표현식까지만 실행yield키워드
- 제너레이터 함수의 실행을 일시 중지
- 키워드 뒤에 오는 표현식의 평과 결과를 호출자에게 반환
function* genFunc() {
yield 1;
yield 2;
yield 3;
}
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}- (이터레이터의
next메서드와 달리) 인수 전달 가능
- 전달된 인수는 제너레이터 함수의 yield 표현식을 할당받는 변수에 할당
제너레이터 활용
1. 이터러블의 구현
2. 비동기 처리
async/await
- ES8에서 도입
- 제너레이터보다 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 동작하도록 구현 가능
- 프로미스를 기반으로 동작
- 프로미스의 후속 처리 메서드 없이 동기 처리처럼 구현 가능
async 함수
async키워드를 사용해 정의- 항상 프로미스 반환
await 키워드
- async 함수 내부에서만 사용 가능
- 프로미스가 settled 상태가 되면 프로미스가 resolve한 처리 결과 반환
- 반드시 프로미스 앞에서 사용
에러 처리
try...catch구문 사용 가능- 프로미스를 반환하는 비동기 함수는 명시적으로 호출할 수 있기에 호출자가 명확
junior backend-developer 👶💻