[JAVASCRIPT] 호출 스택과 이벤트 루프(Call stack and Event loop)

호출스택과 이벤트 루프에 대한 내용은 아래의 제로초 TV 자바스크립트 강의를 참고하였습니다.

https://youtu.be/XkOxLB7MCIk?si=XrU_1zX6Voy53-Zl

 

---

자바스크립트에는 비동기 함수가 있어 다른 언어들과는 코드들이 다른 방식으로 작동하기 때문에

자바스크립트를 공부한다면 알아야 할 가장 중요한 내용 중 하나라고 생각합니다.

일단 먼저 호출 스택과 이벤트 루프의 개념도를 먼저 보겠습니다.

여기에서는 백그라운드(background)와 태스크 큐(task queue)라는 개념도 나옵니다.

호출스택과 이벤트루프 개념도

 

1. 호출 스택

함수들이 실행되는 공간이 바로 호출스택입니다.

여기서 실행된 함수들은 호출스택에서 빠져나오게 됩니다.

2. 백그라운드

타이머를 처리하거나 이벤트 리스너들을 저장하는 공간입니다.

setTimeout 같이 타이머를 사용하는 함수가 실행되면 백그라운드에서 타이머를 재고, 시간이 끝나면 콜백함수를 태스크 큐로 보냅니다.

마찬가지로 addEventListener 같이 이벤트 리스너도 백그라운드에 저장했다가 이벤트가 발생하면 콜백함수를 태스크 큐로 보냅니다.

여기서 주의해야할 점은 백그라운드에서 콜백함수를 실행시키는 것이 아닌, 태스크 큐로 보낸다는 점입니다.

3. 태스크 큐

타이머나 리스너에 있는 콜백함수들을 들어온 순서대로 저장한 공간입니다.

이름에서 알 수 있다시피 큐(queue)이기 때문에, 먼저 들어온 콜백함수부터 실행됩니다.

여기서 주의해야할 점은 백그라운드와 마찬가지로 태스크 큐에서 실행되는 것이 아닌 이벤트 루프를 통해 호출스택으로 이동하여 실행된다는 점입니다.

4. 이벤트 루프

호출 스택이 비었을 때, 태스크 큐에 있는 함수를 순서대로 하나씩 꺼내어 호출스택으로 옮겨주는 역할을 합니다.

호출스택에서 함수가 실행이 끝나면 호출스택에서 빠져나오게 되고, 이벤트 루프는 태스크 큐에서 다음 콜백함수를 호출스택으로 옮겨줍니다.

​

여기까지가 개념에 대한 설명이고

이제 코드를 보며 동작을 설명하겠습니다.

 

우리의 눈에는 보이지 않지만 자바스크립트 엔진은 자바스크립트 함수를 실행할 때 제일 먼저 하나의 함수를 실행시킵니다.

Chrome 브라우저는 그 함수를 anonymous 함수로 표시합니다.

 

function a() {

  b();

}

function b() {

  console.trace();

}

a();

위 코드를 Chrome 브라우저에서 실행시켜 보겠습니다.

 

밑에서부터 실행된 함수

위 사진을 보시면 제일 먼저 anonymous 함수가 실행되고 a 함수 다음에 b 함수가 실행된 것을 확인할 수 있습니다.

이제 setTimeout 함수를 사용하여 비동기 함수는 어떤 방식으로 실행되는지 보겠습니다.

 

setTimeout(() => {

  console.log("hello");

}, 0);

이 setTimeout함수를 실행시키면 어떻게 동작되는지 이벤트 루프의 개념으로 알아보겠습니다.

 

위 그림처럼 먼저 호출스택에 anonymous 함수가 저장되고 그 위에 setTimeout 함수가 저장됩니다.

그 후에 위에서부터 차례대로 함수를 실행시킵니다.

 

setTimeout을 실행시켜 0초 타이머가 백그라운드에 저장되고 그 다음 함수인 anonymous를 실행시켜 호출 스택을 비웁니다.

여기서 주의해야 할 점은 0초라도 타이머이기 때문에 백그라운드에 저장이 된다는 점입니다.

 

0초 타이머이기 때문에 시간을 재지않고, 바로 콜백 함수인 console.log가 태스크 큐에 저장이 됩니다.

 

이벤트 루프가 호출 스택이 빈 것을 확인하고, 태스크 큐에 있는 console.log 함수를 호출 스택으로 이동시킵니다.

그 후 console.log는 호출 스택에서 실행되고 호출 스택에서 빠져나오게 됩니다.

이러한 동작원리를 통해 setTimeout함수의 0초 콜백함수가 바로 실행되지 않는 이유를 알 수 있습니다.