# Execution Phase

자바스크립트(JavaScript)는 동적이고 인터프리터 기반의 프로그래밍 언어로, 코드의 실행 과정이 런타임에 결정됩니다. 이 과정에서 가장 핵심적인 개념 중 하나가 바로 **실행 단계**(Execution Phase)입니다. 자바스크립트 엔진은 코드를 실행하기 전에 준비 단계를 거치며, 이후 실제로 코드를 실행하는 두 단계로 나뉩니다. 이 문서에서는 자바스크립트의 실행 단계(Execution Phase)의 개념, 동작 방식, 그리고 관련된 내부 메커니즘을 상세히 설명합니다.

## 개요

자바스크립트의 실행 단계는 **실행 컨텍스트**(Execution Context)가 생성되고 관리되는 과정을 의미합니다. 자바스크립트 엔진은 코드를 실행할 때, 전역 코드, 함수 코드, 또는 `eval` 코드를 처리하기 위해 각각의 실행 컨텍스트를 생성합니다. 이 컨텍스트는 **생성 단계**(Creation Phase)와 **실행 단계**(Execution Phase)로 나뉘며, 이 중 후자가 바로 코드가 실제로 평가되고 실행되는 시점입니다.

실행 단계는 단순히 코드를 위에서 아래로 실행하는 것을 넘어서, 변수 할당, 함수 호출, 메모리 관리, 클로저, 스코프 체인 등 다양한 언어의 동적 특성을 지원하는 핵심적인 프로세스입니다.

---

## 실행 컨텍스트의 두 단계

자바스크립트의 실행 컨텍스트는 다음과 같은 두 단계로 나뉩니다:

1. **생성 단계**(Creation Phase)
2. **실행 단계**(Execution Phase)

이 문서에서는 두 번째 단계인 **실행 단계**에 초점을 맞춥니다.

### 생성 단계 간략 정리

실행 단계에 들어가기 전, 생성 단계에서는 다음 작업들이 수행됩니다:

- **레식 환경**(Lexical Environment)과 **변수 환경**(Variable Environment) 생성
- `var` 변수는 `undefined`로, `let`과 `const`는 **TDZ**(Temporal Dead Zone) 상태로 초기화
- 함수 선언은 메모리에 전체 바인딩되며, 함수 표현식은 `var`처럼 `undefined` 처리
- `this` 바인딩 설정 (전역 컨텍스트에서는 `window` 또는 `global`, 함수 컨텍스트에서는 호출 방식에 따라 결정)

이 단계가 끝나면 엔진은 실행 단계로 넘어갑니다.

---

## 실행 단계(Execution Phase)란?

**실행 단계**(Execution Phase)는 자바스크립트 엔진이 코드를 실제로 **한 줄씩 평가하고 실행**하는 과정입니다. 이 단계에서 변수에 값이 할당되고, 함수가 호출되며, 조건문, 반복문, 비동기 작업 등이 처리됩니다.

### 주요 특징

- **한 줄씩 순차 실행**: 자바스크립트는 싱글 스레드 기반 언어이므로, 코드는 위에서 아래로 한 줄씩 순차적으로 실행됩니다.
- **호이스팅 반영 후 실행**: 생성 단계에서 호이스팅된 변수와 함수가 이제 실제 값을 할당받거나 호출됩니다.
- **TDZ 해제**: `let`과 `const` 변수는 실행 단계에서 선언된 위치에 도달했을 때 TDZ에서 벗어나 값을 할당할 수 있습니다.
- **비동기 처리 큐잉**: `setTimeout`, `Promise`, `async/await` 등의 비동기 작업은 실행 단계에서 콜백 큐나 마이크로태스크 큐에 등록됩니다.

### 예제 코드 분석

```javascript
console.log(a); // undefined (var 호이스팅)
console.log(b); // ReferenceError: Cannot access 'b' before initialization

var a = 10;
let b = 20;

function greet() {
    console.log("Hello!");
}

greet(); // "Hello!" 출력
```

- **1행**: `a`는 `var`로 선언되었기 때문에 생성 단계에서 `undefined`로 초기화됨 → 실행 단계에서 `undefined` 출력.
- **2행**: `b`는 `let`으로 선언되어 TDZ 상태 → 실행 시점에서 ReferenceError 발생.
- **7행**: `greet()` 함수는 생성 단계에서 전체 바인딩됨 → 실행 단계에서 정상 호출 가능.

---

## 실행 단계와 콜 스택

자바스크립트는 **콜 스택**(Call Stack)을 사용하여 실행 컨텍스트를 관리합니다. 실행 단계 중 함수가 호출되면, 해당 함수의 실행 컨텍스트가 콜 스택에 푸시되고, 실행이 끝나면 팝됩니다.

```javascript
function first() {
    console.log("First");
    second();
}

function second() {
    console.log("Second");
}

first();
```

실행 흐름:
1. 전역 실행 컨텍스트 생성 → 콜 스택에 추가
2. `first()` 호출 → `first` 컨텍스트 생성 및 푸시
3. `console.log("First")` 실행
4. `second()` 호출 → `second` 컨텍스트 생성 및 푸시
5. `console.log("Second")` 실행 후 `second` 컨텍스트 팝
6. `first` 컨텍스트 종료 후 팝
7. 전역 컨텍스트 유지

이러한 스택 기반 구조는 실행 단계의 순서와 제어 흐름을 명확히 합니다.

---

## 실행 단계와 비동기 처리

자바스크립트의 비동기 동작은 실행 단계 내에서 특별한 방식으로 처리됩니다. 이벤트 루프(Event Loop), 콜백 큐(Callback Queue), 마이크로태스크 큐(Microtask Queue)가 관여합니다.

```javascript
console.log("1");

setTimeout(() => {
    console.log("2");
}, 0);

Promise.resolve().then(() => {
    console.log("3");
});

console.log("4");
```

**출력 결과**: `1`, `4`, `3`, `2`

- `1`, `4`: 동기 코드 → 즉시 실행
- `3`: 프로미스 콜백 → 마이크로태스크 큐 → 이벤트 루프에서 우선 처리
- `2`: `setTimeout` 콜백 → 콜백 큐 → 마이크로태스크 이후 처리

이처럼 실행 단계 중에도 비동기 작업의 우선순위가 다르게 적용됩니다.

---

## 참고 자료 및 관련 문서

- [ECMAScript Language Specification (ECMA-262)](https://tc39.es/ecma262/)
- [MDN Web Docs - Execution Context](https://developer.mozilla.org/en-US/docs/Glossary/Execution_context)
- [JavaScript Event Loop Explained](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Event_loop)
- [V8 JavaScript Engine Documentation](https://v8.dev/)

---

## 요약

자바스크립트의 **실행 단계**(Execution Phase)는 생성 단계 이후 코드가 실제로 평가되고 실행되는 핵심 과정입니다. 이 단계에서는 변수 할당, 함수 호출, 비동기 처리, 콜 스택 관리 등이 이루어지며, 자바스크립트의 동적 특성을 구현하는 기반이 됩니다. 개발자는 이 메커니즘을 이해함으로써 호이스팅, TDZ, 이벤트 루프 등의 동작을 정확히 파악하고, 예기치 않은 동작을 방지할 수 있습니다.