[자바스크립트] 9. 동기, 비동기 - 콜백

자바스크립트는 원래 동기적 언어이다. 즉, hoisting이 이루어진 후 코드가 순서대로 동기적으로 실행된다.

그러나 우리는 자바스크립트가 비동기식으로 동작하도록 할 수 있는데, 그 중 한 방법이 콜백이다.

콜백이란?

함수를 파라미터로 전달했을 때 특정 시점에 그 함수를 실행시켜 주는 경우를 말한다.

console.log('1');
setTimeout(() => console.log(2), 1000);
console.log('3');

위 코드를 실행하면 1 출력 → 3 출력 → 1초 후 2 출력 순서대로 실행된다.
즉, setTimeout의 파라미터인 handler에 2를 출력하는 함수를 넘겨주면 1초 후 해당 함수가 실행된다.(콜백)

동기 콜백

function printImmediately(print) {
    print();
}
printImmediately(() => console.log('hello'));

비동기 콜백

function printWithDelay(print, timeout) {
    setTimeout(print, timeout);
}
printWithDelay(() => console.log('async callback'), 2000);

이처럼 콜백은 비동기적 동작의 수행이 가능하게 하지만, 끊임 없이 콜백이 수행되는 콜백 지옥을 초래할 수도 있다.

step1(function (value1) {
    step2(function (value2) {
        step3(function (value3) {
            step4(function (value4) {
                step5(function (value5) {
                    step6(function (value6) {
                        // Do something with value6
                    });
                });
            });
        });
    });
});

이를 해결하기 위해 promise, async/await 이라는 개념이 등장하게 된다.