9. generators

제너레이터란?

: 이터레이터를 사용해 자신의 실행을 제어하는 함수. 일반적인 함수는 호출되면 그 함수가 종료될 때까지 제어권을 완전히 넘기게 되는데 제너레이터에서는 그렇지 않습니다.

특징

1. 제너레이터는 언제든 호출자에게 제어권을 넘길 수 있습니다.

2. 제너레이터는 호출한 즉시 실행되지는 않습니다. 대신 이터레이터를 반환하고, 이터레이터의 next 메서드를 호출함에 따라 실행됩니다.

이 두가지 특징을 제외하고는 일반 함수가 동일하다고 설명하고 있습니다. 일단 제너레이터를 만드는 일반적인 예제를 하나 살펴보겠습니다.

function* gen() { 
  yield 1;
  yield 2;
  yield 3;
}

let g = gen(); // "Generator { }"

=> MDN에서 나오는 예제인데요 제너레이터는 function 에 * 기호를 사용하여 선언을 합니다. 또한 yield 키워드가 등장합니다. 생소한 것 투성이네요. C언어 배울 때 포인터에서나 쓰던 기호인데 javascript에서도 등장을 하네요.

일반적인 함수와는 달리 제너레이터는 이터레이터를 사용해 자신의 실행을 제어하는 함수라고 하였습니다. 아래의 코드를 한 번 살펴보죠.

function nomal() {
	for(let i=1;i<=3;i++){
		console.log(i);
	}
}

function* gen() { 
  yield 1;
  yield 2;
  yield 3;
}

let n = nomal(); // 1 2 3
let g = gen();	 // "Generator { }"
console.log(g.next()); //{ value: 1, done: false }
console.log(g.next()); //{ value: 2, done: false }
console.log(g.next()); //{ value: 3, done: false }

=> 일반적으로 함수는 한 번 실행이 되면 함수가 끝날 때 까지 사용자가 제어할 수가 없습니다. 여기선 반복문이 다 한 번에 출력되어버리죠. 그와달리 제너레이터로 만든 함수는 함수의 실행을 개별적 단계로 나눔으로써 함수의 실행을 제어하고 있습니다. 또한 내가 실행하려 할 때, 마치 책깔피를 껴놓은 것 처럼 이전에 실행했던 부분 다음부터 실행을 해주고 있죠. 일단 이게 가장 큰 차이입니다.

❓그럼 도대체 이걸로 뭘 해야하는건데...

제가 보자마자 갖게된 의문입니다. 사실 개념적인 부분 설명이 너무 모자랐지만, 저런 간단한 예시로 정확한 이해가 되지도 않고, 어떤상황에서 써야하는지 감도 오질 않아서 다짜고짜 어떤 상황에서 쓰게 되는지를 알아보게 되었습니다.

❗️비동기적 프로그래밍

갑자기 문법이 아닌 구조? 에 관한 얘기가 나오게 되었는데요. 비동기처리란 특정 코드의 실행이 끝날 때 까지 코드의 실행을 멈추는 것이 아니라 바로 다음 구문을 실행하는 방식을 말합니다. 비동기처리를 사용해야 하는 경우는 크게 세 가지가 있습니다.

- Ajax 호출을 비롯한 네트워크 요청

- 파일을 읽고 쓰는 등의 파일시스템 작업

- 의도적으로 시간 지연을 사용하는 기능

저 또한 비동기처리를 위해 사용했던 패턴이 있는데요, 비동기적 프로그래밍에서 등장하는 세 가지 패러다임이 있습니다. 콜백과 프라미스 그리고 마지막이 이번에 다루고 있는 제너레이터입니다. 

☎️ 콜백 (callback)

콜백은 간단히 말해 나중에 호출할 함수입니다. 콜백 함수도 그냥 함수일 뿐입니다. 콜백이 주인공이 아니니 코드로 간단하게 살펴보겠습니다. setTimeout을 사용하는 예제로 알아보겠습니다.

function hello(callback) {
	setTimeout(()=>{
		callback('hello')
	},500)
}
function space(text,callback) {
	setTimeout(()=>{
		callback(text + ' ');
	},500)
}
function world(text,callback) {
	setTimeout(()=>{
		callback(text + 'world');
	},500)
}
function tryWorld(){
	hello(t1=>{
		space(t1,t2=>{
			world(t2,t3=>{
				console.log(t3) //hello world
			})
		})
	})
}
tryWorld();

