Event Loop (이벤트 루프)

해당 글은 모든 자바스크립트 개발자가 알아야 하는 33가지 개념에서 아홉 번째인 Message Queue and Event Loop 항목을 공부하면서 간단하게 작성한 글이다.

 

Callback Queue(콜백 큐)

 

Web APIs의 비동기 요청들의 결괏값을 저장하는 공간이다. 예를 들어, setTimeout(remove, 1000)을 호출하면 Web APIs에서 타이머를 실행시키고 1초 후, Callback Queue에 remove 함수를 넣는다.

 

이벤트 루프

 

이벤트 루프가 하는 일은 단순하다. 계속해서 Call Stack과 Callback Queue를 주시해서 만약 Call Stack이 비어있다면 Callback Queue의 첫 번째 함수를 가져와서 Call Stack에 넣는다.

console.log("Start");

setTimeout(function foo1(){
  console.log("After 2 sec");
}, 2000);

console.log("End");

// "Start"
// "End"
// "After 2 sec"

만약 setTimeout에서 delay를 0초로 하면 어떻게 될까?

console.log("Start");

setTimeout(function foo1(){
  console.log("After 0 sec");
}, 0);

console.log("End");

// "Start"
// "End"
// "After 0 sec"

결과는 똑같다. 0초로 해도 즉시 실행되는 것이 아니라 마지막에 실행이 됐다. foo1이 0초 후 바로 CallBack Queue에 들어갔지만 Call Stack에 비어있는 상태가 아니다. 그러므로 Call Stack이 비어있을 때까지 기다린 후 foo1이 실행된다.