🦎[딥다이브 스터디] 46장. 제너레이터와 async/await

1. 제너레이터 함수가 실행될 때 반환하는 제너레이터 객체가 갖는 메서드와 메서드의 동작을 각각 설명해보시오.

제너레이터 함수가 호출되면 제너레이터 객체가 생성된다. 이는 symbol.iterator 메서드를 상속 받는 이터러블이면서, 동시에 next 메서드를 갖는 이터레이터이다.

그러나 이터레이터에는 없는 return, throw 의 메서드를 추가로 갖는다.

1. next 를 호출하면, yield 표현식까지 코드블록을 실행하고 yield된 값을 value프로퍼티 값으로, false를 done 프로퍼티 값으로 갖는 이터레이터 리절트 객체를 반환한다.

2. return 메서드를 호출하면 인수로 전달받은 값을 value프로퍼티 값으로, true 를 done 프로퍼티 값으로 갖는 이터레이터 리절트 객체를 반환한다.

3. throw 메서드를 호출하면 인수로 전달받은 에러를 발생시키고, undefined 를 value 프로퍼티 값으로, true 를 done 프로퍼티 값으로 갖는 이터레이터 리절트 객체를 반환한다.

2. 아래의 제너레이터 함수를 실행했을 때 각 콘솔이 출력하는 값은 무엇일지 설명해보시오.

function* getFunc() {
  try { 
    yield 1;
    yield 2;
  } catch(e) {
    console.error(e);
  }
}
const generator = getFunc();
console.log(generator.next()); {value:1 , done: false}
console.log(generator.next()); {value:2,  done: false}
//console.log(generator.next()); {value:undefined,  done: true}
console.log(generator.throw('Error!')); {value:"Error", done: true} 

3. 제너레이터 함수란 무엇이며 일반 함수와의 차이는 무엇인지 특징을 설명해보시오.

1. 제너레이터 함수는 함수 호출자에 실행 제어권을 양도할 수 있다. 일반함수는 함수호출 이후 함수실행을 제어할 수 없지만 제너레이터 함수는 가능하다. 즉 일시 중지하거나 재개 시킬 수 있음.
2. 제너레이터 함수는 함수호출자와 함수의 상태를 주고 받을 수 있음. 일반함수는 함수가 실행되는 동안에 함수 외부에서 내부로 값을 전달하여 상태를 변경시킬 수 없지만 제너레이터는 호출자와 양방향으로 상태를 주고 받을 수 있음.
3. 제너레이터 함수를 호출하면 코드를 실행하여 어떤 값을 반환하는것이 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환한다.

1. 아래의 제너레이터 함수를 실행했을 때 각 콘솔이 출력하는 값은 무엇일지 설명해보시오.

function* getFunc(){

const x = yield 1;
const y = yield (x+10);

return (x+y)*x;
}

const generator = getFunc();

let res = generator.next();

1. console.log(res);  // {value: 1, done: false}

res = generator.next(100);

2. console.log(res); // {value: 110, done: false}

res = generator.next(30);

3. console.log(res); // {value: 13000, done: true}

//generator의 내부 변수인 x는 첫번째 next() 실행시에 yield 값을 반환한다.
//두번째 next() 실행시 전달된 인자가 x의 값으로 정의된다.

2. 제너레이터를 사용하여 다음 함수를 간단히 이터러블로 구현해보자!

const infiniteFibonacci = (function() {
	let [pre,cur] = [0,1];

	return {
		[Symbol.iterator]() { return this; },
		next() {
		[pre,cur] = [cur,pre+cur];
		return {value: cur};
		}
	};
}());

//infiniteFibonachi 는 무한 이터러블이다. 
for (const num of infiniteFibonacci) {
	if(num > 10000) break;
	console.log(num);
}

//제너레이터로 구현
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);
}

3. 함수의 실행결과 console에 나타나는 값은 ? async 함수는 무엇을 반환하는가?

async function a(n) {return n*n};
a(10).then(res=>console.log(res)); //100

class MyClass{
	async bar(n) {return n}
}

const myClass = new MyClass();
myClass.bar(10).then(res=>console.log(res)); //10

//각각의 async 키워드로 인해 비동기 함수처럼 동작한다.
//함수의 실행 결과로 함수는 반환값을 resolve하는 프로미스를 반환하고
//then 메서드의 첫번째 인자로 넘겨진 콜백이 실행된다.

4. 출력되는 res 값과, 출력때까지 소요되는 총 시간은?

async function foo() {
//화면에 한번에 받아올 때! 
	const res = await Promise.all([
		new Promise(res=>setTimeout(()=>res(1),3000)),
		new Promise(res=>setTimeout(()=>res(2),2000)),
		new Promise(res=>setTimeout(()=>res(3),1000)),
	]);
	console.log(res);
}

foo(); //[1, 2, 3] 약 3초 정도 걸린다.

//Promise.all 키워드를 사용할 경우, 모든 비동기 함수가 병렬적으로 실행된다.
//처리시간이 가장 오래 걸리는 비동기 처리 함수의 수행시간이 전체 비동기 처리의 시간과 비슷하다.
//모든 처리가 끝난후에는 처음에 담긴 순서대로 실행된 결과값을 배열에 담아 반환한다.

5. 다음 예제에서 에러를 캐치하지 못하는 이유를 호출자 키워드를 사용하여 설명해보시오.

try {
	setTimeout(()=>{throw new Error("err!")}, 1000);
} catch(e){
	console.error('err', e);
}

async function a() {

	try{
		const url ="https://";
		const res = await fetch(url)
		const data = await res.json()
		console.log(data);
}
	catch(err){
		console.error(err);
}

}

a();

//setTimeout 함수는 비동기 함수로 함수는 실행되는 순간 콜스택에서 제거된다.
//이때 이 함수가 인자로 전달한 콜백함수는 브라우저가 이벤트를 위임받아 실행한다.
//함수의 반환값인 에러는 상위 호출자를 찾아 전달된다.
//콜스택에는 해당 에러의 호출자로 예상되는 주체가 없어 try catch문이 정상적으로 실행되지 않는다.
//결국, 에러가 발생한 것을 catch하지 못하는 side effect이 발생된다.
//실제 실행하면 error: message: "Uncaught Error: err!"가 찍힘