Javascript 작동원리 - Event Loop

🧐 공부하다 보니 내용이 너무 깊어져 제가 이해한만큼 정리하고 추후에 조금씩 더 공부해 보겠습니다.

이벤트 루프는 왜 필요한가?

자바스크립트 엔진은 하나의 쓰레드에서 동작합니다.
하나의 쓰레드 = 하나의 stack = 동시에 단 하나의 작업

---

❓ 스레드가 하나인데 어떻게 많은 작업이 동시에 처리되는 건가요?!?

자바스크립트는 동시에 단 하나의 작업만을 하지만, Event Loop가 자바스크립트가 여러가지 작업을 비동기로 작업을 할 수 있게 해줍니다.

많은 개발자가 오해하는 부분이 자바스크립트 런타임(브라우저, nodejs) 자체에서 비동기 API를 지원한다는 것입니다.(사실은 아님❌) 비동기 API는 브라우저나 node.js에서 지원되는 것입니다.

🔎 자바스크립트 엔진이란?

• javaScript로 작성한 코드를 해석하고 실행하는 인터프리터

• javaScript Engine은 크게 Memory Heap, Call Stack 로 이루어져 있다.

  • memory heap : 메모리 할당이 일어나는곳
  • heap : 구조화 되지 않은 넓은 메모리 영역 ⇒ 객체(함수, 변수 등)들이 담김
  • Call Stack(호출스택) : 실행될 코드의 한 줄 단위로 할당되어 실행되는 자료 구조

---

이벤트 루프는 어떻게 일하나요?

Callback Event Queue에 할당된 콜백함수를 순서에 맞춰 Call Stack에 할당해준다.

1. Call Stack과 Callback Queue 사이의 작업들을 반복해서 확인한다.
2. Call Stack이 비어있는 경우
   • Callback Queue에서 작업을 꺼내어 Call Stack에 넣는다.

자바 스크립트는 이런 Event loop와 Queue들을 이용해 비동기 작업을 수행한다.

직접적인 작업은 Web API에서 처리한다.
Web API에서 작업들이 완료되면 요청 시 등록했던 callback이 queue에 등록된다.

🔎 callback Queue 란?

• task queue, event queue 등의 다양한 형태가 있다.
• 비동기 처리가 끝난 후 실행되어야 할 콜백함수가 차례로 할당된다.
• 콜백함수가 callback Queue안에 들어 간다는 게 중요한 부분이다.

🔎 Web API 란?

• 비동기를 처리를 담당한다.
• 노드에서는 백 그라운드로 설명된다.

---

이제 코드를 풀어보며 마무리 정리를 해보자

console.log("script start");

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

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

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

console.log("script end");

여기서 알아두어야 할 것이 있다.

📌비동기 작업의 우선순위

• 비동기 작업으로 등록되는 작업은 task와 Microtask. 그리고 animationFrame(Macrotask) 작업으로 구분된다.
• Microtask > animationFrame(Macrotask) > task 순으로 작업이 처리된다.

🎉 위를 토대로 나오는 결과는!!!!

script start
script end
promise1
promise2
setTimeout

정리하자면
1. 코드가 실행되면 Call Stack에 쌓이고, Stack에서는 선입후출 룰 대로 실행된다.
2. 비동기 함수가 실행된다면, Web API가 호출된다.
3. Web API는 비동기함수의 콜백함수를 Callback Queue에 밀어넣는다.
4. Event Loop는 Call Stack이 빈 상태가 되면 콜백을 Call Stack으로 이동시킨다.
5. Microtask > animationFrame(Macrotask) > task 순으로 작업이 처리 된다.

🔎 콜백함수를 Microtask 큐에 넣는 함수들

• process.nextTick
• Promise
• Object.observe
• MutationObserver

🔎 콜백함수를 Macrotask 큐에 넣는 함수

• setTimeout
• setInterval
• setImmediate
• requestAnimationFrame
• I/O
• UI 렌더링

---

자바스크립트 비동기 처리 과정
JavaScript의 Event Loop
Event Loop : 마이크로태스크(Microtask)와 매크로태스크(Macrotask) 알아보기