자바스크립트 엔진의 동작 원리

자바스크립트의 동작 원리

자바스크립트 엔진은 메모리 힙(Memory Heap)과 콜 스택(Call Stack)이라는 구조를 통해 데이터 및 코드 실행을 관리한다. 메모리 힙은 메모리 할당이 일어나는 곳이며, 콜 스택은 코드 실행에 따라 호출 스택이 쌓이는 곳이다. 자바스크립트는 싱글 스레드 기반의 언어로, 하나의 스레드 단위로 실행이 되는 흐름을 갖는다. 하나의 스레드에서는 하나의 Call Stack으로 현재 어떤 함수가 동작하고 있는지, 그 함수 내에서 어떤 함수가 동작하고 다음에 어떤 함수가 호출되어야 하는지 등을 제어한다.

 

자바스크립트 엔진(메모리 힙, 콜 스택)만으로 웹이 동작하진 않는다. 그 외적인 요소들의 동작도 런타임으로 이루어진다. 브라우저에서 제공하는 Web API들(DOM, Ajax, setTimeout, 이벤트 루프 등) 그리고 이벤트 등과 함께 동작하면서 런타임이 이루어진다. 버튼 클릭 같은 이벤트나 DOM 이벤트, http 요청, setTimout 같은 비동기 함수는 Web API를 호출하며, Web API는 콜백 함수를 Callback Queue에 밀어 넣는다.

 

아래 예시 코드가 실행되는 과정을 통해 더 쉽게 이해해보자.

// 1번
let num = 1;

// 2번
setTimeout(() => {
  num = 2;
}, 0);

// 3번
num = 3;

// 4번
console.log(num);

 

1. 1번 코드의 실행으로 num 변수에 1이 할당된다.
2. 2번 코드의 실행으로 setTimeout을 Web API가 처리하게 넘긴다. 이때 setTimeout 내부의 콜백 함수를 실행할지 판단하지 않는다. num은 여전히 1인 상태.
3. Web API에서 setTimeout 작업이 완료되면, 내부 콜백 함수를 Callback Queue에 등록한다.
4. 3번 코드가 실행되어 num에 3이 할당된다.
5. 4번 코드 실행으로 3이 출력된다.
6. 모든 실행이 마치면 Event Loop를 돌아 Callback Queue에 있는 콜백 함수를 Call Stack에 할당해 실행하고, num에 2가 할당된다.

 

여기서 중요한 점은 setTimeout 함수를 Web API에 넘기기만 하고, 내부 콜백 함수 실행 여부는 판단하지 않는다는 점이다. Web API는 넘겨 받은 setTimeout 함수의 작업이 완료되면 콜백 함수를 Callback Queue에 등록하는 역할을하고, 모든 실행 이후, Event Loop를 돌아 Callback Queue에 할당된 함수를 순서에 맞춰 Call Stack에 할당해 실행하는 점까지 그 흐름을 잘 기억하자.