AST, 최적화 컴파일, 실행 컨텍스트 & 호이스팅
자바스크립트 코드는 브라우저나 Node.js 같은 환경에서 실행되기 전에 다양한 내부 과정을 거칩니다.
이 글에서는 다음의 주요 단계를 자세히 살펴봅니다.
- AST(Abstract Syntax Tree) 생성 과정
- 최적화 컴파일러(JIT) 과정
- 실행 컨텍스트와 콜 스택 구조
- 호이스팅(Hoisting)
1. AST 생성 과정
자바스크립트 엔진은 소스 코드를 내부 데이터 구조로 변환하기 위해 다음 단계를 거칩니다.
1.1 토큰화(Tokenization)
- 정의:
소스 코드를 키워드, 식별자, 연산자 등 기본 단위인 토큰으로 분리합니다. - 목적:
코드의 기본 구성 요소를 식별하고, 이후 파싱에 활용할 수 있도록 준비합니다.
1.2 파싱(Parsing)
- 정의:
토큰들을 사용해 구문 트리(Concrete Syntax Tree)를 생성합니다. - 역할:
코드의 계층적 구조를 분석하여 조건문, 함수, 반복문 등 각 요소 간의 관계를 파악합니다.
1.3 AST(Abstract Syntax Tree) 생성
- 정의:
구문 트리에서 불필요한 문법적 요소(예: 괄호, 문법적 장식)를 제거한 후, 코드의 의미와 구조만 남긴 추상 문법 트리를 만듭니다. - 특징:
- 노드(Node): 변수 선언, 함수 호출, 연산자 등 코드의 구성 요소를 표현합니다.
- 구조: 코드의 논리적 흐름과 관계를 간단하게 나타내어, 이후 최적화와 실행에 활용됩니다.
2. 최적화 컴파일러(JIT) 과정
자바스크립트 엔진은 처음에는 인터프리터 방식을 사용해 코드를 실행하지만, 성능 개선을 위해 최적화 컴파일러(JIT 컴파일러)를 사용합니다.
2.1 초기 인터프리터 실행
- 역할:
AST나 중간 표현(IR)을 바탕으로 바이트코드를 생성해 실행합니다. - 특징:
이 시점의 코드는 아직 최적화되지 않은 상태입니다.
2.2 핫 코드 감지 및 JIT 컴파일
- 핫 코드:
반복 실행되거나 빈번하게 호출되는 코드 영역을 의미합니다. - JIT 컴파일:
이런 핫 코드를 기계어 코드로 변환하여 실행 속도를 크게 향상시킵니다. - 최적화 기법:
- 인라인 캐싱: 함수 호출 시 실제 대상의 타입 정보를 캐싱해 빠른 접근을 가능하게 합니다.
- 타입 추론: 변수와 표현식의 타입을 미리 추론하여 불필요한 타입 검사 및 변환을 줄입니다.
- 함수 인라이닝: 자주 호출되는 작은 함수를 호출부에 직접 삽입해 함수 호출 오버헤드를 줄입니다.
2.3 디옵티마이제이션(Deoptimization)
- 정의:
최적화된 코드가 예상치 못한 데이터 타입이나 상황에 직면할 때, 기존의 인터프리터 방식으로 되돌리는 과정입니다. - 목적:
안정적인 실행을 보장합니다.
3. 실행 컨텍스트와 콜 스택
자바스크립트는 단일 스레드로 동작하며, 함수 호출 시마다 새로운 실행 컨텍스트가 생성되고, 이들이 콜 스택에 쌓입니다.
3.1 실행 컨텍스트(Execution Context)
실행 컨텍스트는 함수 실행 시 생성되는 환경 정보를 담은 객체입니다.
| 구성 요소 | 설명 |
|---|---|
| 변수 객체 (VO) | 함수 내에 선언된 변수, 함수, 매개변수를 저장합니다. 초기에는 선언만 등록되고, 값 할당은 이후에 이루어집니다. |
| 스코프 체인 | 현재 실행 컨텍스트와 상위 컨텍스트의 참조 링크로, 변수 탐색 시 상위 스코프까지 검색합니다. |
| this 바인딩 | 실행 컨텍스트 내에서 this가 가리키는 대상을 결정합니다. 호출 방식에 따라 값이 달라집니다. |
3.2 콜 스택(Call Stack)
- 동작 원리:
- Push: 함수가 호출되면 해당 함수의 실행 컨텍스트가 콜 스택의 최상단에 추가됩니다.
- Pop: 함수 실행 완료 시, 해당 실행 컨텍스트가 스택에서 제거됩니다.
- 구조:
LIFO(Last In, First Out) 방식으로 관리됩니다.
3.3 호이스팅(Hoisting)
- 정의:
실행 컨텍스트가 생성될 때, 변수와 함수의 선언이 먼저 처리되는 현상입니다. - 특징:
- 함수 선언: 전체 함수 내용이 컨텍스트에 등록되어, 코드 상의 위치와 관계없이 호출이 가능합니다.
- 변수 선언: 선언은 호이스팅되지만, 초기화(값 할당)는 해당 코드 라인에서 이루어집니다. 이로 인해 초기 호출 시
undefined가 될 수 있습니다.
4. 실행 컨텍스트 & 콜 스택 다이어그램
아래 다이어그램은 자바스크립트 코드가 실행되는 과정
flowchart TD
A[코드 실행 시작]
B[토큰화: 소스 코드를 토큰으로 분리]
C[파싱: 토큰을 사용해 구문 트리 생성]
D[AST 생성: 의미 중심의 트리 구조 생성]
E[바이트코드 생성: 초기 인터프리터 실행]
F[함수 호출 시 실행 컨텍스트 생성]
G[콜 스택에 실행 컨텍스트 Push]
H[호이스팅: 변수와 함수 선언 등록]
I[JIT 최적화: 핫 코드 컴파일]
J[함수 실행 완료 -> 실행 컨텍스트 Pop]
A --> B
B --> C
C --> D
D --> E
E --> F
F --> G
G --> H
H --> I
I --> J
웹 개발자입니다