JavaScript V8 엔진 동작 원리 | 실행 컨텍스트와 콜 스택

1. V8 엔진

1-1. 소개와 특징

• 구글이 개발한 오픈소스이며, 자바스크립트를 빠르게 실행하기 위해 만들어진 엔진이다.
• 과거 엔진들은 자바스크립트를 한 줄씩 읽고 바로 실행했지만,
  V8은 전체 코드를 빠르게 컴파일하여 실행 속도를 높인다.

1-2. 어디에 쓰일까?

• 크롬 브라우저 : 웹사이트를 볼 때 자바스크립트를 실행한다.
• Node.js : 서버 환경에서도 자바스크립트를 사용할 수 있게 한다.

1-3. 어떤 과정을 거칠까?

• 자바스크립트 ➡ (V8 엔진이 컴파일) ➡ 컴퓨터가 이해 ➡ 실행!

  • 파싱(Parsing) : 코드를 읽고 문법적으로 해석한다.
  • 컴파일(Compile) : 컴퓨터가 이해할 수 있는 언어로 변환한다.
  • 실행(Run) : 변환된 코드를 실제로 실행한다.
  • 메모리 관리(Garbage Collection) : 사용이 끝난 메모리를 정리해 성능을 유지한다.

---

2. 실행 컨텍스트 (Execution Context)

2-1. 실행 컨텍스트와 V8의 관계

• 자바스크립트 코드를 실행할 때, V8 엔진은 코드가 어디서 어떤 규칙으로 실행될지 미리 정리한다.
• 엔진은 하나의 환경을 만들고, 그 안에서 변수, 함수, this, 스코프 등을 관리한다.
• 이렇게 만들어진 환경을 실행 컨텍스트(Execution Context) 라고 한다.

2-2. 실행 컨텍스트 종류

전역 컨텍스트 (Global Context)

• 자바스크립트 파일이 실행되는 순간 딱 하나만 생성된다.
• 프로그램이 끝날 때까지 유지된다.
• 브라우저에서는 window, Node.js에서는 global 객체와 연결된다.

함수 컨텍스트 (Function Context)

• 함수가 호출될 때마다 새로 생성된다.
• 함수 실행이 끝나면 제거된다.

2-3. 실행 단계

생성 단계 (Creation Phase)

• 변수와 함수 선언이 메모리에 미리 올라가며, 호이스팅(Hoisting) 이 발생한다.
• 변수는 undefined로 초기화되고, 함수 선언은 전체가 통째로 저장된다.

실행 단계 (Execution Phase)

• 코드가 한 줄씩 실행된다.
• 변수에 값이 할당되고, 함수가 호출되는 등 실제 동작이 일어난다.

---

3. 호이스팅 (Hoisting)

3-1. 특징

• 코드 실행 전에 변수나 함수 선언이 메모리의 맨 위로 끌어올려지는 현상이다.

var a;          // 선언이 맨 위로 끌려감
console.log(a); // 아직 값이 없으므로 undefined
a = 20;         // 실행 단계에서 값이 할당됨

3-2. 종류

변수 호이스팅

• var : 선언만 올라가고 값은 나중에 할당됨 ➡ undefined
• let, const : 호이스팅이 되고 TDZ (일시적 사각지대)이 존재해 선언 전 접근 시 에러 ⚠️

TDZ : 변수가 선언되었지만 초기화되지 않은 구간이고 접근하면 ReferenceError가 발생

함수 호이스팅

• 함수 선언문은 통째로 메모리 위에 올라가고 선언 전 호출해도 동작함

sayHello(); // 정상 작동
function sayHello() {
  console.log("안녕!");
}

4. 메모리 구조

• 자바스크립트 코드가 실행될 때, V8 엔진은 메모리를 크게 두 구역으로 나눠서 관리함

4-1. Call Stack (호출 스택)

• 자바스크립트 실행 흐름(함수·스코프)을 관리하는 메모리 공간이다.
  • 실행 중인 함수, 변수, 스코프 정보를 저장한다.
  • 단 하나의 Call Stack만 존재하며, 한 번에 하나의 작업만 수행한다 (싱글 스레드 구조이다).
  • 함수가 실행되면 스택에 쌓이고, 실행이 끝나면 스택에서 제거된다.
  • 구조는 LIFO (Last In, First Out) 이며, 마지막에 들어온 함수가 먼저 종료된다.
  • 즉, 현재 어떤 함수가 실행 중인지 JS 엔진이 추적하는 공간이다.

4-2. Heap (힙)

• 객체, 배열, 함수 같은 참조 타입 데이터가 저장되는 공간이다.
• 크기가 일정하지 않아 동적 메모리 관리가 필요하다.
• Garbage Collector (GC) 가 더 이상 사용되지 않는 데이터를 자동으로 정리한다.

4-3. Queue (큐)

• 비동기 콜백이 대기하는 공간이다.
• 구조는 FIFO (First In, First Out) 이다.
• 종류는 다음과 같다.
  • Task Queue : setTimeout, DOM 이벤트 등
  • Micro Task Queue : Promise.then, async/await
• 실행 우선순위는 Micro Task ➡ Task 순이다.

4-4. Event Loop (이벤트 루프)

• 비동기 작업을 조율하는 중재자이다.
• 콜 스택이 비면 큐의 콜백을 스택으로 이동시켜 실행한다.
• 자바스크립트의 비동기 동작을 가능하게 하는 핵심 메커니즘이다.

4-5. 메모리 구조별 정리

구분	역할	구조	특징
Call Stack	실행 관리	LIFO	함수 실행·종료 시 push/pop
Heap	참조 저장	비정형	객체·배열 저장, GC 정리
Queue	비동기 대기	FIFO	Task·MicroTask 순서 실행
Event Loop	실행 조율	순환	스택 비면 큐 작업 이동

5. 런타임 (Runtime)

• 프로그램이 실제 실행되는 환경
• V8 엔진 + 각 환경(API)으로 구성됨

구분	V8 엔진	런타임 환경 (브라우저 / Node.js)
역할	JS 코드 컴파일 & 실행	API 제공 (DOM, Ajax, fs 등)
구조	단일 Call Stack (싱글 스레드)	이벤트 루프 + 큐로 비동기 처리
제공 기능	코드 실행만 담당	브라우저: DOM, Ajax / Node.js: fs, http

💡 학습정리

V8 엔진은 자바스크립트를 빠르게 읽고 실행하는 핵심 엔진이다.
런타임 환경은 그 엔진이 실제로 작동할 수 있도록
필요한 도구와 기능을 제공하는 실행 공간이다.
스택은 실행, 힙은 저장, 큐는 대기, 이벤트 루프는 조율한다.
이 네 가지 요소가 함께 자바스크립트의 비동기 구조를 형성한다.