자바스크립트는 단일 스레드 언어로, 모든 작업을 하나의 실행 스레드에서 처리합니다. 모든 함수 실행은 호출 스택에 쌓이고 순차적으로 실행됩니다. 하지만 비동기 작업은 어떻게 처리되는 걸까요?

호출 스택

호출 스택은 함수 호출을 기록하는 스택 자료 구조로, 함수가 실행될 때마다 호출 스택에 쌓입니다. 현재 실행 중인 함수의 완료 후 이전 호출로부터 반환된 값은 호출 스택에서 제거됩니다.

이벤트 루프와 태스크 큐

자바스크립트의 비동기 작업은 이벤트 루프와 태스크 큐를 통해 처리됩니다. 비동기 함수는 호출 스택에서 실행되고 난 후, 그 결과는 태스크 큐에 들어갑니다. 이후 이벤트 루프가 호출 스택이 비어 있는지 확인하고, 비어 있다면 태스크 큐에서 함수를 호출 스택으로 이동시키고 실행합니다.

예시 코드

console.log('첫 번째');
setTimeout(() => {
  console.log('두 번째');
}, 0);
console.log('세 번째');

위의 코드는 ‘첫 번째’, ‘세 번째’, ‘두 번째’ 순서로 출력됩니다. setTimeout 함수는 비동기 함수로, 호출 스택으로 즉시 이동되지 않고 지정된 시간 후에 태스크 큐로 이동됩니다. 따라서 ‘두 번째’가 마지막에 출력됩니다.

이렇게 호출 스택과 태스크 큐를 통해 자바스크립트는 비동기 작업을 효율적으로 처리할 수 있습니다.

요약

• 호출 스택은 함수 호출을 기록하는 스택 자료 구조이다.
• 이벤트 루프와 태스크 큐를 통해 자바스크립트는 비동기 작업을 처리한다.

이러한 메커니즘을 이해하면 비동기 작업을 효율적으로 다룰 수 있게 됩니다.

참고: MDN web docs - Concurrency model and Event Loop