JavaScript의 Call Stack과 Event Loop

호출 스택과 이벤트 루프는 자바 스크립트 코드를 이해하는데 중요한 개념입니다.

호출 스택(Call Stack)

호출 스택은 실행 컨텍스트(작업 범위)가 쌓이게 되는 공간이며 스택이므로 LIFO(Last In First Out)의 특징을 가지고 있습니다. 먼저 실행된 함수가 호출 스택에 먼저 들어가지만 가장 마지막에 나오게 되고 마지막에 들어간 함수가 가장 먼저 실행이 된다고 생각하면 좋을듯 합니다.

예제 코드와 결과는 다음과 같습니다.

코드

function a() {
  console.log('a_start');
  b();
  console.log('a_end');
}
function b() {
  console.log('b_start');
  c();
  console.log('b_end');
}
function c() {
  console.log('c function!');
}
a();

결과

a_start
b_start
c function!
b_end
a_end

A, B, C 구조로 쌓이지만 C가 가장 마지막에 호출된 함수이므로 다음과 같은 구조로 쌓여있다가 위에서부터 차례대로 실행이 되는 구조입니다.

이벤트 루프(Event Loop)

호출 스택, 백그라운드, 태스크 큐가 반복되는 과정을 이벤트 루프라고 합니다.
백그라운드는 비동기 이벤트를 쌓아놓고 완료될 때 까지 기다리는 곳이며 완료될 때 작업이 테스크 큐로 이동 됩니다.
태스크 큐는 백그라운드에서 작업이 완료된 목록이 쌓이는 공간입니다. 호출 스택이 비게 되면 태스크 큐에 있는 작업들이 FIFO(First In FirstOut)로 실행됩니다.

예제 코드와 결과는 다음과 같습니다.

코드

function a() {
  console.log('a_start');
  b();
  console.log('a_end');
}
async function b() {
  console.log('b_start');
  c();
  console.log('b_end');
}
function c() {
  setTimeout(() => {
    console.log('c wait!');
  }, 1000)
  console.log('c_end')
}
// 실행
a();
// 실행
a();

결과

a_start
b_start
c_end
b_end
a_end
c wait!

c의 setTimeout 함수가 백그라운드로 들어가면서 모든 큐가 끝나고 실행이 되는 것을 확인할 수 있습니다.

참고자료

아래 유튜브 영상에서 코드가 실행되는 과정을 확인할 수 있습니다.
https://www.youtube.com/watch?v=8aGhZQkoFbQ&t=770s