제너레이터와 async / awit

제너레이터란...?

ES6에서 도입된 제너레이터는 코드 블록의 실행을 일시 중지했다가 필요한 시점에 재개할 수 있는 함수이다. 일반 함수와는 차이가 다음과 같다.

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

   일반 함수를 호출하면 제어권을 함수에게 주기 때문에 코드를 일괄 실행하지만 제너레이터는 제어권을 호출자에게 주기 때문에 함수 실행을 일시 중지하거나 재개할수있다.

2. 제너레이터 함수는 함수 호출자와 함수의 상태를 주고 받을 수 있다.

   일반 함수가 실행되고 있는 동안 함수 외부에서 내부로 값을 전달하여 함수의 상태 변경할 수 없으나 제러네이터 함수는 함수 호출자에게 상태를 전달할 수 있고 함수 호출자로부터 상태를 전달받을 수 있다.

3. 제너레이터 함수를 호출하면 제어레이터 객체를 반환한다.

   제너레이터 함수를 호출하면 함수 코드를 실행하는 것이 아니라 이터러블이면서 동시에 이터레이터인 제너레이터 객체를 반환한다.

이터레이터란 {value, done} 객체를 반환하는 next()를 가진 값을 말한다.
이터러블이란 자료를 반복할 수 있는 객체를 말하는 것이다. 우리가 흔히 쓰는 배열 역시 이터러블 객체이다. 즉, 이터레이터를 반환하는 [Symbol.iterator]()를 가진 값을 말한다.

제너레이터 함수의 정의

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

function* genDecFunc()  {
  yeild 1;
}

const genDecFunc = function* () {
  yeild 1;
}

제너레이터 함수는 함수 선언문, 표현식, 메서드, 클래스 메서드 등 다양하게 정의할 수 있지만 화살표 함수 통해서는 정의할 수 없다. 또한 제너레이터 함수는 new키워드와 함께 생성자 함수로서 호출할 수 없다.

제너레이터 객체

위에서 말했듯이..

제너레이터 함수를 호출하면 일반 함수처럼 함수 코드 블록을 실행하는 것이 아니라 제너레이터 객체를 생성해 반환한다.
제너레이터 함수가 반환한 제너레이터 객체는 이터러블이면서 동시에 이터레이터다.
다시 말해, 제너레이터 객체는 Symbol.iterator 메서드를 상속받는 이터블이면서 value, done 프로퍼티를 갖는 이터레이터 리절트 객체를 반환하는 next 메서드를 소유하는 이터레이터다.

// 제너레이터 함수
function* getFunc() {
	yield 1;
  	yield 2;
  	yield 3;
	} catch (e) {
	console.error(e);
	}
}

// 제너레이터 함수를 호출하면 제너레이터 객체를 반환한다.
const generator = getnFunc();

// 제너레이터 객체는 이터블이면서 동시에 이터레이터다.
// 이터러블은 Symbol.iterator 메서드를 직접 구현하거나 프로토타입 체인을 통해 상속받은 객체다.
console.log(Symbol.iterator in generator); // true
// 이터레이터는 next 메서드를 갖는다.
console.log('next' in generator); // true

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

제너레이터 객체는 next메서드를 갖는 이터레이터이면서 이터레이터에 없는 return, throw 메서드를 갖는다.

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

제너레이터는 함수 호출자에게 제어권이 있기 때문에 제너레이터 객체의 next 메서드를 호출하여 코드를 일시 중지와 재게 할 수 있다.
일반 함수처럼 한번에 모든 코드를 일괄 실행하는 것이 아니라 yield 표현식까지만 실행한다. 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 표현식까지 실행되고 yield 뒤에 있는 값을 이터레이터 객체의 value 프로퍼티 값으로 주고 일시 중지된다. 이때 함수의 제어권이 호출자로 양도된다. 외부에서 다시 작업을 하다가 제너레이터 함수의 실행을 재개하고 싶으면 다시 해당 제너레이터 객체의 next 메서드를 호출하면 되는데 이때 제너레이터 함수는 이전에 일시정지된 지점부터 다음 yield 키워드가 나오는 지점까지 실행되고 다시 일시 중지된다. 만약 함수의 끝부분이라면 value 는 undeined, done은 true인 이터레이터 리절트 객체를 반환하고 실행을 끝낸다.

예제)

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

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

res = generator.next(10);
console.log(res);  // { value: 20, done: false }

res = generator.next(20);
console.log(res);  // { value: 30, done: true }

async / await

제너레이터를 사용하면 비동기에 대한 처리를 동기처럼 유연하게 사용할 수 있지만 이는 코드가 무척이나 장황해지고 가독성이 나빠진다. 따라서 ES8에서는 제너레이터보다 간단하고 가독성 좋게 비동기 처리를 동기 처리처럼 동작하도록 구현할 수 있는 async/await가 도입되었다.

async/await는 프로미스를 기반으로 동작하는데 async/await를 사용하면 then/catch/finally와 같은 후속 처리를 할 필요없이 비동기 처리가 마치 동기처럼 이루어질 수 있다.

async 함수

