Event Loop

function a(){
    setTimeout(function(){
        console.log("first");
    }, 0);

    for(let i=0; i<100000; i++){}

    console.log("second");

}

a();

Q. 왜 second → first의 순서로 작동이 되는가?

A. Event Loop 때문이다.

자바스크립트는 싱글 스레드(single-thread)이다. 그렇다면 하나의 스레드밖에 없기 때문에 한 번에 한 동작만 실행될 수 있다고 생각할 수 있으나, 그렇지 않다. 우리가 흔하게 볼 수 있는 웹페이지를 몇 개만 둘러봐도 마우스 클릭을 하면 애니메이션 효과도 보여주고 동시에 마우스 클릭 이벤트를 처리하는 페이지들을 심심찮게 볼 수 있다. 이것이 바로 자바스크립트의 동시성(Concurrency)이다.

그렇다면 자바스크립트의 동시성을 어떻게 지원하는가?라는 궁금증이 들게된다. 이때 등장하는 중요한 개념이 바로 이벤트 루프(Event Loop)이다.

V8

이벤트 루프를 설명하기 전에, V8에 대해 간단하게 설명하고자 한다. V8은 자바스크립트를 동작할 수 있게 하는 자바스크립트의 대표적인 엔진으로, 크롬, node 등에서 사용 중이다.

→ 자바스크립트의 동작원리 = 자바스크립트 엔진(V8(크롬, node에서 사용) 등)

자바스크립트의 구조

위 그림은 자바스크립트의 구조를 나타내는 사진이다.

Heap&Call Stack

방금 언급한 V8과 같은 자바스크립트 엔진의 구성요소이다.

Heap : 자바스크립트의 객체의 주소값, 구조화되지 않은 메모리 영역이 쌓인다.
Call Stack : 일반적으로 우리가 호출하는 함수들이 쌓인다.

Web API

Web API : 브라우저에서 제공되는 API. 비동기 작업을 실행하며 결과를 Task Queue에 넘겨준다.

Task Queue

Task Queue : Stack이 비어있어야 실행된다. 그전까지는 Event Loop를 돈다.

여기서 정말 중요한 개념이 나왔다. Task Queue는 Stack이 비어있기 전까지 Event Loop를 돌며 Stack이 비었나 확인한다. 비어있지 않으면 Queue 안의 API들을 내보내지 않는다.

아래 코드는 MDN에서 제공하는 Event Loop의 가상코드이다.

while (queue.waitForMessage()) {
    queue.processNextMessage();
}

아까 처음 나온 코드로 이 개념을 적용해서 설명하면 아래처럼 된다.

function a(){
        setTimeout(function(){
            console.log("first");
        }, 0);

        for(let i=0; i<100000; i++){}

        console.log("second");

    }

a();