[JavaScript] 자바스크립트 엔진과 런타임

자바스크립트 엔진

• 엔진이란? 쉽게 말해 자바스크립트를 실행시키는 '프로그램' 이다. 
• 가장 유명한 엔진은 구글의 V8 엔진이고, 크롬과 node.js를 구동시킨다. 
• 각 브라우저별로 고유한 엔진을 가지고 있고, 어떤 엔진이든 자바스크립트 엔진은 콜스택과 메모리 힙을 포함한다.

콜 스택

• 우리의 코드가 실제로 실행되는 영역이고, 이 작업은 콜 스택 내의 실행 컨텍스트에 의해서 이루어진다.
• 또한 원시타입 데이터가 이 영역에 저장된다. 

메모리 힙

• 구조화 되지 않은 메모리 풀(memory pool) 로 앱이 실행되기 위해 필요한 참조타입 데이터(객체)가 저장된다. 

컴퓨터는 0과 1밖에 모르기 때문에, 우리가 작성한 소스코드가 실제로 실행되기 위해서는 컴퓨터가 알아들을 수 있는 머신 코드로 변환하는 작업이 필요하다. 이 작업에는 크게 두 가지 종류가 있다.

compilation vs interpretaion (컴파일러 vs 인터프리터)

컴파일 방식 (compilation) : 소스코드 ⇒ (컴파일) ⇒ 파일 ⇒ (실행) ⇒ 프로그램 동작

• 컴파일러 방식은 전체 코드가 한번에 머신 코드로 변환된다.  그 뒤 변환된 코드로 어떤 컴퓨터에서든 실행할 수 있는 파일을 생성한다.
• 코드가 실행되는 것은 모든 컴파일이 진행된 다음에 가능하다. 
• 이 방식을 사용하는 언어를 컴파일 언어라고 하며, 이렇게 번역(소스코드 to 머신코드)을 실행하는 번역기를 컴파일러 라고 한다.

인터프리터 방식 (interpretation) : 소스코드 ⇒ (변환과 동시에 실행)  ⇒ 프로그램 동작

• 소스코드를 한줄 씩 읽어 내려가며 실행시키는 인터프리터가 실행된다. 
• 컴파일 방식과 다르게 파일이 생성되는 과정 없이, 한 줄의 코드가 머신코드로 변환되는 동시에 실행된다. 
• 인터프리터 언어의 단점은 한 번에 변환된 뒤에 실행되는 컴파일 언어보다 훨씬 느리다는 점이다.

자바스크립트는 인터프리터 언어에 해당한다. 
그러나 현대의 자바스크립트 엔진은 인터프리터 언어의 단점을 보완한, 소스코드를 컴파일한 뒤에 실행시키는 JIT(Just-in-Time) 방식을 사용한다. 

JIT 방식 (Just-in-Time) : 소스코드 ⇒ (컴파일)  ⇒ (실행)  ⇒ 프로그램 동작

• 소스코드를 머신코드로 컴파일 한 뒤 실행파일을 생성하지 않고 즉시 코드를 실행한다. 

자바스크립트 코드 컴파일 과정

• 파싱: 소스코드를 AST(Abstract Syntax Tree) - 추상 구문 트리 라는 자료구조로 파싱한다. 파싱이 시작되면 라인별로 코드가 분리되고 각 내용이 트리구조로 된 AST에 저장된다. AST는 이후 머신 코드로 변환된다.
• 컴파일: 앞에서 만들어진 AST를 머신 코드로 변환한다.
• 실행 : 머신 코드가 콜 스택에서 곧바로 실행된다.
• 최적화 : 자바스크립트 엔진은 이 과정을 진행하면서 머신 코드를 지속해서 최적화시킨다. 우선 빨리 실행될 수 있도록 최적화되지 않은 버전의 코드를 실행하고, 실행이 계속 되는 동안 머신 코드를 다시 컴파일하여 최적화한다. 이러한 최적화 과정이 있기 때문에 현대의 JS 엔진(V8 등)이 더욱 빠른 성능을 가질 수 있는 것이다. 
• 이러한 컴파일링 과정은 우리가 접근할 수 없는 별도의 쓰레드에서 진행된다. 

---

자바스크립트 런타임

• 자바스크립트를 사용하기 위해 필요한 모든 것이 들어있는 컨테이너(환경)
• 대표적 예시로 웹 브라우저와 Node.js가 있다. 

런타임 구성 요소(브라우저의 경우)

• 자바스크립트 엔진 : 자바스크립트를 구동하는 핵심 요소, 런타임의 심장!
• web APIs(DOM, Timers, fetch API 등등...) : 자바스크립트 엔진이 사용할 수 있는 기능으로, 엄밀히 말하면 자바스크립트 언어의 일부는 아니다.
• 콜백 큐 : 실행 대기중인 콜백함수가 저장되는 자료구조. 콜백 함수가 실행되면 콜백 큐에서 대기중인 메시지가 콜스택으로 넘어가 실행된다. 이 과정을 이벤트 루프 라고 한다.

참고자료

• The Complete JavaScript Course 2022: From Zero to Expert!

Learn Modern Javascript (Build and Test Apps) - Full Course