[Javascript] 이벤트 루프 동작과정에 대한 이해

이벤트 루프(Event Loop)

이벤트 루프란 자바스크립트 엔진이 아닌, 구동하는 환경(브라우저, 노드)에서 가지고 있는 장치이다.

Call Stack과 Callback Queue를 감시하며, Call Stack이 비어있을 경우 Callback Queue에 담긴 콜백함수를 Call Stack에 넣어 실행시키는 역할을 한다.

 

아래 예시를 보자.

console.log('시작');

setTimeout(function() {
    console.log('중간');
}, 0);

Promise.resolve()
    .then(function() {
        console.log('프로미스');
    }
);

console.log('끝');

 

위의 코드의 호출 순서는 어떻게 될까?

'시작' -> '끝' -> '프로미스' -> '중간'

 

이유를 알아보자.

 

자바스크립트 런타임은 여러가지로 구성되어 있는데 주요 키워드를 보자면 다음과 같다.

Call Stack

Web APIs

Callback Queue

https://iamsjy17.github.io/assets/img/howtoworksjs/eventloop.png

 

Call Stack

콜 스택에는 바로 처리할 수 있는 것들(console.log)은 바로 처리를 한다.

하지만 비동기 함수들을 만나면 해당 비동기 함수들을 Web APIs 공간으로 보낸다.

Web APIs

위 예시에서는 Web APIs 공간에 비동기인 setTimeout, Promise가 들어가 있을 것이다.

둘 중 어느 것이 더 빨리 끝날지는 모르겠지만 끝나는 순서대로 Callback Queue 공간으로 이동된다.

Callback Queue

Callback Queue 공간에 있는 것들은 Call Stack 내부가 비어 있을 때 Call Stack으로 이동을 하게 된다.

Callback Queue에서 Call Stack으로 이동할 때는 우선순위가 존재한다.

 

Callback Queue 공간에 들어갈 수 있는 것들은 여러 종류로 세 종류로 나뉜다.

1. Task Queue(Event Queue)
2. Microtask Queue(Job Queue)
3. Animation Frames

 

Task Queue(Event Queue)

setTimeout, setInterval, setImmediate 등과 같은 비동기 함수의 콜백 함수, 이벤트 핸들러가 일시적으로 보관되는 영역이다.

 

Microtask Queue(Job Queue)

Promise 등이 보관되는 영역이다.

 

Animation Frames

추가 작성 예정

 

위 세 가지의 우선순위가 높은 순으로 나타내면 다음과 같다.

Microtask Queue -> Animation Frames -> Task Queue

 

만약 Microtask Queue 리소스 2개, Task Queue 리소스가 1개가 Callback Queue에 존재한다면 우선순위로 인해 Microtask Queue, Task Queue 순으로 Call Stack으로 이동한다.

그리고 Microtask Queue 리소스들간의 순서는 Callback Queue에 들어온 순서대로 Call Stack을 이동한다.

 

 

 

위의 예시에서는 setTimeout은 Task Queue, Promise는 Microtask Queue에 해당한다.

따라서 실행 결과는 '시작' -> '끝' -> '프로미스' -> '중간'이 된다.