자바스크립트 런타임과 자바스크립트의 실행 과정

1. Runtime(런타임)이란?

코드를 실행하기 위해 필요한 것이 모두 들어있는 상자를 런타임이라고 한다.

프로그래밍 언어가 구동되는 환경이라고 할 수 있다.

자바스크립트 런타임 안에는 자바스크립트 엔진이 들어있다.

 

자바스크립트의 런타임의 종류

1) 웹 브라우저(크롬, 파이어폭스..)

2) Node.js(c++로 작성된 런타임)

 

Javascript Engine(자바스크립트 엔진)

자바스크립트 코드를 실행하는 프로그램.

런타임마다 다른 엔진이 장착되어 있음.

(예: V8 - 크롬과 Node.js에서 사용)

 

js는 싱글 스레드 언어이기 때문에 하나의 콜 스택과 힙을 갖는다. 

- Call Stack : 코드를 실행하는 곳

- Heap : 오브젝트를 저장하는 곳

 

2. 런타임의 구조 - 브라우저인 경우

1) Web API

자바스크립트 엔진이 사용할 수 있는 기능을 모아둔 것.

자바스크립트의 일부는 아니지만 window 오브젝트로 자바스크립트에서 다룰 수 있다. 

 

2) Callback Queue

Callback queue(Message queue)는 자바스크립트 엔진이 브라우저에서 일어나는 이벤트를 저장해두는 곳이다.

저장된 이벤트는 바로 프로세싱하지 않고 call stack이 빌 때까지 기다린다.

call stack이 비면 자바스크립트 엔진이 Callback queue에 저장된 이벤트를 하나씩 프로세싱하며

event listener가 있는 경우 호출한다.

 

Callback queue를 관리하는 이러한 방식은 이벤트 루프를 통해 구현된다.

 

3. 런타임의 구조 - Node.js인 경우

4. 자바스크립트의 실행 과정

기본적으로 자바스크립트는 인터프리터 언어인데,

실행속도가 느린 인터프리터 방식을 보완하기 위해 JIT(Just-in-time) 컴파일 방식을 사용하는 추세이다.

* JIT(Just-In-Time) Compilation 

컴파일 방식처럼 전체 코드를 머신코드로 한 번에 변환하고

인터프리팅 방식처럼 바로 실행함

 

컴파일 VS 인터프리팅 참고

 

1) js 소스 코드 작성

2) babel로 소스 코드 transpile(ex. 소스 코드를 원하는 자바스크립트 버전으로 바꿔줌)

3) Transpile된 코드에 webpack으로 필요한 build를 꾸려줌

4) 브라우저의 JS 엔진에 도착

5) JS 엔진 - 코드 Tokenizing/Lexing

6) JS 엔진 - 토큰 parsing

7) static error(문법 오류)가 있으면 진행 중단 /  없으면 AST 생성

8) AST를 기계가 이해할 수 있는 코드인 Binary IR(Intermediate Representation)로 변환

9) JIT Compiler로 Binary IR를 최적화

10) JS VM(Virtual Machine)으로 실행 (js 엔진이 execution context 생성, 소멸)

11) 실행 중 Binary IR 최적화 / 실행 반복 => 처리 속도 높아짐

 

자바스크립트가 compile을 사용하는 언어라는 증거

1) 뒷 줄에 오류가 나면 앞 줄의 코드도 실행이 안 됨.

var greeting = "hey";
console.log(greeting); // 아랫줄 에러 때문에 컴파일 x => 프린트 안 됨
greeting = ."Hi"; // SyntaxError: unexpected token .

2) Hoisting(function, variable을 컴파일 단계에서 메모리에 저장, 코드 실행 전에 사용 가능한 상태로 만들어주는 것.)

 

 

 

 

참고

유데미 - The Complete JavaScript Course 2022: From Zero to Expert by Jonas Schmedmann