1. 자바스크립트의 런타임

자바스크립트의 엔진은 싱글 스레드로 동작합니다. 하지만 자바스크립트는 여러 개의 작업을 동시에 처리할 수 있는 비동기 처리를 지원합니다. 이를 위해서 자바스크립트가 실행되는 환경인 런타임에는 이벤트 루프와 콜백 큐가 존재합니다. 이벤트 루프는 비동기 작업이 완료되면 콜백 큐에 있는 함수를 호출하여 실행하는 역할을 합니다. 즉, 자바스크립트 엔진은 싱글 스레드로 동작하지만, 이벤트 루프를 통해 비동기 작업을 처리할 수 있습니다.

console.log(1);
setTimeout(() => {
  console.log(2);
}, 0);
console.log(3);

console.log(1);
setTimeout(() => {
  console.log(2);
}, 0);
console.log(3);

Web API는 브라우저에서 제공하는 API로 비동기 작업을 처리하는 역할을 합니다. 위의 코드에서 setTimeout은 Web API에 의해 처리됩니다. setTimeout이 호출되면 Web API는 타이머를 시작하고, 타이머가 만료되면 콜백 함수를 콜백 큐에 추가합니다.

콜백 큐는 Fifo(First In First Out) 방식으로 동작합니다. 즉, 먼저 들어온 함수가 먼저 실행됩니다. 이벤트 루프는 콜 스택이 비어있을 때 콜백 큐에서 함수를 꺼내어 실행합니다. 위의 코드에서 setTimeout이 호출되면 Web API는 타이머를 시작하고, 타이머가 만료되면 콜백 함수를 콜백 큐에 추가합니다. 그 후, 콜 스택이 비어있을 때 이벤트 루프가 콜백 큐에서 함수를 꺼내어 실행합니다.

Microtask Queue와 Macrotask Queue 마이크로태스크 큐와 매크로태스크 큐는 서로 다른 작업을 처리합니다.

Microtask Queue: Promise, MutationObserver 등
Macrotask Queue: setTimeout, setInterval 등

마이크로태스크 큐는 매크로태스크 큐보다 우선적으로 실행됩니다. 즉, 콜 스택이 비어있을 때 마이크로태스크 큐에 있는 작업이 먼저 실행되고, 그 후 매크로태스크 큐에 있는 작업이 실행됩니다.

console.log(1);
setTimeout(() => {
  console.log(2);
}, 0);
Promise.resolve().then(() => {
  console.log(3);
});
console.log(4);

console.log(1);
setTimeout(() => {
  console.log(2);
}, 0);
Promise.resolve().then(() => {
  console.log(3);
});
console.log(4);

2. 비동기 처리의 중요성

다음 챕터에서 다룰 AJAX(Asynchronous JavaScript and XML) 는 비동기 통신을 통해 서버와 데이터를 주고받는 방법입니다. AJAX의 등장으로 비동기 처리 방법이 매우 처리 방법이 매우 중요해졌습니다.

다음 의사코드를 살펴보겠습니다. 비동기통신함수1과 비동기통신함수2가 있을 때, 이 두 함수의 결과를 더한 값을 출력하기 위해 다음과 같이 코드를 작성해도 우리는 원하는 결과를 얻을 수 없습니다. 그 이유는 비동기 함수의 결과를 기다리지 않고 바로 console을 실행하기 때문입니다.

function 비동기통신함수1() {
  setTimeout(() => {
    return 10;
  }, 1000);
}
 
function 비동기통신함수2() {
  setTimeout(() => {
    return 20;
  }, 1000);
}
 
// 비동기 통신 함수의 결과를 더한 값을 출력합니다.
const result1 = 비동기통신함수1();
const result2 = 비동기통신함수2();
 
console.log(result1 + result2);

function 비동기통신함수1() {
  setTimeout(() => {
    return 10;
  }, 1000);
}
 
function 비동기통신함수2() {
  setTimeout(() => {
    return 20;
  }, 1000);
}
 
// 비동기 통신 함수의 결과를 더한 값을 출력합니다.
const result1 = 비동기통신함수1();
const result2 = 비동기통신함수2();
 
console.log(result1 + result2);

JavaScript 에센셜

비동기 처리의 중요성