JavaScript Engine Part 1

JavaScript Engine 개요

JavaScript Engine은 Parser, Interpreter, Optimizing Compiler로 구성되어있다.

 

JavaScript Engine 개요

JavaScript 소스 코드를 받아서 Parser를 통해 파싱을 수행하고, AST(Abstract Syntax Tree)를 만든다.

AST를 직역하면 추상 구문 트리로 컴파일러에서 사용되는 자료 구조이고, 사람이 작성한 코드를 컴퓨터가 알아듣기 쉽게 만드는 역할이라고 보면 된다.

 

이후 Interpreter는 도출된 AST를 기반으로 고급 언어로 작성된 코드를 가상 머신이 이해할 수 있는 bytecode로 변환 및 실행해준다.

 

코드 실행의 효율을 늘리기 위해 JavaScript Engine은 bytecode를 실행하면서 자주 실행된 코드를 수집하는데,

bytecode와 수집된 데이터(profiling data)를 optimizing compiler로 보내 최적화를 진행한다.

 

최적화가 완료되면 optimized code로 변환이 되는데, 이는 기계어다.

 

반복되는 코드를 optimize(최적화)하는 과정에서 최적화에 실패하거나 문제가 발생하는 경우 다시 bytecode로 되돌리는 deoptimize를 진행한다.

 

Chrome의 JavaScript Engine인 V8에서는 Interpreter를 Ignition, optimizing compiler를 TurboFan이라고 부른다.

 

JavaScript's Object Model

JavaScript의 Object와 Array에는 숨겨진 Property가 존재한다.

 

일반적으로 다음과 같은 object가 있을 경우

let object = { x:5, y:6 };

object라는 객체에는 x, y property만을 갖는 것으로 인지한다.

Object Model

하지만 실제 Object property attributes에는 x, y에 해당하는 [[Value]]를 제외하고도 3개의 property attributes가 더 있다.

• [[Writeable]] : 재할당 가능 여부를 나타냄
• [[Enumerable]] : for...in 루프에서 열거될 수 있는지를 나타냄
• [[Configurable]] : 해당 property를 삭제할 수 있는지를 나타냄

 

재할당 예시

let object = { x:5, y:6 };
object = { x:10, y:11 }; // property 변경

// or

object = {} // property 초기화

재할당은 위 코드와 같이 object라는 객체에 다른 property값으로 채워 넣거나, 초기화할 수 있는지 여부를 의미한다.

 

 for...in 루프에서 객체 열거 예시

let object = { x:5, y:6 };

for(let prop in object) {
	console.log(prop , object[prop]); // x 5, y 6 출력
}

for...in 루프에서 객체 열거는 위 코드와 같이 object 객체 안에서 property를 열거하여 출력이 가능한지 여부를 의미한다.

 

다음으로 Configurable은 property에 대해 삭제가 가능한지 여부를 의미하며 false로 설정될 경우 삭제가 불가능하다.

일반적으로 생성된 객체의 property attributes는 모두 true를 갖으며 Object.getOwnPropertyDesciptor() 메서드를 통해 확인이 가능하다.

let descriptor = Object.getOwnPropertyDescriptor(obj, propertyName);

// obj는 정보를 얻고자 하는 객체
// propertyName은 정보를 얻고자 하는 객체 내 프로퍼티

obj 객체의 'x' property에 대한 attributes

 

JavaScript Array는 Object와 유사한 형태를 갖지만 length라는 property가 추가된다.

Array Model

let array = ['a'];

다음과 같이 array에는 'a' 문자열을 저장하고 있다.

Object와는 다르게 Array에는 'length'라는 이름의 property가 자동으로 생성되고, 해당 property의 [[value]]에는 배열의 길이를 나타내는 값이 저장된다.

 

'length'  property의 [[value]]는 배열의 길이에 맞춰 자동으로 변경된다.

let array = ['a'];
array[1] = 'b';

array를 선언할 때는 'a' property 하나만 갖기 때문에 'length'의 값은 1이였지만

array에 'b'를 추가할 경우 'length'의 값이 2로 설정된다.

 

Array Model - 'length'의 [[value]] 설정

또한 'length' property attributes는 [[Writeable]]을 제외하고 [[Enumerable]], [[Configurable]]이 false로 설정되어 for...in 루프에서 열거하여 사용할 수 없고, 'length' property를 삭제할 수 없다.

---

Reference

• https://mathiasbynens.be/notes/shapes-ics