JavaScript
싱글 스레드 기반의 언어thread
작은 단위의 실행 흐름위에서 확인한 것처럼 자바스크립트 엔진은 단일 Call Stack으로 요청이 들어온 순서대로 한 가지 일만을 수행한다.
setTimeout
과 같은 비동기 요청은 자바스크립트 엔진을 구동하는 런타임 환경에서 담당한다.
브라우저의 경우 setTimeout을 예로 들면, Call Stack에서 Web API setTimeout 요청 이후 제거된다.
Web API에서 setTimeout이 완료되면 setTimeout callback 함수를 Callback Queue로 옮긴다.
현재 실행한 자바스크립트 코드를 모두 실행한 뒤, Event Loop가 지속적으로 Call Stack이 비어있는지 확인하고, 비어있다면 Callback Queue에 있는 작업 순서대로 Call Stack으로 넘겨 실행하도록 만든다.
// 1번
let num = 1;
// 2번
setTimeout(() => {
num = 2;
}, 0);
// 3번
num = 3;
// 4번
console.log(num);
num
에 1이 할당된다.setTimeout
을 Web API(NodeJS의 경우 Timers 모듈)가 처리하도록 넘긴다. 이 때, 즉시 setTimeout
에 있는 callback을 실행할지 판단하지 않는다. 따라서 num
은 여전히 1인 상태이다.setTimeout
작업이 완료되면 setTimeout
callback 함수를 Callback Queue에 등록한다.num
에 3이 재할당된다.num
은 2가 재할당된다.참고 자료
- Node.js 이벤트 루프, 타이머, `process.nextTick()` | Node.js
- Philip Roberts: Help, I’m stuck in an event-loop. on Vimeo
- 어쨌든 이벤트 루프는 무엇입니까? | Philip Roberts | JSConf EU - YouTube
- How JavaScript works: an overview of the engine, the runtime, and the call stack | by Alexander Zlatkov | SessionStack Blog | Medium
- How JavaScript works: Event loop and the rise of Async programming + 5 ways to better coding with async/await | by Alexander Zlatkov | SessionStack Blog | Medium
- 이벤트 루프와 매크로태스크, 마이크로태스크
- 코드잇 제공 자료