JS Reboot - Generator

최근 글쓴이는 우아한테크러닝 3기 교육을 받고있습니다. 이전에 사용했던 Javascript 스펙들을 다시보게 되면서 배운 점들을 시리즈 글로 올려볼까 합니다. 글에 오류가 있거나 궁금한 점이 있다면 언제든 댓글로 알려주세요!

Generator

Promise();

function* foo() {

}

async function bar() {

}

const x = 10;
const y = x * 10;

위 두 줄은 동시에 실행 가능한가?

변수적인 dependency가 걸려있어 안된다!!

const x = () => 10
const y = x() * 10

lazy, 지연

x의 값을 가지는 위치가 결국...

const p = new Promise(function (resolve, reject) {
	setTimeout(() => {
		resolve(1); // then 안에 있는 함수를 호출시킴 "지연"
	}, 1000);
});

p.then(function(r) {
	console.log(r); // 1
});

제네레이터는 코루틴이라는 것의 함수 구현체이다!

function* make() {
	return 1;
}

const i = make();

함수는 인자(입력값)를 받고 무언가 계산을 한 다음 리턴을 하는 것.

만약 리턴이 없다면, 프로시져라고 함

프로시져든 함수든 한번 호출하고 결과를 받거나 그 다음스텝 실행할 수 있는데, (그래서 함수가 상태를 못가짐)

그런데 이런 상황의 개념을 좀더 폭넓게 하면 어떨까

리턴을 여러번 할수 있게 하면 어떨까? 호출자에게 리턴을 여러번.

다시 함수가 호출될 때 처음부터 시작하는게 아니라 마지막에 리턴된 위치에서 시작되는...!! "코루틴"

리턴은 함수를 종료시키는 역활이 있음! 그래서 다른 명령어를 만들어놓음. yield! 다시 돌아오겠다...

function* makeNumber() {
	let num = 1;
	while(true) {
		yield num++;
	}
}

const i = makeNumber(); // 실행되는게 아니라 실행될 준비만 되어있음. 실행되는 도구를 전달해줌.

i.next(); // yield된 값이 있는 객체가 리턴됨. { value: 1, done: false }

어따쓰지?

function* sendData() {
	let num = 1;

	while(true) {
		const x = yield  num++;
		console.log(x);
	}
}

const d = sendData();
d.next();
d.next('x');

const delay = (ms) => new Promise((resolve) => setTimeut(resolve, ms));

function* main() {
	console.log('시작');
	yield delay(3000);
	console.log('3초 뒤');
}
// 동기 코드처럼 보이네...??

const it = main();

const pObject = it.next();

pObject.value.then(() => {
	it.next();
});

function* main() {
	console.log('시작');
	yield delay(3000);
	console.log('3초 뒤');
}

async await는 프로미스에 최적화되어있음

generator는 응용범위가 더 넓음!!

saga의 경우에는 비동기 상황일떄에만 yield하는 것이 아니라 더욱 다양한 상황에서 사용함!!!