이 글은 You Don't Know JS 서적을 참고하여 작성하였습니다.

지금과 나중

프로그램을 개발하다 보면, 어느 부분은 지금 실행되고 다른 부분은 나중에 실행되면서 발생한다. 이러한 지금과 나중에 해당하는 부분 사이의 관계가 바로 비동기 프로그램의 핵심이다.

좀 더 구체적으로 살펴보면, 자바스크립트 프로그램은 함수라는 단위로 지금 실행중인 프로 그램 덩이와 나중에 실행할 프로그램 덩이로 구성된다. 나중이라는 의미는 지금 당장 끝낼 수 없는 작업을 비동기적으로 처리 한 후 프로그램 중단없이 실행하는 것을 말한다.

지금부터 나중까지 기다리는 가장 간단한 방법은 콜백 함수를 이용하는 것이다.

그럼, 다음 코드에서 지금과 나중에 발생할 코드를 구분해보자.

function now() {
    return 21;
}

function later() {
    answer = answer * 2;
    console.log("answer = " + answer);
}

var answer = now();

setTimeout(later, 1000);
// answer = 42

지금 실행되는 코드는 아래와 같다.

function now() {
    return 21;
}

function later() { ... }

var answer = now();

setTimeout(later, 1000);

나중에 실행되는 코드는 다음과 같다.

answer = answer * 2;
console.log("answer = " + answer);

프로그램을 시작하면 지금에 해당하는 부분은 바로 실행되지만, 나중에 해당하는 부분은 setTimeout() 함수로 타이머 처리기에 등록되어 1초 이후에 실행된다.

later 함수는 비동기적으로 실행되는 것을 확인할 수 있다.

이벤트 루프

자바스크립트는 단일 스레드로 동작하는데 어떻게 비동기를 처리할 수 있는 것일까?

자바스크립트 엔진은 스레드 내부 스택에서 함수를 하나씩 처리해 나가는데, 비동기 처리가 필요한 영역에서는 Block 되지 않고 호스트(ex. 브라우저)에 요청을 한 후 다음 코드를 순차적으로 실행해 나간다.