Javascript 의 Event Loop

이벤트
자바스크립트 엔진(V8)의 구조

동기적인 코드 : 말 그대로 함수만 실행됨, 위에서부터 아래로 실행됨(WebAPI가 필요없는 상태)
===== 예시 ====

function 첫 번째() {
 두 번째();
 console.log("1st")
}
function 두 번째() {
 세 번째()
 console.log("2nd")
}
function 세 번째() {
 console.log("3rd")
}
첫 번째();
세 번째();

> 결과 
3rd
2nd
1st
3rd

결과의 이유는 아래의 그림과 같이 실행되기 때문이다.

** 다른 point tip: 콜스택은 한계점을 갖고있고 한계점을 넘으면 에러가 뜨면서 프로그램이 종료된다. 브라우저마다 콜스택 한계점은 다르며, 일반적으로 1만개를 갖고있다고 한다. (크롬은 12만개)

비동기적인 코드 : promise.then(), setTimeout ,async/await
** 주의 promise 자체는 동기함수이다
===== 예시 ====

console.log("Start");

setTimeout(function() {
	console.log("Middle")
}, 3000);

console.log("End");

>>결과
Start
End
Middle

===== 비동기 함수의 예시 두 번째 ====

console.log("start");

setTimeout(function () {
	console.log("setTime")
}, 0);

Promise.resolve()
	.then(function () {
    console.log("promise")
    }
  );

console.log("end")
>> 결과
start
end
promise
setTime

왜 promise가 먼저 나오는 걸까?

그 이유는 Event Loop에 Microtask Queue와 Task Queue가 있기 때문이다.
Event Loop는 Microtask Queue를 우선 적으로 확인하고 Promise는 Microtask Queue에 담기고 setTimeout은 Task Queue에 담긴다.
즉, Microtask에 담긴 promise는 event loop에 의해 먼저 확인되어 Call stack 에 옮겨지고 실행된 뒤, 그 다음으로 task queue에 있는 setTimeout이 Call stack에 옮겨지고, 실행된다.

Memory Heap : 메모리 할당이 일어나는 곳
Heap : 객체(변수, 함수)들이 담기는 곳
Call Stack(스택) : 실행되는 함수가 쌓이는 곳(한 줄 단위), 후입선출의 특징
Web APIs : 브라우저 부분, 비동기 처리를 담당(엔진 바깥쪽에 해당됨)
Callback Queue(콜백 큐): 비동기 처리가 끝난 후 실행되어야 할 콜백 함수가 차례로 할당됨
Task Queue, Event Queue 등이 있음
Event Loop(이벤트 루프) : Queue에 할당된 함수를 순서에 맞춰 call stack에 할당해준다.

결국 순서는
Call stack에 쌓인 함수가 후입선출로 모두 실행 →
비동기 함수 실행 시 WebAPI 호출 →
WebAPI가 비동기함수의 콜백함수를 Callback Queue에 밀어넣음 →
Event Loop가 Call stack과 Callback Queue를 계속해서 확인
→ 빈 상태가 되면 Callback Queue에 Microtask Queue를 확인 후 Call stack에 옮김
→ 빈 상태가 되면 Task Queue를 확인 후 Call stack에 옮김
→ 모두 실행 후 비어있는 상태(프로세스 완료)

그렇다면 Event Loop를 누군가가 물어본다면 뭐라고 설명할 수 있을까?

자바스크립트가 런타임 시 동기/비동기 함수가 실행되면서 call stack과 callback queue를 감시하면서 우선순위를 매기며 callback queue에 있는 비동기 함수를 call stack으로 옮겨주는 것