이벤트 루프

이벤트 루프

어떤 작업이 발생하여 이벤트 발생 시 내부에서 호출되는 함수들을 태스크 큐(Task Queue)에 전달하고, 콜 스택(Call Stack)에 쌓여있는 함수가 없을 때, 태스크 큐(Task Queue)에 담겨있는 함수들을 콜 스택(Call Stack)으로 넘겨줍니다.
이러한 이벤트 루프를 제공함으로써, 자바스크립트는 싱글 스레드지만, 비동기 방식으로 동시성을 지원합니다.

자바스크립트 언어에는 이벤트 루프가 없고 자바스크립트 런타임 환경을 제공하는 브라우저, Node가 담당한다.

이벤트 루프 동작

setTimeout을 하는 순간 백그라운드를 걸쳐 태스크 큐로 갑니다.
아래 순서를 봐보자.

const start = () => console.log('2');
console.log('1');
setTimeout(start, 3000);
console.log('3');

// 1 => 3 => 2

처음에 "시작"이 콜 스택에 들어갔다가 빠진 뒤 => setTimeout이 들어가서 백그라운드로 들어간 뒤(콜 스택에서 빠짐) => 호출 스택에는 "끝"이 들어갑니다. => 3초 뒤 태스크 큐로 보냅니다.

const start = () => console.log('2');
console.log('1');
setTimeout(start, 0);
console.log('3');

// 1 => 3 => 2

setTimeout이 0초라고 해도 동작은 같습니다. 결국 백그라운드로 넘어가면서 "끝" 이 먼저 콘솔에 찍히고 동작합니다.
(사실 setTimeout은 4ms 가 min...)