Callback, Promise, Async, Await

08/08

 

Callback 이란

다른 함수의 인자로서 활용되는 함수.
어떤 이벤트에 의해 호출되는 함수.

함수의 인자처럼 전달되어서 쓰이는 함수를 의미한다.

function func(callback) {
	callback();
}

callback 을 사용하는 이유는, 비동기 프로그래밍에서 사용하면
task가 끝나기 전에는 함수가 실행되지 않는 것을 보장하기 때문.
callback은 그 task가 끝난 직후에 실행되기 때문에 여러 문제와 에러로부터 안전하도록 지켜준다.

 

Callback 의 사용

callback 을 사용하는 여러 방법이 있는데,

const func = function() {
	console.log("message");
}

setTimeout(func, 3000);

함수를 선언하고, 다른 함수의 인자로 전달하는 방법이다.
이 경우, setTimeout 이 호출되고 3000ms(=3s) 후 func 이 호출된다.

 

setTimeout(function() {
    console.log("message");
}, 3000);

동일한 작동을 하는 함수를 익명 함수로 바로 사용할 수도 있다.

 

setTimeout(() => {
    console.log("message");
}, 3000);

내가 가장 선호하는 방법으로, ES6 이상에서 람다식으로 사용할 수 있다.
람다식을 사용하면, 함수를 선언해서 차지하는 메모리를 절약해,
일회용으로 전달하거나 사용하고 마는 함수의 경우 조금 더 아낄 수 있다(고 생각한다).

 

Callback의 문제점

다만, callback을 많이 사용하게 되는 경우,

setTimeout(() => {
    console.log("message");
    setTimeout(() => {
    	console.log("message");
    	setTimeout(() => {
        	consol.log("message");
        }, 500);
    }, 500);
}, 500);

와 같이 알아보기도 힘들고, 각 callback 타이밍이 언제인지 알 수도 없는 상태에 빠지게 되는데,
callback hell 이라고 부른다.

이를 극복하기 위해 만들어진 것이 있는데...

 

Promise

생성된 시점에는 모를 수 있는 값을 위한 대리자로, 비동기 연산이 종료 된 이후
결과 값과 실패 사유를 처리하기 위한 처리기를 연결할 수 있다.

promise 를 사용하면 비동기 메서드에서도 마치 동기 메서드인 것 처럼 값을 반환할 수 있게 됨.
다만 최종 결과를 반환한다기보다는, 미래의 어떤 시점에 결과를 제공하겠다는 약속(Promise) 를 반환하는 것.

promise 는 다음 중 하나의 상태를 가진다.

• 대기(Pending) : 이행하지도, 거부하지도 않은 초기 상태.
• 이행(fulfilled) : 연산이 성공적으로 완료됨.
• 거부(rejected) : 연산이 실패함.

 

callback 함수를 전달하는 방식과는 달리, promise 가 보장하는 특징들은,

• callback 은 JavaScript Event Loop 가 현재 실행중인 콜스택을 완료하기 이전에는 절대 호출되지 않음.
• 비동기 작업이 성공하거나 실패한 뒤에 then() 을 이용하여 추가한 callback 의 경우에도 마찬가지.
• then() 을 여러 번 사용하여 여러개의 callback 을 추가 할 수 있음. 각각의 callback은 순서대로 하나하나 실행됨.

>> promise 의 가장 뛰어난 장점은 chaining.

 

Async, Await

코드를 짤 때 동기식 코드처럼 생각하고 사용할 수 있게 된다.

async function func([param[, param[, ... param()]]]):Promise {statements(await)};

async 함수에는 본문에 await가 사용될 수 있다.
await 식은 async 함수의 실행을 일시 중지하고, 전달 된 promise 의 해결을 기다린 다음,
async 함수의 실행을 다시 시작하고, 완료 후 값을 반환한다.

async 함수는 항상 promise를 반환한다.

async / await 를 사용하는 목적은,
여러 promise의 동작을 동기스럽게 사용할 수 있게 하고,
어떠한 동작을 여러 promise의 그룹에서 간단하게 동작하도록 하는 것이다.
promise 를 구조화된 callback 대신 사용하는 것 처럼,
async / await 도 generator 와 promise 를 묶는 것과 유사하다.