시작

읽기 전에 알면 좋은 내용:

• 브라우저나 node.js는 자바스크립트 엔진을 가지고 있어 자바스크립트가 실행될 수 있는 환경 (=environment)을 제공한다
• 해당 과정은 Chrome의 V8 엔진 기준으로 작성되었다
• 엔진 마다 해석 과정에서 약간의 차이가 있을 수도 있다

요약

1. 자바스크립트 코드 ->

2. parsing -> AST (자바스크립트 코드를 트리 구조로 변환한 형태) ->

3. interpretation -> 바이트 코드 (AST를 코드형태로 다시 변환함) ->

4. compilation -> 머신 코드

5. 실행

1. Step: parsing

parser는 자바스크립트 코드를 한줄씩 읽으며 두가지 작업을 진행한다

첫번째로 lexical 분석을 통해 자바스크립트 코드를 keyword나 단어로 구분해 의미있는 단어형태(=토큰)으로 구분한다

두번째로 sematic 분석을 통해 나열된 토큰들이 문법적으로 문제가 없는지 확인한다

결과물로 아래와 같이 AST(=abstract syntax tree)가 생성된다

위 사진에서처럼 AST에서는 코드가 작은 단위로 잘라진 형태이다

2. Step: interpretation

interpreter는 AST를 순회하며 바이트 코드를 생성한다

바이트 코드는 어셈블리와 비슷한 형태의 머신 코드에 가까운 형태의 코드이다

여기서 바이트 코드와 같이 language를 머신 코드로 변환하는 과정에서 생기는 중간 코드를 IR(=intermediate representation)이라고 부른다.

곧바로 머신 코드로 변환하지 않고 IR로 변환하는 이유는 2가지 인데

첫째로는 IR은 hardware independent 하기 때문이다. CPU 마다 머신 코드를 다르게 해석할 수 있다고 했는데 IR 형태로 만들어진 코드는 hardware 의존성이 없기 때문에 compilation 단계에서 해당 hardware에서 해석될 수 있는 머신 코드로 변환 될 수 있다

두번째 이유는 IR 형태에서 optimization을 진행하는 것이 더 효율적이라 그렇다고 한다

3. Step: compilation

JIT compiler는 바이트 코드를 가지고 중복되는 코드를 제거하거나 하는 등의 과정을 통해 optimize한 후 머신 코드로 변환한다

JIT compiler는 간단하게 interpretation과 compilation 변환 방법을 합친 개념으로 반복되는 내용은 compilation하고 그 외의 내용은 interpretation으로 처리해 기존 interpretation만 사용할때 보다 더 빠르다고 할 수 있다

끝

이와 같이 엔진의 deep한 원리를 알면 좋은점 한가지를 예로 들자면 babel과 같은 라이브러리를 사용할때 동작 방식을 큰 그림에서 이해 하는데 수월하다

참고로 Babel은 위의 파이프라인에서 parsing 이 후에 생성된 AST 구조를 변환해 ES6 문법을 ES5로 transpiling 하여 compatible한 코드를 생성 시켜 주는 자바스크립트 compiler이다

여기서 compile, transpile 용어를 섞어서 사용 했는데 compile은 한 언어로 다른 언어로 변환하는 작업을 의미하는 큰 개념이고 transpile은 compile의 하위 개념으로, 비슷한 구조를 가진 언어를 다른 비슷한 구조를 가진 언어로 변환한다고 이해하면 된다. (컴파일 예: c++ -> c, typescript -> javascript)

😊