자바스크립트의 싱글 스레드 언어 특징과 event loop에 대해서 알아보겠습니다. 이글은 MDN과 ✨♻️ JavaScript Visualized: Event Loop를 토대로 작성됐습니다.

이벤트 루프를 설명하기 전에, 자바스크립트가 가지는 언어적인 특징을 먼저 살펴봐야 한다!

자바스크립트는 싱글스레드 언어다.

싱글 스레드란?

싱글 스레드라는 것은 한 번에 하나의 일만을 수행할 수 있다는 것. 자바스크립트의 모든 코드들은, 창구가 딱 하나뿐인 은행에 줄을 선 손님들과 같다. 한 손님의 일이 끝난 후에야 그 뒤의 손님이 일을 볼 수 있다. 그리고 일을 다 본 손님은 또 줄을 설 수 없다.

이게 문제가 될 게 없어보일 수도 있지만, 실제 코드들은 은행처럼 일이 그렇게 느리게 돌아가지 않는다. 한 줄에 몇 ms걸린다고 하니까... 그런데 만약 30초가 걸리는 코드(진상 손님이라고 생각하자)를 넣어버리면, 그 뒤의 모든 코드들은 그것때문에 30초를 기다려줘야 한다.

결국 중요한 건, 자바스크립트는 멀티태스킹이 안된다는 것.

web API

web API lets us delay tasks without blocking the main thread.

다행히도, 브라우저는 자바스크립트 엔진이 스스로 하지 못하는 것을 대신 해줄 수 있다. web API이다. web API에는 DOM(document object model), 타이머, HTTP 요청 등이 있다.

console.log("me first!") // 1.

const task = ()=>{
  console.log("I'm doing task~")
}

setTimeout(task, 1000) // 2.

console.log("what about me?") 
// 3. 1초를 기다려야 할까봐 걱정하고 있는(?) 코드

// 4. 

1. 가장 위에 있으므로 가장 먼저 실행된다.

2. setTimeout함수가 실행된다. 그러나 task함수는 바로 호출되지 않고 web API로 넘겨진다. 이제부터 task함수를 호출하는 주체는 자바스크립트 엔진이 아닌 web API의 타이머이다.

3. "what about me?"가 콘솔에 출력된다. 걱정할 필요 없이, 1초를 기다리지 않아도 코드가 바로 실행된다!

4. setTimeout함수가 실행된 후 1초 뒤, task함수가 큐(Queue)에 들어간다.

이벤트 루프

드디어 이벤트 루프의 차례가 왔다. 이벤트 루프가 하는 일은 오직 하나, 큐를 호출 스택과 연결하는 것이다. 이전에 호출되었던 함수들이 각각의 값을 return해서 호출 스택에서 모두 나왔다면, 즉 호출 스택이 비어있다면, 큐에 있는 가장 첫번째 함수가 호출 스택에 들어가게 된다.

그 뒤로부터는 다른 모든 동기적 코드들과 똑같다. 실행되고, 값을 return하고, 호출 스택상에서 나가게 된다.

예시 : setTimeout의 콜백함수가 이벤트루프에 의해 호출되는 과정

const foo = () => console.log("First");
const bar = () => setTimeout(() => console.log("Second"), 500);
const baz = () => console.log("Third");

bar();
foo();
baz();

1.bar 함수를 호출한다. bar 함수는 setTimeout함수를 return한다.

2. setTimeout에 인자값으로써 들어간 콜백함수는 web API에 추가되고, setTimeout함수는 실행이 종료된다.

3. 타이머가 돌아가기 시작한다. 그 동안에 foo함수가 호출되고 "First"가 콘솔에 출력된다. baz함수 또한 호출되고 "Third"가 콘솔에 출력된다.

4. 이벤트 루프가 호출스택이 비었다는 걸 봤다.

5. 콜백함수가 "Second"를 콘솔에 출력한다.