[TIL] 이벤트 루프

📌 이벤트 루프(Event Loop)

이벤트 발생시 호출되는 콜백 함수들을 관리하여 콜백(태스크큐, 이벤트큐)에 전달하고, 콜스택이 비어있을 때 콜백큐의 첫번째 콜백을 콜스택으로 보내준다.
-> 자바스크립트의 동시성(concurrency)을 지원

💡 왜? 싱글스레드 기반의 언어인 자바스크립트가 많은 작업을 동시에 처리할 수 있도록 해주기 위함.
💡 싱글스레드: 한번에 하나의 작업만을 처리할 수 있음.

📌 자바스크립트 엔진

메모리 힙(Memory Heap)과 콜스택(Call Stack)으로 구성됨.

💡 메모리 힙: 메모리 할당(선언한 변수, 함수 등이 담겨 있음)이 일어나는 영역
💡 콜스택: 코드가 실행됨에 따라 호출 스택이 쌓이는 영역

📌 런타임 환경

자바스크립트에는 이벤트 루프가 없다. 비동기 요청은 자바스크립트 엔진을 구동하는 런타임 환경(브라우저 또는 Node.js)이 담당.

💡 런타임 환경이 제공하는 것

• Web APIs (DOM, AJAX, Timeout..)
• Event Loop

📌 과정

1. 코드가 스택에 쌓이고 실행되면 자바스크립트 엔진은 Web API에 비동기 작업(Ajax 요청, setTimeout, 이벤트리스너 등..)을 맡긴다.

2. Web API는 자신에게 주어진 작업을 수행하고, 콜백함수를 태스크큐(콜백큐)에 준다.
   -> 콜백큐(Callback Queue): Web API의 콜백함수들이 대기하는 큐

3. 이벤트루프는 콜스택에 쌓인 일이 없을 때 태스크큐(콜백큐)에서 대기하고 있는 콜백함수를 스택에 넘겨준다.

4. 콜스택에 쌓인 콜백함수가 실행되고, 이는 콜스택에서 제거된다.

📌 예제

console.log('Hi')

setTimeout(function sayHiAgain(){
	console.log('Hi, again')
}, 2000)

console.log('Bye')

1. Call Stack에 console.log('Hi')가 추가되고, 실행된 뒤 Call Stack에서 제거된다.

2. setTimeout(function sayHiAgain(){...})이 Call Stack에 추가되고, 실행되면서 Web API에 sayHiAgain의 타이머가 생성된다. 그리고 setTimeout(sayHiAgain(){...})는 Call Stack에서 사라진다.

3. Call Stack에 console.log('Bye')가 추가되고, 실행된 뒤 Call Stack에서 제거된다.

4. 2초뒤, 타이머가 종료되고 비어있는 Callback Queue에 sayHiAgain을 보낸다.

5. Event Loop는 sayHiAgain을 Callback Queue에서 Call Stack으로 보낸다.

6. sayHiAgain은 실행되고, console.log('Hi, again')은 Call Stack에 추가된 뒤 실행되고, Call Stack에서 제거된다.

7. sayHiAgain이 Call Stack에서 제거된다.

📌 참고자료

💡 How JavaScript works: an overview of the engine, the runtime, and the call stack

💡 What the heck is the event loop anyway? | Philip Roberts | JSConf EU

💡 How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with async/await