제너레이터

일단 제너레이터에 대해 알아보자. 

1. 제너레이터란?

코드 블록의 실행을 일시중지했다가 필요한 시점에 재개할 수 있는 특수한 함수. 

특징

1) 제너레이터 함수는 함수 호출자에게 함수 실행의 제어권을 양도할 수 있다. 

2) 제이레이터 함수는 함수 호출자와 함수의 상태를 주고받을 수 있다. 함수가 실행되면 제어건이 뺏겨 버리는데 generator함수는 next()를 이용해서 한줄한줄 제어할 수 있다. 

3) 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다. - 일반함수는 코드를 실행하고 값을 return하지만 제너레이터함수는 함수코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환한다.

4)제너레이터 함수는 화살표 함수로 정의할 수 없고 new 연산자와 함께 생성자 함수로 호출할 수 없다.

 

2. 제너레이터 선언

function* 키워드로 선언한다. 그리고 하나 이상의 yield표현식을 포함한다. 

 

예제)

function* generatorFunc(){
	yield 1;
	yield 2;
	yield 3;
	return 4;
}

const generator = generatorFunc();

console.log(generator) //Object [Generator] {} 제너레이터객체이다. yield뒤에 값이 리턴된다 
console.log(Symbol.iterator in generator) //true
console.log('next' in generator) //true

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: 4, done: true }

 

예제2) 유념 : yield가 있는 곳에서 멈춘다더라! (양방향 소통이 가능하다)

function* testGenerator() {
	const x = yield 1;
	const y = yield x + 10;
	return x + y;
}

const gen = testGenerator();

let resultObj = gen.next();
console.log(resultObj);

resultObj = gen.next(10);
console.log(resultObj);

resultObj = gen.next(20);
console.log(resultObj);

1. yield를 만나면 딱 그전까지 실행이 된다. 그러므로 const x = 여기까지 실행이 된 상태

2. resultObj = gen.next(10)에서 next를 이제 만나서 const x에 1이 들어가게 되었다. 그런데 next괄호 안에 10이 있으므로 x에 10이 할당된다. 

3. 또 yield가 있으니까 const y = 에서 멈춤. y에 10+10의 값을 리턴해주었음. 아직안끝남. 

4. gen.next(20)에서 20을 y에다가 줬다. 

5. 30이 리턴됨. 끝남. 

 

예제3) for문도 멈춘다!

function* evenGenerator() {
	const max = 5;
	for (let i = 0; i < max; ) {
		yield i++ * 2;
	}
}

const evenNum = evenGenerator();
console.log(evenNum.next());
console.log(evenNum.next());
//console.log(evenNum.return());
console.log(evenNum.next());
console.log(evenNum.next());
console.log(evenNum.next());

 

 

이제 async/await에 대해서 알아보자.  

- Promise를 활용한 비동기 코드를 간결하게 작성하는 문법

- awiat키워드는 반드시 async함수 안에서 사용해야 한다. 

- async로 선언된 함수는 반드시 Promise를 리턴한다. 

 

 

형태 

async함수는 function키워드 앞에 async를 붙여서 만든다. 

async함수 내부에 awiat키워드를 사용한다. 

fetchData, fetchUser는 Promise를 리턴하는 함수이다. 

await키워드는 then체인을 연결한 것처럼 순서대로 동작한다. 

그렇다면 에러처리는 어떻게 할까?

try-catch구문을 사용한다.