본문 바로가기
Computer Science/JavaScript

자바스크립트 Chapter 9 Message Queue and Event Loop

by Write and Remember 2019. 4. 28.

 

자바스크립트 핵심 컨셉 33가지

 

Chapter 9 Message Queue and Event Loop

 

The Call Stack

 

자바스크립트 엔진에는 현재 실행 중인 함수와

 

그 이후에 실행될 함수를 추적하는

 

스택(Stack: LIFO) 구조인 단일 호출 스택(Single Call Stack)과

 

Heap 영역이 있다.

 

함수를 실행하려고 하면 Call Stack에 추가된다.

 

그런 다음 해당 함수가 다른 함수를 호출하면 

 

다른 함수가 Call Stack의 첫 번째 함수 위에 온다.

 

The Event Table(Web API)

 

setTimeout 함수를 호출하거나 비동기(ajax 등) 연산을 수행할 때마다 Event Table에 추가된다. 

 

특정 이벤트가 발생한 후에 특정 함수가 유발되어야 한다는 것을 알고 있는 데이터 구조이다. 

 

이벤트 테이블은 함수를 실행하지 않으며 자체적으로 Call Stack에 추가하지 않는다. 

 

이벤트를 추적하여 Message Queue(Task Queue)로 보내는 것이 유일한 목적이다.

 

Message Queue(Task Queue)

 

큐(Queue: FIFO) 데이터 구조이고

 

함수가 실행되어야 하는 올바른 순서를 저장한다.

 

The Event Loop

 

Call Stack이 비어 있는지 끊임없이

 

검사하는 프로세스이다.

 

Call Stack이 비어있으면 Message Queue을 보고

 

Message Queue에 항목이 있다면 Call Stack으로 이동한다.

 

setTimeout(() => console.log('first'), 0)
console.log('second')
// second 그다음 first

 

setTimeout이 호출되면 Event Table에 추가한다.

 

타이머를 시작하고, 타이머가 만료되면

 

callback function이 Message Queue에 저장이 된다.

 

Event Loop는 Call Stack이 비어있다면, Message Queue에 있는 callback function을

 

Call Stack에 추가한다.

 

위의 예제가 바로 Node 혹은 Browser에서 이루어지는 비동기 플로우이다.

댓글0