Event Loop

---

이번에 면접을 보러가서 이벤트 루프에 대해 듣고 왔다.
자바스크립트에 대해 많이 소홀했던 자신을 반성하며 정리를 해보고자 한다.

자바스크립트는 싱글 스레드 기반의 언어이므로 한번에 하나씩 작업을 진행한다.

그러나 우리가 브라우저를 사용할 때 마치 동시에 여러개의 작업을 진행하는 것처럼 보일 때가 있다.

Call Stack

웹 브라우저에는 Call Stack, Task Queue와 같은 공간이 존재한다.

Call Stack은 우리가 작성한 코드를 실행해주는 공간이다.

Call Stack이라고 하는 공간에 들어오는 코드들은 LIFO의 원칙을 따른다. 또한, Call Stack은 하나만 존재한다. 그렇기 때문에 결국 자바스크립트는 한번에 하나의 코드만을 실행할 수 있다는 것이 된다.(싱글스레드)

예를 들어 아래와 같은 코드가 있다고 생각해보자.

const first = () => {
  console.log('Hello ');
  second();
  console.log('!')
}
const second = () => {
  console.log('world');
}
first();

이 코드를 실행하면 어떤 결과가 출력될까

// Hello world!

Call Stack
-------------------------
console.log('Hello ');
second();
-> console.log('world')
console.log('!')
-------------------------

위와 같이 출력이 되는 것은 쉽게 예상이 가능하다. 그 아래의 Call Stack을 보면 first 함수의 'Hello '가 먼저 들어오고 그 뒤에 second 함수의 'world'가 들어온 것을 확인할 수 있다.

Call Stack은 LIFO 원칙을 따르기 때문에 나중에 들어온 second 함수가 우선 실행된 뒤, first 함수의 '!'가 출력되는 것이다.

Task Queue

이번에는 Task Queue가 어떤 공간인지 알아보자

Task Queue의 경우 web API들이 Call Stack에 전달되기 전 머무르는 공간이다.

한가지 예를 들어서 확인해보자

const test = () => {
  console.log('Hello ')
  setTimeout(() => {console.log('!')}, 1000)
  console.log('world')
}
test();

// Hello world!

위 코드도 결과를 예상하는 것은 그리 어렵지 않다. 하지만 우리는 원리를 알아보고자 한다.

우선 이번에도 당연히 위에서 설명한 Call Stack에 코드들이 쌓인다.

Call Stack
-------------------------
console.log('Hello ')
setTimeout(() => {console.log('!')}, 1000)
console.log('world')
-------------------------

1. 우선 'Hello '가 Call Stack에서 제거되며 출력된다.

2. 이후 setTimeout이 Call Stack에서 제거된다. 이와 동시에 web API는 타이머를 시작한다. 그리고 해당 함수는 일종의 대기실로 이동된다.

   • setTimeout의 타이머가 종료되면 Task Queue에 담긴다.

     Task Queue는 web API들이 Call Stack에 전달되기 전 머무르는 공간이다.

3. 그 뒤에 'world'이 Call Stack에서 제거되며 출력된다.

4. 만약 Call Stack이 비어있다면 Task Queue의 setTimeout의 함수를 Call Stack으로 전달, 제거 후 '!'가 출력된다.

그리고 Task Queue는 FIFO 원칙을 따르기 때문에 Task Queue에 들어온 순서대로 Call Stack으로 옮겨져 실행된다.

이와 같은 원리로 싱글 스레드인 자바스크립트가 Call Stack과 웹브라우저의 Task Queue등을 활용해 병렬처리가 가능한 것이다.

Event Loop

위와 같이 웹 브라우저가 코드를 동작시키는 흐름을 살펴보았는데 이러한 흐름을 이벤트 루프라고 한다.

Call Stack에 실행시킬 작업이 남아있는지, Task Queue에 넘겨줄 작업이 남아있는지, Task Queue에서 Call Stack으로 전달해줄 작업이 남아있는지 등을 확인하는 모든 과정이 이벤트 루프다.

루프를 시각적으로 확인해볼 수 있는 사이트