JavaScript 실행 방식: 컴파일러 vs 인터프리터 vs JIT

 

JavaScript 실행 방식: 컴파일러 vs 인터프리터 vs JIT

JavaScript는 어떻게 실행될까요? 브라우저에서 코드가 돌아가는 과정을 정리했습니다.

 

1. 기본 개념

컴파일러 (Compiler)

소스 코드 → 변환 → 실행 파일 → 실행

예: C, C++

특징:

• ✅ 미리 변환해서 파일 생성
• ✅ 실행 속도 빠름
• ❌ 컴파일 시간 필요

예시:

// main.c
int add(int a, int b) {
    return a + b;
}

// 컴파일
$ gcc main.c -o main.exe  // 실행 파일 생성

// 실행
$ ./main.exe
```

---

### 인터프리터 (Interpreter)
```
소스 코드 → 바로 실행 (한 줄씩)

예: Python, 옛날 JavaScript

특징:

• ✅ 바로 실행 가능
• ❌ 실행 속도 느림 (매번 해석)
• ❌ 파일 생성 안 함

예시:

function add(a, b) {
  return a + b;  // 읽기 → 해석 → 실행
}

add(1, 2);       // 읽기 → 해석 → 실행
```

---

### JIT 컴파일러 (Just-In-Time)
```
소스 코드 → 인터프리터로 실행 + 자주 쓰면 컴파일

예: 현대 JavaScript (V8)
```

**특징:**
- ✅ 빠른 시작 (인터프리터)
- ✅ 빠른 실행 (자주 쓰는 코드는 컴파일)
- ✅ 파일 생성 안 함 (메모리에만 저장)

**핵심:** 인터프리터 + 컴파일러의 장점을 합침!

---

## 2. V8 엔진의 동작 방식 (Chrome, Node.js)

### 실행 과정
```
JavaScript 코드
    ↓
[1단계] Ignition (인터프리터)
    - 바로 실행 (빠른 시작)
    - 실행 횟수 카운팅
    ↓
[2단계] TurboFan (JIT 컴파일러)
    - 자주 쓰는 코드만 선택
    - 기계어로 컴파일
    - 메모리에 저장
    ↓
다음부터 빠른 실행 ⚡

 

 

 

 

코드로 보는 동작

function add(a, b) {
  return a + b;
}

// 첫 실행 - 인터프리터
add(1, 2);  // 느림 (한 줄씩 해석)

// 반복 실행
for (let i = 0; i < 10000; i++) {
  add(i, i + 1);  // 점점 빨라짐!
}
// → V8이 "자주 쓰이네?" 판단
// → 기계어로 컴파일 (메모리 저장)
// → 다음부터 매우 빠름 ⚡
```

---

## 3. TypeScript와 JavaScript 실행 흐름

### 전체 과정
```
[빌드 타임] TypeScript → JavaScript
TypeScript 코드
    ↓ tsc 또는 Babel (트랜스파일)
JavaScript 파일 생성 ✅
    ↓

[런타임] JavaScript 실행
브라우저 로드
    ↓ V8 엔진
Ignition (인터프리터)
    - 바로 실행
    ↓
TurboFan (JIT 컴파일)
    - 자주 쓰는 코드만 기계어로
    - 메모리에 저장 (파일 X)
    ↓
실행 완료 ⚡

 

 

 

구체적인 예시

개발 코드

// src/App.tsx
const add = (a: number, b: number): number => {
  return a + b;
};

빌드 후

// build/App.js (파일 생성됨!)
const add = (a, b) => {
  return a + b;
};
```

#### 브라우저 실행
```
1. App.js 다운로드
2. Ignition 인터프리터로 실행
3. add 함수가 자주 호출됨
4. TurboFan이 기계어로 컴파일 (메모리)
5. 다음부터 빠른 실행
```

---

## 4. 용어 정리

### 컴파일 (Compile)

**넓은 의미:** 소스 코드를 다른 형태로 변환
```
예시:
- C → 기계어
- TypeScript → JavaScript
- JavaScript → 기계어 (JIT)
```

### 트랜스파일 (Transpile)

**정확한 의미:** 비슷한 수준의 언어로 변환 (컴파일의 일종)
```
예시:
- TypeScript → JavaScript
- ES2020 → ES5
- JSX → JavaScript
```

**핵심:** 트랜스파일도 컴파일의 한 종류!

---

## 5. 비교표

| 특성 | 컴파일러 | 인터프리터 | JIT |
|------|---------|-----------|-----|
| **시작 속도** | 느림 (컴파일 필요) | 빠름 | 빠름 |
| **실행 속도** | 빠름 | 느림 | 빠름 |
| **파일 생성** | ✅ | ❌ | ❌ (메모리만) |
| **최적화** | 빌드 타임 | 없음 | 런타임 |
| **예시** | C, C++ | Python | JavaScript (V8) |

---

## 6. 핵심 정리

### JavaScript = 인터프리터 + JIT 컴파일
```
✅ 인터프리터: 바로 실행 (빠른 시작)
✅ JIT 컴파일: 자주 쓰는 코드만 최적화 (빠른 실행)
✅ 메모리 저장: 파일 생성 없이 메모리에만 (유연함)
```

### TypeScript → JavaScript → 실행
```
1차 변환: TypeScript → JavaScript (트랜스파일)
   - 도구: tsc, Babel
   - 결과: .js 파일 생성

2차 실행: JavaScript 실행 (V8 엔진)
   - 인터프리터 + JIT 컴파일
   - 메모리에만 저장
```

### 왜 이렇게 복잡할까?
```
빠른 시작 + 빠른 실행 + 동적 최적화

- 컴파일러: 실행은 빠르지만 시작이 느림
- 인터프리터: 시작은 빠르지만 실행이 느림
- JIT: 둘의 장점을 합침! 🎯

 

 

 

---

마무리

JavaScript는 인터프리터 언어입니다.

하지만 현대 JavaScript 엔진(V8, SpiderMonkey 등)은 단순히 인터프리터만 사용하지 않고, 인터프리터와 JIT 컴파일러를 함께 사용하는 하이브리드 방식으로 실행합니다.

 

구분:

• JavaScript (언어): 인터프리터 언어
• V8 (실행 엔진): 인터프리터 + JIT 컴파일러

실행 과정:

• 첫 실행: 인터프리터로 빠르게 시작
• 반복 실행: JIT 컴파일로 빠르게 실행
• 메모리 저장: 실행 중 계속 최적화

이것이 현대 브라우저에서 JavaScript가 빠른 이유입니다! ⚡

 

핵심:

• 언어 ≠ 실행 환경
• JavaScript (언어) vs V8 (엔진)
• 인터프리터 언어지만, 엔진이 JIT로 최적화!