JS NORMAL | 이벤트 루프

동기 / 비동기 글에서 작성했듯이,자바스크립트는 싱글쓰레드 언어이기 때문에 한 번에 하나의 작업만 실행하고, 그렇기에 오래 걸리고 반복적인 작업은 브라우저 내부의 멀티 스레드인 Web APIs에서 처리된다.

💻 이벤트 루프

멀티 스레드 작업과 어떤 작업을 우선으로 처리할 건지 결정하는 컨트롤을 하기 위해 이벤트 루프를 사용한다. 이벤트 루프는 자바스크립트의 런타임 모델로서, 코드의 실행, 이벤트의 수집과 처리, 큐에 대기 중인 하위 작업을 처리하는 역할을 한다. 즉, 브라우저의 동작 타이밍을 제어하는 관리자이다.

브라우저의 내부 구조

Javascript Engine: Heap와 Call Stack로 구성
Heap: 변수, 함수 선언 시 메모리 할당이 일어나는 공간
Call Stack: 자바스크립트 엔진이 코드 실행을 위해 사용하는 메모리 구조로 LIFO (LAST IN FAST OUT)

WebAPIs: 브라우저에서 제공하는 API로 비동기적으로 실행되는 작업들을 전담하여 처리한다. DOM, Ajax, 타이머 함수 등이 있다. Callback 함수를 Callback Queue에 넣는다.

Callback Queue: 비동기적으로 실행되는 콜백 함수가 대기하는 공간으로 FIFO (FIRST IN FIRST OUT) Task Queue와 Microtask Queue를 합쳐서 콜백 큐라고 부른다.

Event Loof: 비동기 함수를 적절한 시점에 실행시키는 관리자로, 틱(tick) 동작을 한다.

---

이벤트 루프 동작 과정

function a() {
  setTimeout(() => {
  	console.log("Second")
  }, 500);
}

function b() {
  console.log("First");
}

function c() {
  console.log("Third");
}

bar();
foo();
baz();

1. a() 함수가 호출된다.
2. setTimeout() 함수가 호출되어 Callback Queue에 쌓인다.
3. setTimeout() 함수의 콜백 함수를 Timer Web API에 전달한 후 백그라운드로 500 밀리초를 센다.
4. b() 함수가 호출되고 실행된다.
5. 대기시간이 종료되며 콜백 함수를 Task Queue로 옮긴다.
6. c() 함수가 호출되고 실행되면 스택에 있는 모든 메인 자바스크립트 코드가 실행 완료 되어 Call Stack이 비워지게 된다.
7. 이벤트 루프가 이를 탐지하여 Task Queue에 있는 콜백 함수를 다시 Call Stack으로 옮긴다.
8. Call Stack에서 콜백 함수 코드를 실행한다.

출처: JavaScript Visualized: Promises & Async/Await
자바스크립트 이벤트 루프 동작 구조 & 원리 끝판왕