V8 Hidden Class


자바스크립트는 프로토타입 기반의 언어
클래스라는 것은 없으며 객체는 복제 과정을 통해 생성

딕셔너리를 이용해서 메모리 상에서 객체 속성의 위치를 찾아내는 건 비효율적
V8에서는 hidden classe이용
고정 객체 레이아웃과 유사하게 작동하는데 다만 런타임에 생성된다는 차이점

```typefunction Point(x, y) {    this.x = x;    this.y = y;}var p1 = new Point(1, 2);```
> ![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F56fdcc48-1188-448f-bc37-4205fbbd0021%2FUntitled.png?table=block&id=fb3525a2-52ae-4126-a9be-6df7e0a141d0&cache=v2)
> ![](https://www.notion.so/image/https%3A%2F%2Fs3-us-west-2.amazonaws.com%2Fsecure.notion-static.com%2F79ab1ade-73b8-46c6-bfa9-2666cac26833%2FUntitled.png?table=block&id=42fe0ff3-9e39-4b2e-a7bb-80ee6bc4407c&cache=v2)

> ![](https://www.notion.so/image/https%3A%2F%2Fmiro.medium.com%2Fmax%2F700%2F1*spJ8v7GWivxZZzTAzqVPtA.png?table=block&id=f1584adc-c6e9-4636-80d2-21927bff353c&cache=v2)

어떤 객체에 새로운 속성이 추가될 때마다 오래된 히든클래스는 새로운 히든 클래스에 대한 전환 경로로 업데이트됩니다

```typefunction Point(x, y) {    this.x = x;    this.y = y;}var p1 = new Point(1, 2);p1.a = 5;p1.b = 6;var p2 = new Point(3, 4);p2.b = 7;p2.a = 8;```
속성 할당 순서 다르면 다른 히든클래스 사용하므로 맞춰주자


히든클래스 전환이 중요한 이유
- 히든 클래스가 같은 방식으로 생성된 객체들 사이에 공통으로 사용
- 최적화 코드도 모두 동일


> [자바스크립트는 어떻게 작동하는가: V8 엔진의 내부 + 최적화된 코드를 작성을 위한 다섯 가지 팁](https://engineering.huiseoul.com/%EC%9E%90%EB%B0%94%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8%EB%8A%94-%EC%96%B4%EB%96%BB%EA%B2%8C-%EC%9E%91%EB%8F%99%ED%95%98%EB%8A%94%EA%B0%80-v8-%EC%97%94%EC%A7%84%EC%9D%98-%EB%82%B4%EB%B6%80-%EC%B5%9C%EC%A0%81%ED%99%94%EB%90%9C-%EC%BD%94%EB%93%9C%EB%A5%BC-%EC%9E%91%EC%84%B1%EC%9D%84-%EC%9C%84%ED%95%9C-%EB%8B%A4%EC%84%AF-%EA%B0%80%EC%A7%80-%ED%8C%81-6c6f9832c1d9)