await 키워드는 반드시 async 함수 내부에서 사용해야한다. async함수는 async키워드를 사용해 정의하며 언제나 프로미스를 반환한다. async 함수가 명시적으로 프로미스를 반환하지 않더라도 async 함수는 암묵적으로 반환값을 resolve하는 프로미스를 반환한다.

// async 함수 선언문
async function foo(n) { return n; }
foo(1).then(v => console.log(v)); // 1

// async 함수 표현식
const bar = async function (n) { return n; };
bar(2).then(v => console.log(v)); // 2

// async 화살표 함수
const baz = async n => n;
baz(3).then(v => console.log(v)); // 3

// async 메서드
const obj = {
  async foo(n) { return n; }
};
obj.foo(4).then(v => console.log(v)); // 4

// async 클래스 메서드
class MyClass { 
  async bar(n) { return n; }
}
const myClass = new MyClass();
myClass.bar(5).then(v => console.log(v)); // 5

클래스의 constructor 메서드는 async 메서드가 될 수 없다. 클래스의 constructor 메서드는 인스턴스를 반환해야 하지만 async 함수는 언제나 프로미스를 반환해야 한다.

class MyClass { 
  async constructor() {
  	/// SyntaxError
  }
}
const myClass = new MyClass();

await 키워드

await 키워드는 프로미스가 settled 상태(비동기 처리가 진행되어 성공이든 실패든 결과를 가지고 있는 상태) 상태가 될 때까지 대기하다가 settled 상태가 되면 프로미스가 resolve한 처리 결과를 반환한다. 이때 await 키워드를 가지고 있는 문을 하염없이 기다리는 것이 아니라 await 뒤의 프로미스의 상태가 결정될때까지 코드의 실행 제어권은 async 함수의 바깥으로 넘어간다.

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

const getGithubUserName = async id => {
	const res = await fetch(`https://api.github.com/users/${id}`); // 1번
  	const { name } = await res.join(); // 2번
  	console.log(name); // Kyungbin Park
};

getGithubUserName('kyungbin2');

await 키워드는 프로미스가 settled 상태가 될 때 까지 대기한다고 했다. 따라서 1번의 fetch 함수가 수행한 HTTP 요청에 대한 응답이 도착해서 fetch 함수가 반환한 프로미스가 settled 상태가 될 때까지 1번은 대기한다. 이후 프로미스가 settled 상태가 되면 프로미스가 resolve한 처리 결과가 res 변수에 할당된다.

예제)

cosnt test = (num) => {
  return new Promise((resolve, jec) => {
    setTimeout(() => console.log(num), 1000);
    resolve();
  });
}

async function mainTest = (num) => {
  console.log("입력이 들어왔습니다.");
  await test(num);  // 이때 1초를 기다리면서 흐름제어가 async 함수인 mainTest외부로 넘어감. 따라서 "기다리는 중..."이 먼저 출력
  console.log("끝.");
}

mainTest(1);
console.log("기다리는 중...");

 // "입력이 들어왔습니다." 출력 후, "기다리는 중..." 출력 후, 1 출력 후, "끝" 출력

에러처리

비동기 처리를 위한 콜백 패턴의 단점 중 가장 심각한 것은 에러 처리가 곤란한다는 것이다. 즉, 콜 스택의 아래 방향(실행 컨텍스트가 푸시되기 직전에 푸시된 실행 컨텍스트 방향)으로 전파된다. 하지만 비동기 함수의 콜백함수를 호출한 것은 비동기 함수가 아니기 때문에 try...catch문을 사용해 에러를 캐치할 수 없다.

try {
	setTimeout(() => { throw new Error("Error!"); }, 1000);
} catch (e) {
	// 에러를 캐치하지 못한다.
  	console.error("캐치한 에러", e);
}

async/await에서 에러 처리는 try...catch문을 사용할 수 있다. 콜백 함수 인수로 전달받는 비동기 함수와는 달리 프로미스를 반환하는 비동기 함수는 명시적으로 호출할 수 있기 때문에 호출자가 명확하다.

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

const foo = async () => {
	try {
    	const wrongUrl = 'https://wrong.url';
      
      	const respone = await fetch(wrongUrl);
      	const data = await response.json();
      	console.log(data);
    } catch (err) {
    	console.log(err); // TypeError
    }
};

foo();

---

느낌점

이번에 await/async를 공부하면서 느낀점은 프로미스를 잘 이해했다는 생각이 들고 잘정리했다는 생각이 든다. 옛날에 클론 코딩을 하다가 async/await을 사용한적이 있었는데 그때는 그냥 단지 코드를 따라치는데 급급했는데 이제는 이게 어떻게 비동기를 마치 동기처럼 처리하고 이게 얼마나 유용한지는 제너레이터를 공부하면서 async/await이 엄청 편리하게 느껴졌다. 제너레이터를 처음 접해보는데 되게 신기하기도 하고 모든 비동기를 다루는 것이 어떻게 보면 제너레이터 기반으로 만들어졌다는 생각이 든다. 다음에 더 깊이 공부해보도록 하겠다............