다짜고짜 자바스크립트 엔진 구조 살펴보기 👀

이게 바로 자바스크립트 엔진의 구조로, 그 중에서도 V8 엔진의 구조이다.

JS Engine,

• Memory Heap : 메모리 할당이 일어나는 곳이다.
  여기서 Heap은 구조화되지 않은 넓은 메모리 영역으로, 객체(변수나 함수)들이 담기는 곳이라 생각하면 된다.
• Call Stack(호출 스택) : 실행될 코드가 한 줄씩 할당된다.

Web APIs,

비동기 처리를 담당으로 하고 있으며, 브라우저 기준에서는 Web APIs, 노드에서는 Background로 설명된다.
자바스크립트 엔진이 아니라 브라우저에서 제공하는 API라고 생각하면 된다. (DOM, Ajax, Timeout 등등)

Callback Queue,

비동기 처리가 끝난 후에 실행되어야 할 콜백 함수들이 차례로 대기하는 공간이다.
Task Queue, Event Queue 등 다양한 형태로 설명되는데,
정확하게 말하자면 Callback Queue 안에 저 다른 형태의 Queue들이 존재하고 있다.

• Queue : 자료구조 중 하나로, 선입선출(FIFO)의 룰을 따른다.

그리고 Event Loop!

Queue에 할당된 함수들을 순서에 맞춰 Call Stack으로 보내주는 역할이다.
이 때, Call Stack이 비어있는 상태일 때만 보내준다. 이걸 계속 반복하는데, 반복적인 행동을 틱(tick)이라고 한다.
만약에 동기적인 함수만 존재한다면, Web APIs, Callback Queue … 이런거 필요없고,
Call Stack 하나만으로도 동작할 수 있다.

코드 보면서 이해하기 🤖

동기적인 코드

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

Call Stack 내부에서는?

1️⃣ 호출이 되면 모든 코드를 가지고 있는 anonymous(노드에서는 main)가 먼저 담긴다.
2️⃣ first(); 호출되면서 담긴다.
3️⃣ first(); 내부의 second();가 호출되면서 담긴다.
4️⃣ second(); 내부의 third();가 호출되면서 담긴다.
5️⃣ third(); 내부의 console.log('세 번째');가 그 위로 쌓인다.
6️⃣ 호출되는 코드들이 Call Stack 내부에 다 쌓였다면, 이 때 실행 단계로 넘어간다.

실행 단계

• Stack이니까 마지막에 담긴 것부터(거꾸로순) 먼저 빠지면서 실행된다.

1️⃣ console.log('세 번째');
2️⃣ third();는 실행되었으니 Stack에서 빠진다.
3️⃣ second();를 실행하면서 console.log('두 번째'); 출력한다.
4️⃣ second(); 빠지면서 first(); 실행, console.log('첫 번째') 출력한다.
5️⃣ first(); 함수 동작이 끝난다.
6️⃣ third(); 함수가 Call Stack에 담긴다.
7️⃣ console.log('세 번째'); 실행되면서 출력한다.
8️⃣ 최종적으로 anonymous까지 빠지면서 실행 단계는 끝난다.

이제 Call Stack을 알기는 알았는데.. 😳

실행하다보면 콜스택에서 경험할 수 있는 에러가 있다.

‘Uncaught RangeError: Maximum call stack size exceeded’

Call Stack 사이즈를 초과했다는 에러로, 콜스택마다 한계점이 존재한다. 그 한계점을 초과하면 뜨는 에러로,
콜스택 안에 실행 코드가 하나씩 담기다가 감당할 수 없을만큼 많아지면 프로그램이 확 종료된다..
브라우저 엔진마다 콜스택의 한계는 다르며, 일반적으로 1만개이고 크롬 브라우저는 약 12만개라고 한다.

비동기적인 코드

• 이벤트 루프에서는 비동기 코드의 작동 방식이 핵심!

console.log('시작');

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

console.log('끝');

프로그램 동작 단계

1️⃣ anonymous가 먼저 담긴다.
2️⃣ console.log('시작')이 실행되고 Stack에서 빠지면서
3️⃣ 콘솔 창에 ‘시작’ 출력된다.
4️⃣ setTimeout(익명 함수, 3초) 쌓이면서
5️⃣ Web APIs(=Background)로 넘어간 timeout이 3초동안 대기한다.
6️⃣ 대기하는 사이에 console.log('끝') 함수가 Stack에 쌓이고 빠지면서
7️⃣ 콘솔 창에 ‘끝’ 출력되면서 anonymous도 Stack에서 빠진다.
8️⃣ 3초가 된 시점에 timeout의 익명 함수가 Callback Queue로 넘어가면서, 이벤트 루프가 Call Stack 자리가 비어있는지 다른 것이 있는지 검사한다. 비어있을 때를 체크한 다음에,
9️⃣ 익명 함수 안에 있는 console.log('중간')을 Stack에 쌓는다.
🔟 익명 함수가 종료되면서 Stack에서 빠지면서 콘솔 창에는 ‘중간’ 출력되고, 해당 코드의 프로그램 동작이 마무리된다.

