[Web] 자바스크립트 동작 원리 - JavaScript Runtime Environment

자바스크립트는 Single threaded language이다.

하지만 브라우저의 Web APIs와 Task Queue, Event Loop를 사용하여 Multi-threading이 가능하다.

fetch를 이용히서 백엔드에서 데이터를 받아 온다거나

setTimeout을 이용해서 일정시간이 지난 후 우리가 등록한 콜백함수를 실행하는 등의 일을 동시적으로 수행할 수 있다.

 

Web APIs를 통해서 등록한 함수는
어떻게 자바스크립트 엔진과 서로 동작을 하게 되는걸까?

 

 

자바스크립트 엔진에는 Memory Heap과 Call Stack이 있다.

Memory Heap은 선언하고 할당한 모든 변수와 객체가 저장되는 공간이다.

구조화 되지 않은 넓은 메모리 영역이다.

Call Stack은 우리가 등록한 함수를 실행 순서에 따라 쌓아놓는 공간이다.

호출되는 순서대로 차곡차곡 쌓이고, 제일 나중에 호출되어 들어온 함수가 제일 먼저 실행되어 나간다.

Task Queue(Callback Queue / Event Queue)

Queue는 FIFO(First In First Out), 즉 처음에 들어온 것이 먼저 나가는 자료구조이다.

Task Queue는 자바스크립트의 런타임 환경에서 비동기적으로 실행되는 callback함수를 보관하는 공간이다.

Call Stack이 빈 상태가 되면, Event Loop에 의해 Task Queue에 저장된 순서대로 하나씩 Call Stack으로 이동한다.

Event Loop

Event Loop는 Call Stack과 Task Queue의 상태를 체크하면서

Call Stack이 실행 중이면 기다렸다가 Call Stack의 함수가 모두 실행되고 완전히 비워지면

Task Queue의 첫번째 callback 함수를 Call Stack에 하나씩 추가하여

자바스크립트 엔진이 차례대로 수행할 수 있도록 해준다.

 

 

자바스크립트 코드 동작 순서

function first() {
  console.log('🔸first🔸');
}

function second() {
  console.log('⭐second⭐')
}

function third() {
  console.log('🔸third🔸');
}

first();
setTimeout(() => second(), 2000);
third();

 

 

1. first() 가 호출되면서 call stack에 추가되고, first() 를 실행한다.

 

 

2. console에 🔸first🔸가 출력되고, first()실행이 끝나면 call stack에 first()가 삭제되고 비워진다.

 

 

3.setTimeout(() => console.log('⭐second⭐'), 2000);이 호출되고, call stack에 추가된다.

 

 

4. setTimeout()가 실행되면서 브라우저가 제공하는 timer web API를 호출하고, call stack에서 제거된다. web API에서는 timer가 실행된다.

 

 

5. web API에서는 timer가 실행되는 동안 third()가 호출되고, third()가 call stack에 추가된다.

 

 

6. console에 🔸third🔸가 출력되고, third()실행이 끝나면 call stack에 third()가 제거되고 비워진다.

 

 

7. 2000ms가 지나 web API에서 timer가 종료되면 callback함수 second()를 Task Queue에 저장한다.

 

 

8. Event Loop는 Call Stack이 비어있는 것을 확인 하고 Task Queue에 있는 callback함수를 Call Stack에 추가한다.

 

 

9. callback함수 second()가 실행되면, 내부에 있는 console.log('⭐second⭐')가 Call Stack에 추가된다.

 

 

10. console.log('⭐second⭐')가 실행되어 consloe에 ⭐second⭐가 출력되고
call stack에서console.log('⭐second⭐')가 제거된다.

 

 

11. callback함수가 마지막에 call stack에서 제거된다.

 

 

자바스크립트 코드 동작 순서 ▶

 

 

---

우리가 자바스크립트 코드로 button에 click Listener를 등록한 후,
브라우저에서 버튼이 클릭되면 Click Event가 발행하고
Web APIs는 Queue안에 우리가 등록한 클릭 callback함수를 넣어준다.
그리고 다시 버튼이 클릭되면 callback함수를 한번 더 Queue안에 넣어준다.
Call Stack이 빈상태이면, 첫번째 클릭 callback함수를 Call Stack에 추가하고, 함수를 실행한다.
첫번째 클릭 callback함수의 실행이 종료되면 즉, Call Stack이 다시 비워있으면 
두번째 클릭 callback함수를 Call Stack에 추가하고 실행하게 된다.