[Javascript] 자바스크립트 객체 - 히든클래스, 인라인캐시

자바스크립트의 객체는 다른 정적 타입 언어에서 흔히 볼 수 있는 클래스나 구조체와 다르게 런타임 동안 자유롭게 생성, 수정, 확장될 수 있다. 예를 들어 다음과 같은 코드에서 객체를 선언하고 나서 언제든지 프로퍼티를 추가하거나 삭제할 수 있다.

 

const person = { name: "Jongbin", age: 29 };
person.job = "Programmer";

 

 

객체 person을 생성하고 이후에 job이라는 새로운 프로퍼티를 추가했다. Javascript의 이런 유연성 덕분에 개발자는 어떤 상황에서도 객체의 구조를 자유롭게 변경할 수 있다. 동적 타이핑(dynamic typing)과 동적 객체 구조(dynamic object structure)가 결합된 이런 특성으로 편하게 사용할 수 있다.

 

하지만 이런 동적인 특성에는 성능에 관한 문제가 존재한다. 컴파일 시점에 객체의 구조가 고정되지 않기 때문에 자바스크립트 엔진은 런타임에서 매번 객체의 구조를 확인하고 프로퍼티에 접근해야 한다. 만약 동일한 코드에서 여러 번 같은 프로퍼티에 접근한다고 하더라도 객체의 구조가 동적으로 변경될 가능성이 있기 때문에 매번 그 구조를 확인해야 하는데 이로 인해 성능이 저하될 수 있다.

---

✓ 히든 클래스(Hidden Classes)

 

자바스크립트 엔진은 이러한 성능 문제를 해결하기 위해 내부적으로 히든 클래스를 사용한다. 히든 클래스는 객체의 구조를 효율적으로 추적하고 관리하기 위한 내부적인 최적화 개념이다. 자바스크립트 엔진은 객체가 생성될 때 그 객체의 구조(프로퍼티 이름, 순서 등)를 기반으로 히든 클래스를 동적으로 생성하고 같은 구조를 가진 객체끼리는 동일한 히든 클래스를 공유하도록 한다. 이로써 엔진은 각 객체마다 매번 새로운 구조를 확인할 필요 없이 같은 히든 클래스를 참조하는 객체에 대해 동일한 방식으로 프로퍼티에 접근할 수 있게 된다.

 

히든 클래스에는 다음과 같은 특징이 존재한다.

 

• 객체는 반드시 하나의 히든 클래스를 참조한다.
• 히든 클래스는 각 프로퍼티에 대해 메모리 오프셋을 가지고 있다.
• 동적으로 새로운 프로퍼티가 만들어질 때, 혹은 기존 프로퍼티가 삭제되거나 기존 프로퍼티의 데이터 타입이 바뀔 때는 신규 히든 클래스가 생성되며, 신규 히든 클래스는 기존 프로퍼티에 대한 정보를 유지하면서 추가적으로 새 프로퍼티의 오프셋을 가지게 된다.
• 히든 클래스는 프로퍼티에 대해 변경이 발생했을 때 참조해야 하는 히든 클래스에 대한 정보를 갖는다.
• 객체에 새로운 프로퍼티가 만들어지면, 현재 참조하고 있는 히든 클래스의 전환 정보를 확인한 후, 현재 프로퍼티에 대한 변경이 전환 정보의 조건과 일치하면, 객체의 참조 히든 클래스를 조건에 명시된 히든 클래스로 변경시킨다.

오프셋(offset)은 메모리 주소에서 특정 위치를 나타내는 개념. 쉽게 말해서, 어떤 데이터를 저장한 기준점(메모리의 시작점)으로부터의 거리 또는 차이를 의미한다.

 

 

다음과 같은 두 개의 객체가 있을 때, obj1과 obj2는 동일한 프로퍼티(x, y)와 동일한 구조를 가지므로 자바스크립트 엔진은 이 두 객체에 대해 동일한 히든 클래스를 생성한다. 

 

const obj1 = { x: 10, y: 20 };
const obj2 = { x: 30, y: 40 };

 

 

프로퍼티가 추가되면 더이상 같은 같은 히든클래스를 참조하지 않는다.

obj2에 프로퍼티 z가 추가되면서 obj2의 객체탐색을 위한 새로운 히든클래스가 생성된다. 최초에 생성될 때를 제외하고 프로퍼티가 추가되면 새로운 히든클래스가 생성되게 된다.

 

obj2.z = 50;

// obj1 = { x: 10, y: 20 };
// obj2 = { x: 30, y: 40, z: 50 };

 

 

🧐 그런데 이 히든클래스를 이용하면 왜 성능이 향상되는 것일까?

