(JS) 이벤트 루프(event loop)와 태스크 큐(task queue)

자바스크립트의 특징 중 하나는 싱글 스레드로 동작한다는 것이다.

하지만 브라우저를 보면 HTML 요소가 애니메이션 효과를 통해 움직이면서 이벤트를 처리하기도 하고,

HTTP 요청을 통해 서버로부터 데이터를 가지고 오며 렌더링하기도 하는 등 태스크들을 동시에 하는 것처럼 느껴진다.

 

이처럼 자바스크립트의 동시성(concurency)를 지원하는 것이 이벤트 루프(event loop)이다.

이벤트 루프는 태스크 큐(task queue)를 통해 자바스크립트의 동시성을 보장한다.

 

• 태스크 큐 : 비동기 함수(setTimeout, setInterval 등)같은 비동기 함수의 콜백 함수 등이 일시적으로 보관되는 영역이다.
• 이벤트 루프 : 콜 스택에 실행중인 실행 컨텍스트가 있는지, 태스크 큐에 대기중인 함수가 있는지 반복해서 확인하며, 만약 콜 스택이 비어있고, 태스크 큐에 대기중인 함수가 있다면 이벤트 루프는 순차적으로 태스크 큐에 대기중인 함수를 콜 스택으로 이동시킨다.

 

아래 코드를 보자.

foo 함수와 bar 함수 중에서 먼저 실행될 함수는 무엇일까?

function foo() {
    console.log('foo');
}

function bar() {
    console.log('bar');
}

setTimeout(foo, 0);
bar();

bar가 먼저 나오고 foo가 나온다.

코드 설명

1. 일단 setTimeout이 먼저 실행컨텍스트에 올라간 뒤, 콜백함수를 호출 스케쥴링 한 후 콜스택에서 사라진다.
   (함수상에서는 0ms 후 콜백함수 foo가 태스크 큐에 푸시되고 setTimeout이 실행컨텍스트에서 사라지지만, 지연시간이 4ms 이하인 경우 최소 지연 시간 4ms가 지정된다. 따라서 4ms 이후 콜백 함수 foo가 태스크 큐에 푸시된다.)
2. 하지만 태스크큐와 실행컨텍스트는 별도의 공간이다. setTimeout이 실행컨텍스트에서 팝되면, 바로 bar()가 실행 컨텍스트에 올라가서 실행된다.
3. 따라서 bar가 먼저 출력되고, foo는 근소한 차이로 늦게 출력된다. (태스크큐에서 대기하는 최소시간)