Q. 이벤트 루프

코어 자바스크립트 책을 읽고 정리하였습니다.

---

이벤트 루프를 알아보기 전에..👀

<< 자바스크립트는 싱글 스레드로 동작한다 >>

• 자바스크립트를 공부할 때, 위의 말을 자주 듣게 된다.

• 싱글 스레드는 방식은 한 번에 하나의 태스크만 처리할 수 있다!
  하지만 브라우저가 동작하는 것을 살펴보면 많은 태스크가 동시에 처리되는 것처럼 느껴진다.
  (➡ HTML 요소가 애니메이션 효과를 통해 움직이면서 이벤트를 처리하기도 하고,
  HTTP 요청을 통해 서버로부터 데이터를 가지고 오면서 렌더링 하기도 한다.
  이처럼 자바스크립트의 동시성을 지원하는 것이 바로 이벤트 루프다.)

• 싱글 스레드 방식으로 동작하는 것은 브라우저가 아니라 브라우저에 내장된 자바스크립트 엔진이라는 것에 주의하자.
  ➡ 자바스크립트 엔진은 싱글 스레드로 동작하지만, 브라우저는 멀티 스레드로 동작한다!

---

자바스크립트 엔진 ❓

자바스크립트 엔진은 크게 2개의 영역으로 구분할 수 있다.

1. 📌 콜 스택

   함수를 호출하면 함수 실행 컨텐스트가 순차적으로 콜 스택에 푸시되어 순차적으로 실행된다. 자바스크립트 엔진은 단 하나의 콜 스택을 사용하기 때문에 최상위 실행 컨텍스트가 종료되어 콜 스택에서 제거되기 전까지는 다른 어떤 태스크도 실행되지 않는다.

2. 📌 힙

   힙은 객체가 저장되는 메모리 공간이다.
   메모리에 값을 저장하려면 먼저 값을 저장할 메모리 공간의 크기를 결정해야 한다. 객체는 원시 값과는 달리 크기가 정해져 있지 않으므로 할당해야 할 메모리 공간의 크기를 런타임에 결정(동적 할당)해야 한다. 따라서 객체가 저장되는 메모리 공간인 힙은 구조화되어 있지 않다는 특징이 있다.

➡ 콜 스택과 힙으로 구성되어 있는 자바스트립트 엔진은 단순히 태스크가 요청되면 콜 스택을 통해 요청된 작업을 순차적으로 실행할 뿐이다.

---

브라우저가 태스크 큐와 이벤트 루프를 제공한다 🎉

• 비동기 처리에서 소스코드의 평가와 실행을 제외한 모든 처리는 자바스크립트 엔진을 구동하는 환경인 브라우저 또는 Node.js가 담당한다. 이를 위해 브라우저 환경은 태스크 큐와 이벤트 루프를 제공한다. (➡ 자바스크립트의 동시성을 지원! )

1. 📌 태스크 큐

   setTimeout이나 setInterval 과 같은 비동기 함수의 콜백 함수 또는 이벤트 핸들러가 일시적으로 보관되는 영역이다.

2. 📌 이벤트 루프

   콜 스택에 현재 실행중인 실행 컨텍스트가 있는지, 그리도 태스크 큐에 대기 중인 함수(콜백함수, 이벤트 핸들러 등)가 있는지 반복해서 확인한다.
   ➡ 만약 콜 스택이 비어있고 태스크 큐에 대기 중인 함수가 있다면 이벤트 루프는 순차적(FIFO)으로 태스크 큐에 대기 중인 함수를 콜 스택으로 이동시킨다.

---

예제를 통해 확인하기🔎

➡ foo(), bar() 실행 순서 확인하기

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

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

setTimeout(foo, 0);
bar();

1. 전역 코드가 평가되어 실행 컨텍스트가 생성되고 콜 스택에 푸시된다.

2. 전역 코드가 실행되기 시작하여 setTimeout 함수가 호출된다.
   이때 setTimeout 함수의 함수 실행 컨텍스트가 생성되고, 콜 스택에 푸시되어 현재 실행중인 실행 컨텍스트가 된다. 브라우저의 Web API인 타이머 함수도 함수이므로 함수 실행 컨텍스트를 생성한다.

3. setTimeout 함수가 실행되면 콜백 함수를 호출 스케줄링하고 종료되어 콜 스택에서 팝 된다.
   이때 호출 스케일링, 즉 타이머 설정과 타이머가 만료되면 콜백 함수를 태스크 큐에 푸시하는 것은 브라우저의 역할이다.

4. 브라우저가 수행하는 4-1과 자바스크립트 엔진이 수행하는 4-2는 병행 처리된다.

   4-1. [브라우저]
   ➡ 브라우저는 타이머를 설정하고 만료를 기다린다. 이후 타이머가 만료되면 콜백 함수 foo가 태스크 큐에 푸시된다.
   ✳ 위 예제의 경우 지연시간이 0 이지만 지연 시간이 4ms 이하인 경우 최소 지연 시간 4ms가 지정된다. 따라서 4ms 후에 콜백 함수 foo가 태스크 큐에 푸시되어 대기한다. 이 처리 또한 자바스크립트 엔진이 아니라 브라우저가 수행한다.
   ✳ 이처럼 setTimeout 함수로 호출 스케쥴링한 콜백 함수는 정확히 지연 시간 후 호출된다는 보장은 없다. 지연 시간 이후 콜백함수가 태스크 큐에 푸시되어 대기하게 되지만 콜 스택이 비어야 호출되므로 약간의 시간차가 발생할 수 있기 때문이다.

   4-2. [자바스크립트 엔진]
   ➡ bar 함수가 호출되어 bar 함수의 함수 실행 컨텍스트가 생성되고, 콜 스택에 푸시되어 현재 실행 중인 실행 컨텍스트가 된다.
   ➡ 이후 bar 함수가 종료되어 콜 스택에서 팝 된다.
   ✳ 이때 foo 함수는 아직 태스크 큐에서 대기 중이다.

5. 전역 코드 실행이 종료되고 전역 실행 컨텍스트가 콜 스택에서 팝 된다. 이로써 콜 스택에서는 아무런 실행 컨텍스트도 존재하지 않게 된다.

6. 이벤트 루프에 의해 콜 스택이 비어 있음이 감지되고,
   태스크 큐에서 대기 중인 콜백 함수 foo가 이벤트 루프에 이해 콜 스택에 푸시된다.
   ➡ 콜백함수 foo의 함수 실행 컨텍스트가 생성되고, 콜 스택에 푸시되어 현재 실행중인 실행 컨텍스트가 된다.
   ➡ 이후 foo 함수가 종료되어 콜 스택에서 팝 된다.

---