이벤트 루프(event loop)

이번에는 이벤트 루프에 대해서 알아보도록 하겠습니다.

 

1. 이벤트 루프란 무엇인가?

자바스크립트는 싱글 스레드 언어이기 때문에 코드를 순차적으로 실행합니다.

하지만, 실제로 사용자가 브라우저에서 보이는 작업들은 병렬적으로 처리되는 것처럼 보입니다.

이와 같이 처리하기 위해서 javaScript의 동시성을 띄도록 해주는 것이 이벤트 루프(event loop)입니다.

 

출처 : https://blog.sessionstack.com/how-does-javascript-actually-work-part-1-b0bacc073cf

 

위와 같은 환경에서 javaScript 엔진과 상호 연동하기 위해 사용되는 장치가 event loop이다.

event loop는 javaScript 엔진에서 제공되는 것은 아니고, 웹 브라우저나 node.js에서 지원합니다.

• javaScript Engine
  • javaScript에서 가장 유명한 엔진은 구글의 V8 엔진입니다.
  • Memory Heap : 정보를 저장하는 공간
  • Call Stack : 코드 실행에 따라 스택이 쌓이는 곳
    
    
• Task Queue(Callback Queue)
  • 비동기적으로 실행되는 콜백 함수가 보관되는 영역입니다.
  • ex ) setTiemOut , Promise
    
    
• event loop
  • Call Stack과 Task Queue의 상태를 체크하며 Call Stack이 빈 상태가 되면 Task Queue의 첫번째 콜백을 Call Stack에 등록한다.
  • 이 작업을 틱(tick)라고 합니다.

javaScript는 싱글 스레드 언어 인데 어떻게 비동기 작업을 하지??
- javaScript의 Call Stack이 하나이므로 javaScript만 으로는 싱글 스레드 언어가 맞다.
- 하지만 javaScript만 실행되는 것이 아니라, 웹 브라우저나 node.js 같은 멀티 스레드 환경에서 실행되기 때문에
비동기 작업이 가능하다.

 

2. Microtask Queue

ES6가 들어오면서 Microtask Queue가 도입되었습니다.

ES6 이전에는 Task Queue에 setTimeOut, Promise 의 비동기 호출이 모두 쌓였지만,

이제는

Task Queue - setTimeOut

Microtask Queue - Promise

위와 같이 쌓이게 되었습니다.

실행 순서는 Microtask Queue -> Task Queue 순입니다.

※ Animation Frames 라는 개념도 있지만 이번 글에서는 다루지 않도록 하겠습니다.

 

예제를 통해 실행 순서를 확인 해 보도록 하겠습니다.

 

const func = () => {
  console.log("계속해서"); // call stack
  return new Promise((res) => {
    res("두치의"); 
  });
};

const temp = func();

console.log("공부하는"); // call stack

setTimeout(() => {
  console.log("개발 인생"); // task queue
}, 1000);

temp.then((data) => {
  console.log(data); // microtask queue
});

결과는 계속해서 공부하는 두치의 개발 인생 입니다!