JavaScript 내부 동작 원리 EventLoop에 대한 정리

JavaScript가 내부적으로 어떤 구조를 가지고 있는지,
어떤 특성을 가지고 동작 하는지 위 그림을 참고하여 설명한다.

구조

1. Memory Heap

• 메모리 할당이 일어나는 곳

2. Heap

• 구조화되지 않은 넓은 메모리 영역 ➡ 객체(변수, 함수 등)들이 담긴다

3. Casll Stack (호출 스택)

• 실행될 코드의 한 줄 단위로 할당 되어지는 영역.
• JS는 인터프리터 언어이므로 줄단위로 코드를 해석하고 실행하면서 콜스택에 담기게 된다.

4. Web APIs (Node 환경에서는 백그라운드로 설명된다)

• 비동기 처리를 담당한다.

5. Callback Queue (Task Queue, Event Queue 등 다양한 형태로 설명된다)

• 비동기 처리가 끝난 후 실행되어야 할 콜백 함수가 차례로 할당된다.

6. EventLoop

• Queue에 할당된 함수를 순서에 맞춰 Call Stack에 할당해준다.

동기적인 코드

function first() {
  second();
  console.log("첫 번째");
}
function second() {
  third();
  console.log("두 번째");
}
function third() {
  console.log("세 번째");
}
first();
third();

ㄴ 출력 결과

Callstack에 쌓이는 순서 ( anonymous -> first() -> second() -> third() -> console.log("세 번째"); )
세번째, 두번째, 첫번째 출력 후 마지막줄의 third()가 실행되어 세번째 가 출력된다.

비동기적인 코드

console.log("시작");

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

console.log("끝");

ㄴ 출력결과

Callstack에 "시작" 부분이 먼저 쌓이고 실행
-> setTimeout(익명, 3초)이 쌓이고 실행 
-> Web APIs로 setTimeout이 넘어감
-> Callstack에서 "끝" 부분 실행 (하는동안 Web API에서 3초를 센다)
-> 3초가 되면 timeout에 들어있는 콜백(익명) 함수를 Callback Queue로 넘겨준다
-> EventLoop가 CallStack이 비어있을때 Callback Queue에 있는 익명함수를 CallStack으로 넘겨준다. 
-> CallStack에서 익명함수 안에 "중간" 부분을 실행
-> 익명 함수 종료

Callback Queue 우선순위

Microtask Queue > Animation Frames > Task Queue

Callback Queue 구성

• Task Queue(Event Queue)
• Microtask Queue(Job Queue) -> Promise는 이곳에 담긴다.
• Animation Frames

결론

JavaScript라는 언어는 참 특수한 언어라는 생각이 든다.
기본적으로 위에서 아래로 한줄씩 실행 되지만 멀티 쓰레드 처럼 비동기로 동작 할 수 있고,
그 안에서도 동기적으로 동작 할지 비동기적으로 동작 할지 제어 할 수 있는 방법을 제공한다.
언어의 특성을 잘 알고 내부 동작 원리를 이해 해두면 전반적인 나의 개발 실력에 좋은 영향을
미칠것이라 생각하며 정리를 마친다.