[JavaScript] 이벤트 루프(Event Loop)

이벤트 루프(Event Loop)

단일 쓰레드는 쓰레드가 하나 뿐이라는 의미여서 이 말은 곧 하나의 작업만을 처리할 수 있다는 것을 의미한다 하지만 실제로 동작하는 웹 애플리케이션은 많은 task가 동시에 처리되는 것처럼 느껴진다. 이처럼 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프이다.

---

Javascript Engine

* Call Stack

함수가 요청되면 요청된 작업은 순차적으로 stack에 쌓이게 되고 순차적으로 실행됨

단 하나의 Call Stack을 사용하기 때문에 해당 task가 종료하기 전까지는 다른 어떤 task도 수행될 수 없음

⇒ 자바스크립트 엔진은 단순히 stack에 적재하고 실행하는 역할만 함

비동기 요청 처리는 브라우저(or Node.js)가 담당❗

* Heap

동적으로 생성된 객체 인스턴스가 할당되는 영역

* Event Queue(Task Queue)

비동기 처리 함수의 콜백 함수, 비동기식 이벤트 핸들러, Timer 함수의 콜백 함수가 보관되는 영역
Call Stack이 비었을 때, 순차적으로 Call Stack으로 이동되어 실행됨

* Web API

웹 브라우저에서 개발된 API로 timer나 DOM Event 등이 있음

 

* Event Loop

Call Stack 내에서 실행 중인 task가 있는지, Event Queue에 task가 있는지를 반복적으로 확인하여 Call Stack이 비었을 때, Event Queue에 task가 있다면 task를 이동시키고 이 task가 실행되게 됨

---

Example

function firstFunc() {
  console.log('first!');
  secondFunc();
}

function secondFunc() {
  setTimeout(function () {
    console.log('second!');
  }, 0);

  thirdFunc();
}

function thirdFunc() {
  console.log('third!');
}

firstFunc();

 

1. 함수가 호출되는 순서대로 Call Stack에 쌓이게 된다. 

2. setTimeout이 호출되면 setTimeout의 callback 함수는 즉시 실행되지 않고 지정한 시간만큼 대기한다.

3. 시간이 만료되면 event가 발생하고 callback 함수가 Event Queue로 이동한다.

4. 이후, Call Stack이 모두 비었을 때, Call Stack으로 이동되고 실행되게 된다.