• Call Stack이 실행할 코드가 있는지 없는지 체크하는 역할을 하는 것이 ‘이벤트 루프’로,
  스택이 비어있다면 Callback Queue에서 대기 중인 함수를 넘겨준다. 💫

이번에는 Promise를 추가한 비동기적인 코드를 살펴보자

console.log('시작');

setTimeout(function () {
  console.log('중간');
}, 0);

Promise.resolve().then(function () {
  console.log('프로미스');
});

console.log('끝');

프로그램 동작 단계 1/2

1️⃣ anonymous가 먼저 담긴다.
2️⃣ console.log('시작')이 실행되고 Stack에서 빠지면서
3️⃣ 콘솔 창에 ‘시작’ 출력된다.
4️⃣ 비동기 함수인 setTimeout(익명 함수, 0초)가 쌓이면서
5️⃣ Web APIs(=Background)로 넘어간다.
6️⃣ 다음으로 Promise가 넘어오는데, 여기서 기억해두어야 할 점은 Promise는 ‘동기’라는 점이다.

👥 그런데 왜 비동기라고 인식하고 있었지..?
👩‍💻 Promise 자체는 동기인데, then을 만나는 순간 엔진이 비동기로 인식합니다!

7️⃣ then이 존재하는 Promise는 비동기로 인식되어 Web APIs에 담긴다.
8️⃣ Web APIs에 담긴 setTimeout의 실행이 끝나고 Callback Queue로 익명 함수가 먼저 넘어갔다고 가정하자.
9️⃣ 그 다음으로 then의 익명 함수가 Callback Queue에 넘어간다.
🔟 이벤트 루프에서 Call Stack이 비어있는지 아닌지 체크를 한 후에, Queue에 있는 함수들을 넘겨줄텐데 과연 여기서 어떤 익명 함수를 먼저 넘겨줄까?!

정답은.. 60초 후 공개가 아닌 지금 공개!

프로그램 동작 단계 2/2

1️⃣ Callback Queue에 있는 함수들을 넘겨주기 위해서 이벤트 루프가 열심히 지켜보는데, Call Stack에는 아직 코드들이 쌓여있어서 바로 넘겨주지 못한다. Call Stack이 비는 순간까지 기다린다.
2️⃣ console.log('끝')이 실행되고, 콘솔 창에 ‘끝’이 출력된다.
3️⃣ 더 이상 실행할 코드가 없기 때문에 anonymous는 Stack에서 사라지고 비어있는 상태가 된다.
4️⃣ 이제 이벤트 루프에서 Queue에 있는 익명 함수들을 넘겨줘야 할 차례인데.. 어떤 함수를 먼저 넘겨줄까?

👥 아~ Queue는 선입선출, FIFO라서 timeout의 익명 함수를 먼저 내보내겠네!
🙅‍♀️ 틀렸습니다.. 우선순위때문에 then의 익명 함수를 먼저 넘깁니다~

5️⃣ Promise then의 익명 함수를 Queue에서 먼저 꺼내어 Stack으로 넘긴다.
6️⃣ 익명 함수 안의 코드 console.log('프로미스')를 담고
7️⃣ 콘솔 창에 ‘프로미스’ 출력하면서 Stack에서 빠진다.
8️⃣ 이벤트 루프에서 Queue에 남아있는 timeout의 익명 함수를 꺼내어 Stack으로 넘긴다.
9️⃣ 익명 함수 안의 코드 console.log('중간')를 담고
🔟 콘솔 창에 ‘중간’ 출력하면서 Stack에서 빠진다.

잠깐 👋 Callback Queue의 우선순위?

위에서 본 비동기 코드의 진행을 봤을 때, Queue에 담긴 익명 함수들은 우선순위에 따라서 실행 순서가 정해졌다.

Callback Queue는 크게 3가지의 큐로 구성되어 있다.

• 이벤트 루프는 Callback Queue의 우선순위를 매겨서 Call Stack으로 넘겨준다.

1순위. Microtask Queue (Job Queue) : Promise callback, async functions, …

2순위. Animation Frames

3순위. Task Queue (Event Queue) : setTimeout, setInterval, …

console.log('시작');

setTimeout(function () {
  console.log('중간');
}, 0);

Promise.resolve().then(function () {
  console.log('프로미스');
});

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

console.log('끝');

이제 이벤트 루프 동작 방식 (Microtask Queue > Animation Frames > Task Queue)을 이해했으니,
실행 결과가 어떻게 나오는지 바로 떠오른다!

콘솔 : 시작 > 끝 > 프로미스 > requestAnimationFrame > 중간

✨ 정리

이벤트 루프를 알지 못하면 자바스크립트를 알지 못하는 것이다!

난 여태까지 동작 원리를 제대로 알지도 모른 채 자바스크립트를 사용하고 있었다. 누군가 가르쳐 주지 않아서, 들은 적이 없었다고 변명하기도 부끄럽지만.. 내가 뭘 모르는지 모르니까 알아볼 생각도 없었는데 스터디를 하면서 어떤 개념들이 있고, 내가 쓰는 언어와 동작 원리 같은 건 기본적으로 알고 써야겠다는 다짐을 한 번 더 할 수 있게 되었다 😌

참고 내용

우리밋

이벤트 루프 동작 원리를 눈으로 직접 체험하기