JavaScript - Event Loop

1. call stack?

자바스크립트는 단 하나의 스택(call Stack) 만을 사용한다.
이 말은 어떤 함수를 실행하고 있다면 이 함수가 작업을 완료하기 전까지는 다른 함수를 실행할 수 없는 환경을 말한다.

함수들이 실행되면 stack에 push를 하게 되고 차곡차곡 쌓여진 작업들을 pop 해 가면서 작업을 수행하게 된다.

function a(){
  console.log("a");
}

function b(){
  a();
  console.log("b");
}

function c(){
  b();
  console.log("c");
}

c();

위의 코드 실행 결과로 출력이 a -> b -> c가 된다.
javascript는 stack의 자료구조의 원리에 따라 작업을 수행하는 것을 알 수 있다.
가장 늦게 들어온 a()가 가장 먼저 출력이 되고 가장 먼저 들어온 c()가 가장 늦게 출력이 된다.

2. TaskQueue? Web Api?

TaskQueue는 처리해야되는 작업이 임시로 저장되는 장소이다.

function a() {
  console.log("중간");
}

function b(){
  console.log("처음");
  
  setTimeout(a, 0);
  
  console.log("마지막");
}

b();

위의 코드의 결과는 "처음" -> "마지막" -> "중간"이 나온다.
stack에 쌓여 "처음" "중간" "마지막"이 나와야 되지만 setTimeout 함수는 비동기로 처리되는 함수이다.

비동기로 실행되는 함수는 Web API로 넘어가게 되고 Web API에서 TaskQueue로 넘어가게 된다.

그리고 TaskQueue에서 Event Loop 가 stack을 감지하고 있는 상태에서 stack이 비워지게 된다면
TaskQueue에 있는 작업을 stack으로 옮겨주는 역할을 한다.

정리

실행되는 함수들이 stack에 쌓입니다.

비동기 함수는 Web API로 이동합니다.

Web API에서 Task queue로 이동하여 대기합니다.

Task Queue에서 대기하고 있던 작업이 stack이 비워진다면 Event Loop가 작동하여
stack으로 작업이 이동합니다.