콜백,promise,async 이해하기 위한 최고의 글..

https://joshua1988.github.io/web-development/javascript/promise-for-beginners/

자바스크립트 Promise 쉽게 이해하기

 

이런 글을 쓸 수 있는 개발자가 되고 싶다...

 

 

/* eslint-disable no-console */
/* eslint no-constant-condition: "error" */
const a = 1;
console.log(a);

const obj = {
	sayNode () {
		console.log('node');
	},
	sayJs: 'sayJs',
	['es' + 6]: 'fantastic',
};

obj.sayNode();
console.log('sfsdfds');

const example1 = (x, y) => { return x + y; };
 
const candyMachine = {
	status: {
		count: 0,
		name: 'node',
	},
	getCandy () {
		this.status.count--;
		return this.status.count;
	},
};

const condition = true;
const promise = new Promise((resolve, reject) => {
	if (condition) {
		resolve('성공');
	}
});

promise.then((message) => {
	console.log(message);
});

const plus = (a, b, callback) => {
	sum = a + b;
	callback(sum);
};

plus(1, 2, (result) => {
	console.log(result);
});

console.log('종료');

const funcA = () => {
	console.log('a is created.');
};

const cA = funcA;

cA();

let funcB = (callback) => {
	callback();
};

funcB(cA);

funcB = (str) => {
	console.log('`str`is created');
};

funcB('a');

function func () {
	function cb () {
		console.log('리턴된 함수 실행');
	}
	return cb;
}
func(); // 값 : func함수 안에 있는 cb함수
func()(); // 출력 : 리턴된 함수 실행

const myCb = func(); // myCb 변수에 func() 값인 cb함수를 전달한다.
console.log(typeof (myCb)); // 출력 : function
myCb(); // 출력 : 리턴된 함수 실행

/*
https://joshua1988.github.io/web-development/javascript/javascript-asynchronous-operation/
엄청 잘 설명되어있음.  
즉, 함수로만 get함수가 원래 response 받아서 안에서 출력하는 애였는데 출력전에 
자스가 함수형이라서 함수 껍데기들만 바로바로 실행하다가 바깥의 콘솔호출을 해버리면 아직 안채워졌으니 undifined뜨지.
이럴때 <내가 하려는게 결과를 콘솔호출이니까 콘솔호출 로직을 파라미터부분에 함수로 넣고 그 함수에 결과를 인자로 하도록 정의해서 안에 함수 실행문을 정의하면
결과가 나왔을 때만 호출되서 나온다. >근데 그럼 안에 안에 안에되니까 복잡해지니까 패턴으로만이라도 분리를 할 수 있다는거고
실질적으로 분리하려면 promise 나 async를 사용하는 것이다 .
참고로, 콜백을 밖에서 따로 정의해도 되지만 본함수 그대로 호출하면서 파라미터에서 함수를 정의해줘도 된다! (그게 promise포스팅의 첫번째 예제 코드임)
자스는 파라미터의 형태도, 갯수도 세지않고 들어오면 알아서 넣고 함수 실행이 된다. 
자스는 파라미터를 변수뿐만이 아니라 함수도 받기 때문에 정의도 안한 함수 이름 써놓으면 그게 매개변수고,
함수로 쓸거면 그 안에서 이름()꼴로 호출해도 되는거임,.

다만, promise에선 그게 resolve와 reject인거고 그게 쓰이는 내용으로 함수내용이 정의되면 fullfilled상태가 되는거고 then과 catch를 쓸 수 있는거다.
resolve 파라미터에 정의된게 결과값으로 저장되고 그 값을 then에서 쓸 수 있다. 
즉, 프로미스가 나온 이유는 비동기 할 일보단 안할 일이 많은데 자꾸 비동기로 처리하니까 콜백을 쓰고, 콜백이 자꾸 중첩되게 하는데
콜백은 결국 인자가 결과가 잘나왔고 못나왔고 두가지 경우로 나뉘니까 잘나온거에 대한 처리 then과 아닌 경우 catch로 나눠서 밖에서
패턴분리해서 쓸 수 있게 만드는거다.
*/

// 내가 쓴 예제~~
let val = 1;
function testCallback (callback1) {
	let x;
	let y;
	if (val === 1) {
		x = 1;
		y = 1;
	} else {
		x = 2;
		y = 2;
	}
	return callback1(x, y);
}

