[JS] JS 엔진 - V8의 Hidden Class

| Hidden Class

- 클래스 기반 언어가 아닌 JS를 클래스 기반 언어의 메모리 관리 처럼! 할 수 있게 해준다.

 

자바스크립트는 클래스가 아닌 프로토타입 개념의 언어이다.

다른 개념으로 얘기하자면, JS는 동적 타입 언어이다.

 

---

여기서 잠깐, 동적 타입 언어(Dynamically typed languages)란?

Javascript, Python과 같이 타입을 써주지 않는 언어를 말한다. 그래서 런타임에 타입이 결정된다.

반대로 정적 타입 언어(Statically typed language)의 경우, 타입을 명시하고 코드를 작성하기 때문에 컴파일 때 변수의 타입이 결정된다. Java, C, C++ 등이 이에 해당한다.

 

---

 

정적 타입 언어들은 컴파일 때 어떤 변수의 메모리 위치를 특정할 수 있고 런타임 때 offset 값만으로 변수에 접근이 가능하지만, JS는 런타임 때 필드 구조가 변경 될 수 있기 때문에 불가능하다. 그래서 객체의 Property에 대한 정보들을 모든 객체가 가지고 있어야 한다. 객체를 생성해도, 언제 변경이 될 지 모르기 때문이다.

 

Hidden Class는 이를 해결하기 위해 클래스 개념이 없는 JS에 마치 클래스 기반 언어 처럼 메모리 관리를 할 수 있게하는 최적화 기법이다.

 

JS에서 객체가 생성되면, Hidden Class 하나가 생성된다. 그리고 이 객체에 새로운 프로퍼티가 생기면, 새로운 프로퍼티가 반영된 Hidden Class가 또 생성된다. 이 때, 새로 생성된 Hidden Class와 기존 Hidden Class는 연결되어 있다.

 

간단하게 코드로 살펴보자.

 

1. 객체 생성

 

function Person(name){
    this.name = name;
}
 
let alice= new Person('Alice');

 

위와 같은 코드가 실행되면 Person에 대한 Hidden Class가 생긴다. 이걸 p1이라고 해보자.

p1은 프로퍼티 name에 대한 오프셋을 가지고 있을 것이고, 지금 alice는 p1을 바라보고 있을 것이다.

이제 새로운 객체를 만들고 프로퍼티를 추가해보자.

 

2. 새로운 객체 생성 및 프로퍼티 추가

 

let chris = new Person('Chris');
chris.age = 20;

 

chris라는 객체를 생성했고, 이 친구는 처음에 Hidden Class p1을 보고 있을 것이다.

그러나 이 후 chris 객체에 age라는 프로퍼티를 추가한 순간, name과 age 프로퍼티에 대한 정보를 가지는 Hidden Class p2가 추가된다. 이 p2는 기존의 p1에서 연결되어 있으며, chris는 p2를 참조하고 있을 것이다.

 

이 처럼 Hidden Class는 객체에 새로운 프로퍼티가 추가될 때 마다 계속 생성되고, 각각의 객체는 자신의 구성에 맞는 Hidden Class를 참조하고 있게 된다. 그리고 이 Hidden Class에 입력되어 있는 프로퍼티 정보를 보며 변수에 접근 할 수 있게 되는 것이다!

 

참고

https://sjh836.tistory.com/92

V8 javascript 엔진 (Hidden Class, 인라인캐싱, 메모리구조, 호출스택, heap, GC)

https://engineering.linecorp.com/ko/blog/v8-hidden-class/

V8의 히든 클래스 이야기 - LINE ENGINEERING

https://meetup.toast.com/posts/78