Event Loop

자바스크립트의 특징 중 하나는 Single-Thread 이다. 한 번에 하나의 Task만 처리가 가능합니다. 하지만 자바스크립트를 이용해 동시성을 지원하는 웹 서비스를 구현해 본 경험이 있을것입니다. 동시성을 제공하기 위해 EventLoop를 이용하는데, 자바스크립트와 이벤트루프의 관계에 대해 정리해보겠습니다.

---

EventLoop !== Javascript

이벤트루프는 *ECMAScript 스펙이 아닙니다. 브라우저는 자바스크립트를 실행하기 위해 V8 엔진을 사용하고, V8엔진은 Heap, Call-Stack으로 구성되어 있습니다. 그리고 위에 언급한 동시성을 제공하는 주체는 곧 자바스크립트를 실행하는 브라우저입니다.

• V8 엔진은 힙과 콜스택을 이용해 한 번의 하나의 Task를 처리합니다.
• 브라우저 또는 Node.js 환경을 이용해, JS 동시성을 제공합니다.

아래 예제를 이용하여 V8엔진과 브라우저의 상호동작을 이해 할 수 있습니다.

function func() {
	console.log('first');
	setTimeout(() => console.log('second'), 0);
	console.log('third');
}

func();

-- 호출순서 --
// first
// third
// second

1. func 함수 호출시, 메모리 힙에 const func = function() {} 할당됩니다.
2. func 함수는 실행컨텍스트에 따라 Call-Stack에 올라가고, 비워집니다.
3. console.log('first'); 함수 호출시, 위와 같이 Call-Stack에 올라가고 비워집니다.
4. setTimeout(() => console.log('second'), 0); 함수 호출시, Call-Stack에 올라갑니다.
   4-1. 브라우저에서 제공하는 WebAPI 중 하나인 setTimeout 함수를 호출했기 때문에, () => console.log('second') 매개변수로 전달된 콜백영역이 Callback-Queue 로 전달됩니다.
   4-2. Event Loop는 Call-Stack, Callback-Queue를 계속 확인하며, Call-Stack이 비었을 때 점유하도록 대기합니다.
5. console.log('third'); 함수 호출시, 위와 같이 Call-Stack에 올라가고 비워집니다.
6. 4-2에서 Event Loop가 대기하고있고, 5번 과정 후 Call-Stack이 점유되지 않음을 확인하고 Callback-Queue에 대기중인 콜백함수를 올립니다.
7. console.log('second'); 함수가 Call-Stack에 올라가고 비워집니다.
8. 위의 과정을 반복합니다.

정리

자바스크립트의 *런타임 환경은
브라우저 + Node.js의 내장 라이브러리(EventLoop)를 사용할 수 있는 환경입니다.

• 브라우저: DOM + BOM + WebpAPI 제공
• Node.js: Callback-Queue, EventLoop 제공
• V8: Memory Heap + Call-Stack

ES6+ 환경

[MicroTask Queue]

es6 에서부터 micro task Queue 가 추가되었습니다. 프로미스 비동기 호출시 MicroTaskQueue에 쌓이며, 일반 Task보다 높은 우선순위를 가지고 있습니다.

[Animation Frames]

RequestAnimationFrame 에 의해 등록되는 AnimationFrame 이며,
Micro > Animation > 일반 Task 우선순위를 가지고 있습니다.
(*하지만 브라우저마다 호출 순서가 조금 다를수있습니다)

---

*ECMAScript는 W3C에서 정의한 언어적 표준이고, Javascript는 그 표준을 따르는 언어이다. ECMA는 세종대왕이 창제한 표준어이고, Javascript는 그 표준을 따라 만든 방언이라고 볼수있다. Javascript는 ECMA 표준스펙을 준수하는 스크립트 언어이다.

*런타임 환경
런타임이란 '특정 언어로 만든 프로그램을 실행할 수 있는 환경, 특정언어가 실행되고있는 환경' 이다.