[JS] 자바스크립트 동작원리

컴퓨터는 이진코드(0, 1)두개의 값만 알아들을 수 있다. 하지만 우리가 작성하는 자바스크립트는 0, 1이 아닌 영어에 가깝고 영어를 알고있다면 배우지 못한 사람도 대충은 알아볼 수 있고 배운다면 영어로 코딩 또한 가능하다.

그렇다면 컴퓨터는 어떻게 우리가 영어로 작성한 자바스크립트 코드를 알아들을 수 있는지 알아보자.

자바스크립트의 엔진

V8

자바스크립트 코드를 동작시키는 장치를 엔진이라고 말한다.

현재 사용되는 엔진은 대부분 Google에서 C++로 작성된 V8엔진을 사용하며 Chrome과 Node.js에서도 해당 엔진을 사용한다.

개발자가 작성한 자바스크립트 코드는 V8엔진에 의해서 컴퓨터가 알아들을 수 있는 언어로 변환된다.

그럼 어떻게 변화되는지 알아보자.

자바스크립트(V8) 엔진구조

JavaScript 엔진구조

자바스크립트 엔진(V8 엔진을 의미)은 위 사진처럼 구성되어 있다.

• Parser : Lexical Analysis(코드의 의미를 이해하기 위해 token이라는 작은 단위들로 코드를 쪼개는 일)를 진행한다.
• AST : Abstract Syntax Tree의 약자로, parser에서 분해된 token들을 기반으로 나무 구조를 만든다.(ex. DOM Tree, CSSOM Tree가 구성되는 것과 비슷한 개념이다.)
  • ☞ AST Explorer : 코드가 어떻게 나무 구조로 변경되는지를 시각적으로 볼 수 있는 사이트.
• AST에서 생성된 나무 구조는 인터프리터와 컴파일러를 거쳐서 컴퓨터가 이해할 수 있는 Bytecode와 Optimized Code로 변환되는데, 아래에서 훨씬 더 자세하게 다뤄본다.

자바스크립트 엔진의 구조와 구성 원리를 이해하면, 반대로 코드를 작성할 때 어떻게 Optimized Code, 효율적으로 최적화된 코드를 작성할 수 있는지를 알 수 있다.

인터프리터와 컴파일러

위에서 설명한 AST를 사용하여 인터프리터나 컴파일러를 거쳐 컴퓨터가 이해할 수 있는 코드로 변환된다고 나와있다.

그렇다면 인터프리터와 컴파일러의 차이점이 무엇일까.

 

1. 인터프리터 : 코드를 한 줄 한 줄 읽어내려가며 한 줄씩 Bytecode로 변환한다.
2. 컴파일러 : 한 줄 한 줄 번역하지 않고 파일 전체를 읽은 뒤, 코드의 의미를 해석하고 파일 전체를 기계어로 컴파일해서 변환한다.

위 사진을 통해 예를 들어보자면, 인터프리터의 경우 자바스크립트 파일을 입력받으면 한 줄 한 줄 해석하면서 중간 단계의 Bytecode로 변환한다. 반면 컴파일러는 자바스크립트 코드를 입력받으면 파일 전체를 읽은 뒤, 이를 컴파일하여 기계어로 변환한다. 그리고 이 기계어(Machine Code)는 CPU로 입력되어 코드가 실행된다.