자바스크립트에서 "객체" 자료형

📦 javascript에서 객체란?

1. 개요

• 자바스크립트에서 객체(Object)는 여러 값을 key-value 쌍으로 저장하는 데이터 구조
• 동적 언어인 JavaScript의 특성상 객체는 동적으로 프로퍼티를 추가하거나 수정할 수 있는 능력을 가짐
• 객체는 아래와 같이 중괄호 {}를 사용하여 생성할 수 있다

let obj = { a: 10, b: 20 }; 

• 위 예제에서 a와 b는 key이고, 10과 20은 value
• 자바스크립트의 객체는 key가 문자열이어야 한다는 점이 특징이며, value는 다양한 데이터 타입이 될 수 있음
• 그럼 JavaScript의 객체가 메모리상에서 어떻게 관리되는지, 그리고 C/C++ 구조체나 클래스와는 어떻게 다른지 궁금했고, 이 문서를 작성하게 된 가장 큰 동기부여가 됐음

---

2. 객체의 메모리 구조

2.1 JavaScript 객체의 메모리 할당

• 자바스크립트에서 객체는 힙(Heap) 메모리에 할당
• 이는 자바스크립트 객체의 크기가 동적으로 변경될 수 있기 때문에, 동적 메모리 할당이 필요한 경우
• 객체에 속한 프로퍼티나 메서드는 객체의 참조 값으로 저장됨
• 객체 내에 저장된 데이터의 위치는 참조타입일 경우 힙에서 동적으로 관리, 원시값일 경우 스택에서 관리
• 자바스크립트 엔진(V8의 경우)은 객체가 생성될 때 hidden class와 property storage를 사용해 객체의 메모리를 최적화하여 관리

+----------------------+
| Hidden Class (Shape) |
| ID: Shape_1         |
| Properties: {a, b}  |
| Offsets: {a: 0, b: 1} |
+----------------------+
       ↓
+-----------------+
| Property Storage |
|   a: 10        |
|   b: 20        |
+-----------------+

2.2 Hidden Classes와 Property Storage

• 자바스크립트 객체는 동적으로 구조가 변경될 수 있기 때문에, hidden class라는 개념이 등장한다고 함
• 객체가 처음 만들어질 때 자바스크립트 엔진은 객체의 프로퍼티에 대한 메타데이터를 생성하고, 이를 hidden class로 관리함
• 이 hidden class는 객체의 구조를 나타내며, 각 객체는 별도의 hidden class를 가질 수 있음
• 이러한 구조 덕분에 자바스크립트 엔진은 객체의 속성 접근 속도를 최적화며, 객체의 속성들은 property storage라고 불리는 영역에 저장되어 효율적으로 접근함

2.3 객체의 메모리 예시

let obj = { a: 10, b: 20 };

위 코드에서 obj는 히든 클래스를 가지고 있으며, a와 b는 property storage에 저장됩니다. 자바스크립트 엔진은 이 정보를 통해 obj.a 또는 obj.b를 빠르게 접근할 수 있도록 최적화함

---

3. 객체와 C/C++ 구조체의 차이

• 자바스크립트의 객체는 C/C++ 구조체와 비슷한 점도 있지만, 중요한 차이점들이 존재
• 가장 큰 차이점은 동적 타입 시스템과 메모리 관리 방식

3.1 메모리 관리

• C/C++ 구조체: 구조체는 스택(Stack)에 할당됨
• 구조체는 정적인 크기를 가짐(Fixed Layout) 즉, 구조체의 각 필드는 컴파일 타임에 결정
• JavaScript 객체: 자바스크립트 객체는 힙(Heap)에 할당되며, 동적으로 크기가 변할 수 있음
• 즉, 객체에 속성을 추가하거나 삭제할 수 있어 구조가 런타임에 변경

3.2 속성 관리

• C/C++ 구조체: 구조체에서 필드는 고정된 순서와 타입으로 존재(Fixed Layout) 즉, 메모리 내에서 각 필드가 차지하는 크기가 정확하게 결정됨
• JavaScript 객체: 자바스크립트 객체는 동적으로 속성을 추가하고 제거할 수 있고, 속성은 key-value 형식으로 저장
• Hidden class와 property storage 방식으로 속성들이 동적으로 관리

3.3 타입 시스템

• C/C++ 구조체: 타입이 정적이며, 구조체의 각 필드는 명시적으로 타입이 지정
• JavaScript 객체: 자바스크립트는 동적 타입 언어로, 객체의 프로퍼티 값은 런타임에 결정됨

3.4 메모리 예시

C++에서 구조체는 아래와 같이 정의:

struct Point {
    int x;
    int y;
};

+------+------+
|  x   |  y   |
+------+------+
(메모리에 연속적으로 배치됨)

• 결국 이 두 가지는 표면적으로 유사하지만, C++ 구조체는 정적 메모리 할당을 사용하고, 자바스크립트 객체는 동적 메모리 할당을 사용한다는 점에서 차이가 있음

---

4. 객체와 C++ map의 차이

4.1 속성 관리

• C++ map: map 변수 자체는 스택에 저장되고, map안에 속해있는 node들은 힙에 저장됨
• 둘 다 key-value 형태의 데이터를 저장할 수 있음
• 둘 다 데이터를 동적으로 추가/삭제 할 수 있음
• 구조체는 정적인 크기를 가짐(Fixed Layout) 즉, 구조체의 각 필드는 컴파일 타임에 결정

4.2 메모리 구조

• C++의 맵은 Red-Black tree를 사용하여 키를 자동으로 정렬하며 저장함

       (2, "two")
      /       
 (1, "one")

---

5. 객체와 클래스와의 차이

5.1 객체

• 객체는 기존에 정의된 프로퍼티와 메서드를 동적으로 추가하거나 수정할 수 있는 자료형
• 즉, 실행 시점에 속성을 변경하거나 추가할 수 있다

let obj = { a: 10, b: 20 };
obj.c = 30; // 동적으로 프로퍼티 추가

5.2 클래스

• 클래스는 객체를 생성하기 위한 템플릿
• 클래스에서 정의된 프로퍼티와 메서드는 객체가 생성될 때 할당
• 클래스는 생성자(constructor)를 사용해 객체를 초기화한다

class Person {
    constructor(name, age) {
        this.name = name;
        this.age = age;
    }
}

let p = new Person("Alice", 30);

5.3 메모리 차이

• 객체: 객체는 동적으로 속성을 추가하거나 수정할 수 있으며, 힙에 할당
• 클래스: 클래스는 템플릿일 뿐이고, 클래스 인스턴스는 객체로 생성되어 힙에 할당
• 클래스를 사용하면 메서드가 prototype에 저장되므로 메모리를 절약할 수 있음
• 객체 리터럴 방식은 개별 객체가 메서드를 가지므로 메모리 낭비가 발생할 수 있음

---

📌 관련 개념

• Hidden Class: 자바스크립트 엔진이 객체의 속성을 최적화하기 위해 내부적으로 사용하는 메타데이터.
• Property Storage: 객체의 실제 속성이 저장되는 공간.
• 클래스와 객체: 클래스는 객체를 생성하기 위한 템플릿이고, 객체는 실제 인스턴스

---

📌 참고 자료

• MDN - Object (JavaScript)
• MDN - Class (JavaScript)
• GeeksforGeeks - Memory Management in JavaScript
• Fast properties in V8
• Javascript Hiddenclass와 최적화 기법

---