setTimeout 은 콜백함수의 실행을 지정된 시간만큼 지연시킨 후 실행하는 내장 함수입니다. 자바스크립트의 대표적인 비동기 처리함수죠. 위 예제는 hello world를 출력하는 예제입니다. 비동기 처리함수에서 순서를 보장하는 결과를 출력하기위해 함수가 끝날 때마다 결과를 콜백함수의 매개변수로 넘겨주고 있습니다.

콜백만을 사용하다보면 콜백헬에 빠질 위험도 있고, 그로인해 코드가독성도 떨어지며 에러처리에 곤란한 부분이 생길 수 있습니다. 그에대한 대안으로 프라미스 패턴이 등장하게 되었는데요.

🤙 프라미스(Promise)

프라미스와 콜백이 다른게 아닙니다. 프라미스에서도 콜백을 사용합니다. 프라미스의 기본 개념은 프라미스 기반 비동기적 함수를 호출하면 그 함수는 Promise 인스턴스를 반환합니다. 프라미스는 성공 혹은 실패 단 두가지만 일어납니다. 

let models = require('../models');
function loginFunction(id,pwd,res,req){
	models.User.findOne({
		where: {user_id: id}
	})
	.then((user)=>{
		if(user===null || user.dataValues.password!==pwd){
			console.log('로그인 실패');
		} 
		else{
			console.log('로그인 성공');
		}
	})
	.catch((err)=>{
		console.log('오류발생!!')
	})
}

제가 Node.js 에서 작성했던 코드의 일부분인데요 구조만 보려고 조금 단순화하였습니다. 로그인 동작을 코드로 구현한 것인데, 보시면 findOne 메소드 이후에 then 이 나오죠. 이 말은 findOne 메소드의 결과가 성공했다는 부분입니다. 위에서 말했듯이 Promise는 성공 혹은 실패 단 두가지의 경우만 발생한다고 하였죠. 

그럼 catch 는? 실패한 경우를 반환하겠죠. 위 경우에는 로그인을 실패했다는 말이 아니라 DB 접근 자체가 잘못된 경우를 뜻합니다. 예를들면 User 테이블이 아닌 이상한 테이블을 접근하려했다던가 하는 경우가 있겠죠? 프라미스 패턴 이라고는 했지만 보시다시피 콜백이 없는게 아니죠. 아무래도 가독성이 좋고 에러처리도 catch문으로 명확하게 처리할 수 있다보니 많이 쓰는 패턴 중 하나 입니다. 

위 두 패러다임은 위의 개념이 끝이라고 할 수 없습니다. 워낙 많이 쓰이고 더 유용한 기능이나 개선된 형태가 많이 있거든요. 비동기 처리에 대한 내용을 알아봐야하니 간단하게나마 알아보았습니다.

💡제너레이터

콜백 예제를 이용해서 제너레이터로 표현해보겠습니다. 

function helloWorld_Hello() {
  setTimeout(() => {
    iterator.next('Hello');
  }, 1000);
}
 
function helloWorld_Space(text) {
  setTimeout(() => {
    iterator.next(text + ' ');
  }, 1000);
}
 
function helloWorld_World(text) {
  setTimeout(() => {
    iterator.next(text + 'World');
  }, 1000);
}
 
function* helloWorld() {
    const hello = yield helloWorld_Hello();
    const space = yield helloWorld_Space(hello);
    const world = yield helloWorld_World(space);
    console.log(world); // Hello World
    return;
}
const iterator = helloWorld();
iterator.next();

위의 콜백 예제와 다른점이 있다면 helloWorld 함수를 제너레이터로 작성하였습니다. 그래서 각각의 함수들은 차례차례 실행이 됩니다. Hello가 실행된 후 Space, 마지막으로 World가 실행이 되게되죠. 

제너레이터 함수를 선언하면 바로 실행이 되는 것이 아니라 이터레이터 객체를 반환하게 됩니다. 그래서 실행을 시키려면 next 메서드를 사용해야합니다.

이번에 제너레이터를 처음 알게 되었는데 자바스크립트의 비동기 처리를 위해 제공하는 모듈이 여러가지 있다보니 오히려 이게 더 불편하다는 느낌도 드는게 사실입니다. 제너레이터의 강점이 드러나는 코드를 만나게되면 다시한번 살펴봐야겠네요.. 

예제 출처  : https://lab.falsy.me/generator-co-async-%EB%A5%BC-%EC%9D%B4%EC%9A%A9%ED%95%9C-%EB%B9%84%EB%8F%99%EA%B8%B0-%EC%88%9C%EC%B0%A8-%EC%8B%A4%ED%96%89%EC%8B%9C%ED%82%A4%EA%B8%B0/