[06-01] JavaScript 기본 - 3 엔진 구동 방식

1. JS 엔진의 동작 원리

1.1 주요 구성 요소

- 실행 요소 : 싱글 스레드(single-threaded)

메모리 구성
Call Stack	1) 함수의 순차적 적재 및 실행(LIFO)
	2) string, number, boolean, null, undefined의 원시 타입 데이터 저장
	3) 각 함수마다 함수의 실행환경인 실행 컨텍스트(Exeution Context)를 생성
Memory Heap	1) 선언 및 할당된 변수 및 함수 저장
	2) 객체, 배열, 함수 등의 참조 타입 저장
	3) 렉시컬 환경(Lexical Environment, block-level)과     변수 환경(Variable Environment, Function-level )에 저장

- 이외에도 구성요소가 있음을 유의(Web API 등..)

---

1.1.1 실행 컨텍스트(Exeution Context)

: 함수 구동을 위한 메모리 영역

: 변수, 함수 선언, this 등의 값 포함 -> 모든 실행 컨텍스트는 렉시컬 환경, 변수환경을 포함

: 함수 실행 시마다 생성

 

• 전역 실행 컨텍스트(Global Execution Context)
  : Global Scope
  : 코드가 처음 실행될 때, JS 엔진은 전역 실행 컨텍스트를 생성
  : 전역 객체(WB-window, WS-global)
• 함수 실행 컨텍스트(Function Execution Context)
  : 함수가 호출되면, 해당 함수의 실행 컨텍스트가 생성
  : 함수 블럭 내에서의 변수, 함수, this, argument 등을 포함

---

 

1.2 JS 엔진 수행 방식

1. JS 코드 파싱 및 추상 구문 트리(abstract syntax tree, AST)로 변환
2. 실행중 JIT(Just-In-Time) 컴파일을 통해 최적화 후, 인터프리터
   : V8의 경우 lgnition을 통해 바이트 코드 생성 및 TurboFan을 통해 자주 호출되는 코드를 컴파일 최적화
3. 실행(이 때, 호이스팅, 이벤트 루프, 콜백 큐 등을 통해 흐름 제어)

---

1.3 JS 엔진의 함수 수행 방식 

1. Creation(Pre-parsing) Phase
   : 함수(또는 파일)을 분석하여 메모리 내 변수/함수 적재
   
   • 변수 선언 + Hoisting
     - var의 경우 호이스팅과 동시에 초기화(undefinde값으로)
     - const, let의 경우 호이스팅만, 초기화는 실행 컨텍스트가 활성화 되었을 때 
     
     
   • 함수 선언
     - 함수 또한 호이스팅
     - 함수에서 변수 참조 시, 선언된 시점(Lexing)의 변수를 참조 ==> Lexical Scope
2. Execution Phase
   : 함수 실행을 위한 메모리(Exeution Context, Lexical Environment 등) 확보 및 실행
   • 변수 할당 + Scope Chain
     : 변수 할당 시, 함수 내에 없다면 앞선 함수의 호출지에서의 선언을 찾아봄
   • 함수 실행
     : 함수 실행 시, 함수 선언지로부터 연결된 메모리 영역을 확보 후,
     : 그 안에서 함수 실행

 

 

---

참조

ASAC 수업자료

V8 엔진은 어떻게 내 코드를 실행하는 걸까?