자바스크립트에서 값을 사용할 때 실제로는 별자에 접근하는 것이 아닌 메모리에 접근해야 하기 때문이다. obj1의 프로퍼티 x에 접근하려고 할 때, 별자를 통해서 표현하지만 실제로는 컴퓨터의 메모리상에 위치하는 어딘가에 접근해서 실제 값은 10을 알아내야 한다.

 

결국 히든클래스는 오프셋을 가지고 있는 있는 구조체이므로 이 오프셋을 이용해서 실제 메모리 위치에 더 빨리 접근할 수 있게 된다.

어떤 식별자는 실제로 값을 가르키지 않고 메모리 주소를 가지고 있다. 그렇다면 메모리 상의 실제 데이터의 첫 위치를 가지고 있는 것이 된다. 여기서 히든클래스의 오프셋 값을 가지고 내가 접근하려고 하는 메모리주소를 바로 구할 수 있다. 따라서 다른 객체이면서 동일한 히든클래스를 공유하더라도 각각 다른 메모리에 접근할 수 있게 된다.

 

 

여기서 한가지 의문점이 든다. 프로퍼티의 이름은 같을 수 있으나, 가지고 있는 값이 다를텐데 어떻게 객체마다 동일한 히든클래스를 공유할 수 있을까?

 

예를 들어 다음과 같은 상황이다.

const obj1 = { 
	x: "aaaaaaaaaaaaaaaaaaaaaa...", 
	y: { y1: 1, y2: 2, ... } 
};

const obj2 = { x: 30, y: 40 };

 

obj1과 obj2는 프로퍼티의 이름이 같고 구조가 동일하기 때문에 동일한 히든클래스를 공유할 것이다. 동일한 히든클래스를 공유하기 때문에 각 프로퍼티마다 오프셋이 동일할 것이다. 원시값(number, string), 객체타입으로 가지각색인데 어떻게 동일한 메모리 위치에 접근할 수 있을까?

 

결론을 먼저 이야기하자면, 실제로 메모리에 저장될 때 저장되는 방식이 다르기 때문에 전혀 문제가 없다.

 

📘 자바스크립트 원시값(Primitive Values)의 저장 방식

자바스크립트의 원시값은 number, string, boolean, null, undefined, symbol 등을 포함한다. 이 값들은 보통 두 가지 방법으로 처리된다.

• 숫자(number)는 일반적으로 자바스크립트 엔진에서 64비트 부동소수점 값(IEEE 754 표준)을 사용해 메모리에 저장된다. 따라서 숫자는 64비트(8바이트)의 고정된 크기를 차지한다. 
• boolean, null, undefined 값들은 매우 작은 크기의 값으로 대개 1바이트나 소수의 비트만 사용하여 저장된다.
• 문자열(string)의 경우는 조금 다르다. 문자열은 가변 길이이므로 실제 값은 메모리의 다른 위치에 저장되며 그 위치(메모리 주소)를 참조하는 방식으로 처리된다. 

 

위 내용을 정리해보면 다음과 같다.

• number, boolean: 크기가 고정된 값들은 객체의 메모리 오프셋에 직접 저장된다. 자바스크립트에서는 숫자가 64비트로 고정되어 있고 불리언은 매우 작은 공간을 차지하기 때문에 같은 크기로 저장할 수 있다.
• string 및 참조 타입: 문자열은 고정된 크기를 가지지 않으므로 참조 방식으로 저장된다. 객체의 메모리 오프셋에는 문자열 값이 아니라 그 문자열이 저장된 메모리의 주소가 저장된다. 이런 방식은 문자열뿐만 아니라 object, array, function과 같은 참조 타입에도 동일하게 적용된다. 따라서 고정된 크기의 메모리 주소(보통 32비트 또는 64비트 크기)를 사용해 참조된다.

 

오프셋으로 접근한 위치는 결국 다 동일한 크기의 메모리 사이즈를 가지고 있기 때문에 객체의 프로퍼티 이름만 동일하더라도 동일한 히든클래스를 이용해서 관리가 가능하다.

 

 

예를 들며 조금 더 쉽게 풀어보자면 다음과 같다.

 

• 프로퍼티 저장 크기: 자바스크립트에서 모든 프로퍼티는 고정된 크기의 공간을 차지한다. 원시값과 참조 값이 메모리에 저장될 때, 원시값은 직접 메모리에 저장되고 참조 값은 메모리 주소가 저장된다. 보통 이 크기는 32비트(4바이트) 또는 64비트(8바이트)로 고정된다.
  • 숫자 값: 64비트 부동소수점으로 저장되므로 일반적으로 8바이트를 차지한다.
  • 참조 값: 객체, 배열, 함수 등의 참조는 메모리 주소를 저장하므로 참조 값도 64비트(8바이트)를 차지한다.
  즉, 값의 크기와 관계없이 모든 프로퍼티는 64비트(8바이트) 크기의 고정된 공간을 차지한다고 볼 수 있다.

 