const res = testCallback((tx, ty) => {
	console.log(tx + ty);
	return tx + ty;
});
console.log('res is ' + res);

val = 2;
function testPromise () {
	return new Promise(function (resolve, reject) {
		let x, y;
		if (val === 1) {
			x = 1;
			y = 1;
		} else {
			x = 2;
			y = 2;
		}
		resolve(x + y);
	});
}
console.log('after 3 step is ');
testPromise().then(firstfunc).then(secondfucn).then(thirdfunc); /* promise 객체는 resolve는 값만 넘겨주고 반환값은 없으므로 호출은 마지막 단계 함수 안에서 해결해야한다 . 혹은 반환을 따로 하던가 */

function firstfunc (res) {
	return new Promise(function (resolve) {
		resolve(res + 10);
		return res + 10;
	});
}

function secondfucn (res) {
	return new Promise(function (resolve) {
		resolve(res + 10);
		return res + 10;
	}); 	// 실행문이니까 세미콜론 붙여야 됨
}

function thirdfunc (res) {
	console.log(res + 10);
	return res + 10;
}

// 위의 예제들을 async를 써서 코드를 줄여보자.
async function testAsync (tmp1) {
	let res4 = await firstfunc(tmp1);
	res4 = await secondfucn(res4);
	res4 = await thirdfunc(res4);
	console.log('r u ok?' + res4);
}
testAsync(1);

/*
참고로 resolve는 따로 반환하지는 않고 다음 then의 인자로 전달할 수 만 있게 해주는 애고
반환값으로 쓰고싶으면 return 해야함
*/

 

이 아래 코드는 콜백부분, 프로미스부분, async 부분으로 주석처리된거 부분별로 풀어서 돌려봐야됨. 

주석 다 풀고 동시에 돌리면 순서 섞여서 나오기 때문에 내가 promise로 만든게 1-2-3의 순서로 되는지 확인을 못함

/* eslint-disable no-console */
const fs = require('fs');
console.log('시작');

/*
fs.readFile('./readme2.txt', (err, data) => {
	if (err) {
		throw err;
	}
	console.log('1번', data.toString());
});

fs.readFile('./readme2.txt', (err, data) => {
	if (err) {
		throw err;
	}
	console.log('2번', data.toString());
});

fs.readFile('./readme2.txt', (err, data) => {
	if (err) {
		throw err;
	}
	console.log('3번', data.toString());
});

console.log('비동기 처리 안된 코드 끝');
*/
// 위는 비동기인데 걍 놔둬서 꼬인거

/*
fs.readFile('./readme2.txt', (err, data) => {
	if (err) {
		throw err;
	}

	console.log('1번', data.toString());
	fs.readFile('./readme2.txt', (err, data) => {
		if (err) {
			throw err;
		}
		console.log('2번', data.toString());
		fs.readFile('./readme2.txt', (err, data) => {
			if (err) {
				throw err;
			}
			console.log('3번', data.toString());
		});
	});
});

console.log('콜백지옥이지만 비동기처리는 된(순서를 맞춘) 끝'); */
// 위는 콜백지옥으로 구현 (함수가 호출되면서 새 함수를 불러서 인자가 들어갔을때만 되도록..)

/*
fs.readFile('./readme2.txt', (err, data) => {
	if (err) {
		throw err;
	}
	const promise = new Promise(function (resolve, reject) {
		resolve(data);
	});
	promise.then(pro1).then(pro2).then(pro3);
});
*/
function pro1 (data) {
	return new Promise(function (resolve, reject) {
		console.log('1번', data);
		resolve(data);
	});
}
function pro2 (data) {
	return new Promise(function (resolve, reject) {
		console.log('2번', data);
		resolve(data);
	});
}
function pro3 (data) {
	return new Promise(function (resolve, reject) {
		console.log('3번', data);
		resolve(data);
	});
}

console.log('promise 처리 끝');
// 위는 promise로 구현 .. util 써서 하는거도 연습해보자 나중에

fs.readFile('./readme2.txt', async (err, data) => {
	if (err) {
		throw err;
	}
	let l = await pro1(data);
	l = await pro2(data);
	l = await pro3(data);
});
console.log('async await 처리 끝'); 
// async await 로 구현