JavaScript의 Event Loop는 Runtime의 일부이며 Callback queue와 Call stack을 잇는 역할을 한다. 밑에서 좀 더 자세히 알아보도록 하자.

Runtime

JavaScript의 Runtime은 아래에 첨부된 이미지와 같다.

JavaScript Engine

자바스크립트의 엔진은 Heap과 Call stack으로 이루어져 있다.
대표적으로는 Google의 V8이 있다.

Heap

Memory heap이라고도 하며 객체가 저장되는 공간이다.
실행 컨텍스트는 이곳에 저장된 객체를 참조한다.

Call Stack

함수의 실행 컨텍스트가 추가되고 제거되는 LIFO(last in, first out) 스택이다.

자바스크립트는 Call stack이 하나이기 때문에 싱글 스레드single thread 언어이다.
따라서 한 가지의 일만 처리가 가능하기 때문에, task 수행 시간이 오래 걸리면 UI가 멈추게 된다.

그렇다면, 어떻게 비동기로 동작하는 것일까?

Web API

브라우저가 Web API를 제공해 준다. 이것이 우리가 non-block, 비동기 동작을 만드는 데 도움을 준다.
Web API에는 DOM, HttpRequest, setTimeout 등이 포함된다.

Callback Queue

Web API에서 callback 함수를 Callback queue에 전달한다.
즉시 실행되는 것이 아닌 Event loop에 의해 Call stack으로 이동되면 함수가 실행된다.

• Microtask Queue
  Promise의 콜백이 담기는 곳
  Event loop가 우선적으로 확인한다.

• Animation Frames
  requestAnimationFrame API의 callback이 담기는 곳
  브라우저 렌더링 스텝에서 repaint 이전에 호출됨이 보장된다.

• Task Queue

Event Loop

Call stack이 비어있을 때 (= 이전에 호출된 모든 함수들이 값을 반환하고 빠져나감) Callback queue의 첫 번째 요소를 Call stack에 추가한다.

이 반복 행동을 틱tick이라고 한다.

정리

❶ 함수가 실행되면 함수의 실행 컨텍스트Execution Context가 Call stack에 추가된다.
❷ setTimeout과 같은 함수들의 callback 함수가 Web API로 추가된다.
❸ 함수가 값을 return하면 Call stack에서 빠져나온다.
❹ Timer가 끝난 뒤 callback 함수가 Queue에 전달된다. (즉시 호출되는 것이 아님)
❺ Event loop가 Call stack이 비어있을 때 Queue의 첫 번째 callback을 Call stack에 추가한다.

이러한 과정 때문에 멀티 스레드처럼 보일 수 있는 것이다.