간단하게 알아보는 콜백(callback), 프로미스(promise), async, await

ES5, ES6, ES7에 따라 조금씩 형태가 변했다고 볼 수 있다.

 

 

필요한 도메인 지식

 

 

자바스크립트의 함수는 일급객체(first-class object)이다.

즉, 함수가 매개변수로 넘겨지거나 변수에 대입이 가능하다는 뜻이다.

 

그리고 고차 함수가 존재한다.

고차함수란, 함수를 매개변수로 받거나 함수를 리턴하는 함수를 말한다.

 

고로 콜백(callback) 함수가 존재한다.

콜백이란 불려지는 것을 의미한다.

 

콜백의 예시는 다음과 같다.

function init(){
  getDays((d)=>{
  console.log(d.getDay());
  });
 }

 function getDays(fn){
 	var d = new Date();
 	fn(d);
}

 

쉽게 생각하면,

매개변수로 함수를 전달받아 전달받은곳에서 호출하는 것이다.

호출 시점은 보통 필요한 작업이 끝난 뒤 (이벤트 감지 후, 자원 할당 후 등..) 일 것이다.

 

여기까지가 ES5의 내용이다.

 

ES6부턴 이 형태가 어떻게 변했는가?

저 형태는 흔히 말하는 콜백 지옥(callback hell)을 쉽게 초래한다는 문제점이 있다.

(콜백의 콜백 콜백의 콜백 계속 물리는 구조가 될 수 있음)

그래서 어떤 행위를 하자고 약속한 객체가 나왔는데 그것이 Promise 객체이다.

 

 

Promise

콜백에서 아주 조금 바뀐 것이 있는데, 바로 catch()와 then으로 이어지는 메서드 체인을 사용할 수 있다는 것이다.

바로 예제로 들어가보면 다음과 같다.

var date = getDays().then(({d, a})=>{
	 	console.log(d.getDay());
	 	console.log(a);
	 });
     
function getDays(){
     var d = new Date();
     let a = "10";
     return new Promise(function(resolve, reject){
     	resolve({a, d});
     });
}

Promise객체는 또 함수를 매개로 가지는데

여기서 함수의 매개변수 resolve reject는 then절에 값을 전달 해 주는 역할을 한다.

특히 resolve는 성공 시, reject는 실패 시를 의미한다.

 

then은 Promise 객체의 메서드이다.

resolve에서 매개변수로 전달한 값을 어떻게 처리할 지 로직을 짜는 부분이다.

근데 콜백이랑 많이 달라보이진 않는다.

 

 

그래서 등장한게 async await이다.

 

 

async await

async function init(){
	let a = await getDays();
	console.log(a);
}

 

코드수가 확 줄어버렸다( 함수 선언부 제외하고 )

이건 비동기식으로 작동하는걸 동기식으로 작동하게 만드는 코드라고 봐도 무방하다.

 

그러나 Promise 객체에 한해서만 해당 키워드를 사용할 수 있다!