• 오프셋 계산: 각 프로퍼티가 동일한 크기를 가지므로 자바스크립트 엔진은 히든 클래스를 기반으로 프로퍼티들의 상대적 오프셋을 결정한다. 만약 첫 번째 프로퍼티의 오프셋이 0이라면 두 번째 프로퍼티의 오프셋은 첫 번째 프로퍼티가 차지한 8바이트 다음에 위치하게 된다.
  • x의 오프셋: 0 (첫 번째 프로퍼티)
  • y의 오프셋: 8 (두 번째 프로퍼티, 첫 번째 프로퍼티의 8바이트 뒤)
  • z의 오프셋: 16 (세 번째 프로퍼티, 두 번째 프로퍼티의 8바이트 뒤)

 

• 값의 타입에 따른 차이: 프로퍼티의 값이 원시값이든 객체 참조이든 오프셋은 동일한 방식으로 계산된다.
  • 숫자값, 불리언 등 원시값: 그 값 자체가 8바이트 공간에 저장된다.
  • 객체, 문자열 참조 값: 메모리에서 다른 곳에 있는 객체, 문자열의 주소(참조)가 8바이트 공간에 저장된다.

---

✓ 인라인 캐시(Inline Cache)

인라인 캐시는 자바스크립트 엔진에서 성능 최적화를 위해 사용하는 기술이다. 코드 실행 중에 타입이 계속 바뀌는 상황에서 객체의 프로퍼티에 빠르게 접근할 수 있도록 도와준다. 히든 클래스와 함께 작동하며 인라인 캐시는 프로퍼티 접근에 대한 정보를 기억해 두고 반복적인 접근 시 빠르게 처리할 수 있게 한다.

 

인라인 캐시는 객체의 프로퍼티에 접근할 때 자주 사용하는 메모리 경로를 캐시해두고 이후 같은 프로퍼티에 다시 접근할 때 캐시된 경로를 이용해 빠르게 처리하는 방식이다.

 

인라인 캐시는 일반적으로 다음과 같은 방식으로 동작한다.

• 처음 프로퍼티에 접근할 때: 자바스크립트 엔진은 객체의 히든 클래스를 사용하여 해당 프로퍼티가 메모리 상에서 어디에 있는지 확인한다. 이때 경로(프로퍼티의 오프셋 위치)와 관련된 정보를 인라인 캐시에 저장한다.
• 다음에 같은 프로퍼티에 접근할 때: 만약 객체가 같은 히든 클래스를 참조하고 있다면, 인라인 캐시를 사용하여 미리 저장된 경로를 이용해 객체의 구조를 다시 확인하지 않고, 바로 해당 프로퍼티에 접근할 수 있다.

캐시 미스(Cache Miss)
객체가 다른 히든 클래스를 가지거나, 예상과 다른 구조를 가질 경우, 인라인 캐시는 해당 정보를 사용할 수 없다. 이 경우 자바스크립트 엔진은 다시 히든 클래스를 확인하여 새로운 경로를 찾는다.

인라인 캐시의 종류

인라인 캐시에는 크게 두 가지 방식이 존재한다.

• 모노모픽 캐시(Monomorphic Inline Cache): 특정 함수에서 동일한 타입이나 히든 클래스를 가진 객체에 대해 하나의 캐시를 사용한다. 즉, 같은 함수가 항상 동일한 히든 클래스의 객체를 처리할 때 유용하다.
• 폴리모픽 캐시(Polymorphic Inline Cache): 동일한 함수에서 여러 종류의 히든 클래스나 타입을 처리할 때 사용된다. 여러 히든 클래스에 대한 캐시 정보를 저장하여 함수가 다양한 타입을 처리할 수 있게 최적화한다.

---

 

인라인 캐시와 히든 클래스는 밀접한 관계를 가지도 있다. 히든 클래스는 객체의 구조(프로퍼티와 그 순서)를 정의하는 역할을 하고 인라인 캐시는 더 나이가 이 구조를 기반으로 프로퍼티 접근 경로를 최적화하는 역할을 한다.

• 히든 클래스가 동일한 경우: 인라인 캐시는 같은 히든 클래스를 공유하는 객체의 프로퍼티 접근 경로를 캐시에 저장하고 이후 같은 히든 클래스를 사용하는 객체에서 프로퍼티에 접근할 때 이를 재사용한다.
• 히든 클래스가 달라지는 경우: 만약 객체의 구조가 변하면(프로퍼티 추가, 삭제 등) 새로운 히든 클래스가 만들어지게 된다. 이 경우 인라인 캐시가 유효하지 않게 되므로 엔진은 새로운 히든 클래스에 대한 경로를 다시 계산하게 된다.

 

📋 참고

V8의 히든 클래스 이야기

 

[JavaScript] 히든클래스, 인라인 캐싱 그리고 최적화