자바스크립트 런타임 & 이벤트 루프 (MDN)

 

 

자바스크립트는 이벤트 루프(event loop)에 기반해서 만들어진 동시성 모델(concurrency model)로 C와 JAVA 같은 언어들과는 좀 다르다. 웹 개발자들은 사용자에게 좀 더 매끄러운 브라우징 경험을 제공하기 위해 이벤트 루프를 사용한다.

 

Concurrency model and the event loop

---

자바스크립트의 런타임

 

이미지 출처 : MDN Concurrency model and the event loop

 

스택 (Stack)

아래 코드를 실행할때 스택 내부의 변화를 살펴보자. 

 

function foo(b) {
  let a = 10
  return a + b + 11
}

function bar(x) {
  let y = 3
  return foo(x * y)
}

console.log(bar(7)) //returns 42

 

 

먼저 bar를 호출한다. 그러면 bar의 인자들과 지역변수를 가진 frame이 생성된다.

bar 내부에서 foo를 호출하면 foo의 인자와 지역 변수들을 포함하는 두 번째 frame이 첫 번째 프레임 위에 생성된다. 

 

foo가 리턴을 하면 가장 위에있던 frame은 스택에서 pop 되어 사라지고 bar가 호출한 프레임만 남는다.

bar가 리턴을 하면 모든 스택이 텅텅 비게 된다.

 

힙 (Heap)

오브젝트들은 메모리의 힙이라 불리는 넓은 영역에 할당된다.

 

큐(Queue)

 

자바스크립트 런타임은 메시지 큐를 사용한다. 이는 처리되어야 하는 메세지들의 리스트이다.

각 메세지들은 할당된 함수를 갖고 있다.

 

이벤트 루프의 어떤 지점에서 런타임은 가장 오래된 것들부터 큐의 메시지들을 처리해나가기 시작한다.

 

큐에서 메세지가 제거되면 해당하는 함수가 호출된다. 알다시피 함수를 호출하면 스택에는 새로운 프레임이 생긴다. 이 과정을 스택이 완전히 빌 때까지 계속한다. 스택이 텅 비면 이벤트 루프는 큐의 다음 메시지를 처리한다.

 

---

Event loop

 

웹 브라우저에서 이벤트가 발생하면 메세지가 추가된다. 

 

setTimeout 함수는 큐에 추가될 메세지와 시간 값(밀리초)을 인자로 갖는다. 이 시간 값은 메시지가 실제로 큐에 푸시되고 난 후로부터의 딜레이를 의미하기 때문에 딜레이 되는 최솟값을 의미한다. 만약 큐에 다른 메세지가 없고 스택도 비어있다면 이 메시지는 정확히 우리가 입력한 시간 후에 처리될 것이다. 하지만 다른 메세지가 큐에 존재한다면 setTimeout의 메시지는 다른 메시지가 먼저 처리되길 기다리고 딜레이 시간은 지정한 것보다 길어진다.

 

만약에 딜레이 시간을 0으로 하면 해당 함수가 실행되는 건 큐에 얼마나 메세지가 있는가에 따른다.

 

console.log('First message!');
setTimeout(() => {
   console.log('This message will always run last...');
}, 0);
console.log('Second message!');

 

딜레이를 0으로 했기 때문에 메세지가 순서대로 출력될 것 같아 보이지만 결과는 다음과 같다.