자바스크립트 엔진(Call Stack, Event Loop, …)

자바스크립트 엔진의 구조

• Memory Heap
  • 데이터(사용자가 작성한 코드)를 임시 저장하는 곳입니다.
    *Heap: 구조화 되지 않은 넓은 메모리 영역
• Call Stack
  • 한 줄 단위로 실행할 코드가 스택 형태로 쌓이는 영역입니다.
  • 비동기 함수는 바로 pop 되어 Web APIs로 보내집니다.

런타임

자바스크립트가 구동되는 환경(웹브라우저 또는 NodeJS)을 말합니다.

JS 엔진과 함께 Web APIs(NodeJs에서는 Background), Event Loop와 Callback Queue가 동작합니다.

• Web APIs
  • DOM, Ajax 요청, Timeout 등 웹브라우저에서 제공하는 기능들입니다.
  • 해당 요청들은 JS엔진이 아닌 다른 스레드에서 처리됩니다.
  • 비동기 처리를 담당합니다.
  • 처리가 완료되면 테스크 큐로 전달됩니다.
• Callback Queue
  • 비동기 처리가 끝난, 실행되어야 할 콜백 함수가 차례로 할당됩니다.
  • Task Queue(Event Queue) / Microtask Queue(Job Queue) / Animation Frames로 나뉩니다.
  • setTimeout의 경우 내부 코드 실행을 3초를 설정했다면, Callback Queue에 들어오는 시간이 3초 입니다. Call Stack이 비지 않는다면 그만큼 실행 시간도 지연됩니다.
• Event Loop
  • Queue에 할당된 함수를 확인하고 우선순위에 맞춰 CallStack이 비어있을 때 할당합니다.
  • 이벤트 루프에서 콜백 큐에서 탐색하는 우선순위는 다음과 같습니다.
    • Microtask Queue(Job Queue) > Task Queue(Event Queue) > Animation Frames

런타임의 동작 순서 예시

비동기 동작이 없는(콜스택으로만 동작) 경우

function first() {
	second();
	console.log("첫번째");
}
function second() {
	third();
	console.log("두번째");
}
function third() {
	console.log("세번째");
}

first();
third();

▶️ 출력 순서: 세번째 → 두번째 → 첫번째 → 세번째

 

비동기 동작이 있는(WebAPI, Callback Queue, Event Loop) 경우

console.log("시작");

setTimeout(function () {
	console.log("타임아웃");
}, 0);

Promise.resolve()
	.then(function () {
		console.log("프로미스");	
	}
);

console.log("끝");

▶️ 출력 순서: 시작 → 끝 → 프로미스 → 타임아웃

• 비동기는 콜스택에서 빠져나와 따로 처리되어 이벤트루프를 통해 우선순위에 따라 콜스택에 다시 할당됩니다.
  *Promise는 Microtask Queue, setTimeout은 Task Queue에 담기므로 우선순위가 높은 Promise 부터 콜스택에서 실행된다.
• 콜스택에 남아있는 동기코드들("시작", "끝") 비동기코드들보다 먼저 실행됩니다.

 

 

 

 

 

 

 

 

 

 

[참고자료]

[JavaScript] 비동기 작업의 원리 (JavaScript 엔진, Web API, Task Queue, Event Loop)

[이벤트 루프(1/2)] JS로 개발하는데 내부 동작을 모르면 곤란합니다 | 코드 실행 과정

[이벤트 루프(2/2)] 여러분은 이제 JS를 알게 됐습니다 | ㅊㅋㅊㅋ💕🎉