Docs
24.2-Hidden-Classes-Shapes
22.2 Hidden Classes and Inline Caching
Understanding hidden classes and inline caching is crucial for writing high-performance JavaScript. These V8 optimizations are key to fast property access.
Table of Contents
- •Object Representation in V8
- •Hidden Classes (Shapes/Maps)
- •Hidden Class Transitions
- •Inline Caching (IC)
- •IC States: Monomorphic, Polymorphic, Megamorphic
- •Optimization Patterns
- •Anti-Patterns to Avoid
Object Representation in V8
JavaScript objects are dynamic—properties can be added or removed at any time. But V8 needs to make property access fast. The solution: Hidden Classes.
┌─────────────────────────────────────────────────────────────────────┐
│ OBJECT REPRESENTATION │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ NAIVE APPROACH (Slow): │
│ ───────────────────── │
│ JavaScript Object → Dictionary/Hash Map │
│ │
│ { x: 10, y: 20 } │
│ ↓ │
│ ┌─────────────────┐ │
│ │ Hash Map │ ← Each property lookup requires: │
│ │ "x" → 10 │ 1. Compute hash of "x" │
│ │ "y" → 20 │ 2. Find bucket │
│ └─────────────────┘ 3. Handle collisions │
│ 4. Return value │
│ │
│ V8 APPROACH (Fast): │
│ ────────────────── │
│ JavaScript Object → Hidden Class + Fixed-Layout Storage │
│ │
│ { x: 10, y: 20 } │
│ ↓ │
│ ┌──────────────┐ ┌────────────────────┐ │
│ │ Hidden Class │────→│ Object Storage │ │
│ │ x @ offset 0 │ │ [0]: 10 (x) │ │
│ │ y @ offset 8 │ │ [8]: 20 (y) │ │
│ └──────────────┘ └────────────────────┘ │
│ │
│ Property access: Just read from known offset! │
│ │
└─────────────────────────────────────────────────────────────────────┘
Hidden Classes (Shapes/Maps)
Hidden classes (also called "shapes" or "maps") describe the structure of objects.
What Hidden Classes Store
┌─────────────────────────────────────────────────────────────────────┐
│ HIDDEN CLASS STRUCTURE │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Hidden Class for { x: number, y: number } │
│ ┌────────────────────────────────────────────────────────────┐ │
│ │ Property Name │ Offset │ Type Hint │ Attributes │ │
│ ├────────────────────────────────────────────────────────────┤ │
│ │ "x" │ 0 │ SMI/Number │ Writable │ │
│ │ "y" │ 8 │ SMI/Number │ Writable │ │
│ └────────────────────────────────────────────────────────────┘ │
│ │
│ Additional Metadata: │
│ • Prototype reference │
│ • Constructor reference │
│ • Transition table (for adding properties) │
│ • Number of properties │
│ │
└─────────────────────────────────────────────────────────────────────┘
Objects Sharing Hidden Classes
// These objects share the SAME hidden class
const point1 = { x: 10, y: 20 };
const point2 = { x: 30, y: 40 };
const point3 = { x: 50, y: 60 };
┌─────────────────────────────────────────────────────────────────────┐
│ SHARED HIDDEN CLASS │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────┐ │
│ │ Hidden Class │ │
│ │ x @ offset 0 │ │
│ │ y @ offset 8 │ │
│ └────────┬────────┘ │
│ │ │
│ ┌─────────────┼─────────────┐ │
│ ↓ ↓ ↓ │
│ ┌───────────┐ ┌───────────┐ ┌───────────┐ │
│ │ point1 │ │ point2 │ │ point3 │ │
│ │ [0]: 10 │ │ [0]: 30 │ │ [0]: 50 │ │
│ │ [8]: 20 │ │ [8]: 40 │ │ [8]: 60 │ │
│ └───────────┘ └───────────┘ └───────────┘ │
│ │
│ Benefits: │
│ • Memory efficient (one hidden class for many objects) │
│ • Enables inline caching (same access pattern) │
│ • Fast property access (known offsets) │
│ │
└─────────────────────────────────────────────────────────────────────┘
Hidden Class Transitions
When you add a property to an object, V8 transitions to a new hidden class.
┌─────────────────────────────────────────────────────────────────────┐
│ HIDDEN CLASS TRANSITIONS │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ const point = {}; // Hidden Class C0 (empty) │
│ point.x = 10; // Transition to C1 (has x) │
│ point.y = 20; // Transition to C2 (has x, y) │
│ │
│ Transition Chain: │
│ │
│ ┌──────────┐ add 'x' ┌──────────┐ add 'y' ┌──────────┐ │
│ │ C0 │ ────────→ │ C1 │ ────────→ │ C2 │ │
│ │ (empty) │ │ x @ 0 │ │ x @ 0 │ │
│ └──────────┘ └──────────┘ │ y @ 8 │ │
│ └──────────┘ │
│ │
│ Transition Tree (for property additions): │
│ │
│ C0 (empty) │
│ / \ │
│ add 'x' add 'y' │
│ ↓ ↓ │
│ C1 C3 │
│ (x @ 0) (y @ 0) │
│ | | │
│ add 'y' add 'x' │
│ ↓ ↓ │
│ C2 C4 │
│ (x @ 0, y @ 8) (y @ 0, x @ 8) │
│ │
│ ⚠️ C2 ≠ C4: Different hidden classes for same properties! │
│ │
└─────────────────────────────────────────────────────────────────────┘
Property Order Matters!
// These create DIFFERENT hidden classes
function createPointA() {
const p = {};
p.x = 0; // First
p.y = 0; // Second
return p;
}
function createPointB() {
const p = {};
p.y = 0; // First (different order!)
p.x = 0; // Second
return p;
}
const a = createPointA(); // Hidden class: x@0, y@8
const b = createPointB(); // Hidden class: y@0, x@8
// These are incompatible for inline caching!
Inline Caching (IC)
Inline caching remembers how property access worked last time to speed up future access.
┌─────────────────────────────────────────────────────────────────────┐
│ INLINE CACHING │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ function getX(obj) { │
│ return obj.x; // ← Property access site │
│ } │
│ │
│ WITHOUT INLINE CACHING (Slow): │
│ ─────────────────────────────── │
│ Every call: │
│ 1. Look up "x" in obj's hidden class │
│ 2. Find offset │
│ 3. Load value from offset │
│ │
│ WITH INLINE CACHING (Fast): │
│ ──────────────────────────── │
│ First call: │
│ 1. Look up "x" in obj's hidden class → offset 0 │
│ 2. CACHE: "For hidden class C2, x is at offset 0" │
│ 3. Load value │
│ │
│ Subsequent calls with same hidden class: │
│ 1. Check: Is obj's hidden class C2? Yes! │
│ 2. Load directly from offset 0 ← FAST PATH │
│ │
│ Generated Code Evolution: │
│ │
│ // Uninitialized │
│ obj.x → GenericPropertyLoad("x") │
│ │
│ // After first call (Monomorphic) │
│ obj.x → if (obj.map === C2) LoadField(0) else Slow() │
│ │
└─────────────────────────────────────────────────────────────────────┘
IC States
Inline caches have different states based on how many different object shapes they've seen.
┌─────────────────────────────────────────────────────────────────────┐
│ IC STATES │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ 1. UNINITIALIZED │
│ • Property access has never executed │
│ • Will transition on first execution │
│ │
│ 2. MONOMORPHIC ⭐ (Fastest) │
│ • Only seen ONE hidden class │
│ • Direct memory access │
│ • Single comparison check │
│ │
│ 3. POLYMORPHIC (Still fast) │
│ • Seen 2-4 different hidden classes │
│ • Small lookup table │
│ • Linear search through known shapes │
│ │
│ 4. MEGAMORPHIC ⚠️ (Slow) │
│ • Seen 5+ different hidden classes │
│ • Falls back to dictionary lookup │
│ • No caching benefit │
│ │
│ Transition Diagram: │
│ │
│ UNINITIALIZED ──(first call)──→ MONOMORPHIC │
│ │ │
│ (new shape) │ │
│ ↓ │
│ POLYMORPHIC │
│ │ │
│ (5+ shapes) │ │
│ ↓ │
│ MEGAMORPHIC │
│ │
└─────────────────────────────────────────────────────────────────────┘
IC State Examples
function getX(obj) {
return obj.x;
}
// Monomorphic - FAST ⭐
const points = [];
for (let i = 0; i < 1000; i++) {
points.push({ x: i, y: i * 2 }); // All same shape
}
points.forEach((p) => getX(p)); // IC stays monomorphic
// Polymorphic - Still OK
function getX2(obj) {
return obj.x;
}
getX2({ x: 1, y: 2 }); // Shape A
getX2({ x: 1, y: 2, z: 3 }); // Shape B
getX2({ x: 1 }); // Shape C
// IC is polymorphic (3 shapes)
// Megamorphic - SLOW ⚠️
function getX3(obj) {
return obj.x;
}
getX3({ x: 1 });
getX3({ x: 1, a: 2 });
getX3({ x: 1, b: 2 });
getX3({ x: 1, c: 2 });
getX3({ x: 1, d: 2 });
getX3({ x: 1, e: 2 });
// IC becomes megamorphic (6+ shapes)
┌─────────────────────────────────────────────────────────────────────┐
│ IC STATE PERFORMANCE │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Performance Comparison (relative): │
│ │
│ MONOMORPHIC ████████████████████████████████ 100% │
│ POLYMORPHIC ████████████████████ 60-80% │
│ MEGAMORPHIC ████████ 20-30% │
│ │
│ Generated Code: │
│ │
│ MONOMORPHIC: │
│ ┌──────────────────────────────────────────────────┐ │
│ │ cmp [obj + map_offset], expected_map │ │
│ │ jne slow_path │ │
│ │ mov result, [obj + 0] ; Direct load! │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ POLYMORPHIC (3 shapes): │
│ ┌──────────────────────────────────────────────────┐ │
│ │ mov map, [obj + map_offset] │ │
│ │ cmp map, map1; je load_at_0 │ │
│ │ cmp map, map2; je load_at_8 │ │
│ │ cmp map, map3; je load_at_16 │ │
│ │ jmp slow_path │ │
│ └──────────────────────────────────────────────────┘ │
│ │
│ MEGAMORPHIC: │
│ ┌──────────────────────────────────────────────────┐ │
│ │ call GenericPropertyLookup ; Dictionary lookup │ │
│ └──────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────────────┘
Optimization Patterns
Pattern 1: Consistent Object Initialization
// ✅ GOOD: All objects have same hidden class
class Point {
constructor(x, y) {
this.x = x;
this.y = y;
}
}
// Factory function with consistent shape
function createPoint(x, y) {
return { x, y }; // Always same order
}
// ✅ GOOD: All properties initialized upfront
function createUser(name, age) {
return {
name: name,
age: age,
email: null, // Initialize even if null
active: false, // Initialize even if false
score: 0, // Initialize even if 0
};
}
Pattern 2: Initialize All Properties in Constructor
// ❌ BAD: Properties added later
class Person {
constructor(name) {
this.name = name;
// age added conditionally later
}
setAge(age) {
this.age = age; // Hidden class transition!
}
}
// ✅ GOOD: All properties in constructor
class Person {
constructor(name, age = null) {
this.name = name;
this.age = age; // Always present
}
}
Pattern 3: Avoid Dynamic Property Names
// ❌ BAD: Dynamic property names
function setProperty(obj, key, value) {
obj[key] = value; // Each key creates new hidden class
}
const obj = {};
setProperty(obj, 'a', 1);
setProperty(obj, 'b', 2);
setProperty(obj, 'c', 3);
// ✅ GOOD: Use Map for dynamic keys
const data = new Map();
data.set('a', 1);
data.set('b', 2);
data.set('c', 3);
Pattern 4: Monomorphic Functions
// ❌ BAD: Called with different shapes
function processItem(item) {
return item.value * 2;
}
processItem({ value: 1 });
processItem({ value: 2, extra: 3 });
processItem({ other: 0, value: 4 });
// ✅ GOOD: Consistent input shapes
function processNumber(num) {
return num * 2;
}
processNumber(1);
processNumber(2);
processNumber(4);
Anti-Patterns to Avoid
Anti-Pattern 1: Deleting Properties
// ❌ BAD: delete causes hidden class transition
const user = { name: 'Alice', age: 25, temp: 'data' };
delete user.temp; // Transitions to "dictionary mode"!
// ✅ GOOD: Set to null/undefined instead
const user = { name: 'Alice', age: 25, temp: 'data' };
user.temp = null; // Keeps same hidden class
┌─────────────────────────────────────────────────────────────────────┐
│ DELETE PROPERTY EFFECT │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ Before delete: │
│ ┌──────────────┐ ┌───────────────┐ │
│ │ Hidden Class │────→│ Fast Object │ │
│ │ name @ 0 │ │ [0]: "Alice" │ │
│ │ age @ 8 │ │ [8]: 25 │ │
│ │ temp @ 16 │ │ [16]: "data" │ │
│ └──────────────┘ └───────────────┘ │
│ │
│ After delete user.temp: │
│ ┌──────────────────┐ ┌─────────────────────┐ │
│ │ Dictionary Mode │────→│ Slow Hash Table │ │
│ │ (No fixed shape) │ │ "name" → "Alice" │ │
│ │ │ │ "age" → 25 │ │
│ └──────────────────┘ └─────────────────────┘ │
│ │
│ ⚠️ Object permanently becomes slow! │
│ │
└─────────────────────────────────────────────────────────────────────┘
Anti-Pattern 2: Inconsistent Property Order
// ❌ BAD: Different property order
function createResponseA(success, data) {
return { success, data }; // success first
}
function createResponseB(data, success) {
return { data, success }; // data first
}
// ✅ GOOD: Consistent order everywhere
function createResponse(success, data) {
return { success, data }; // Always same order
}
Anti-Pattern 3: Modifying Prototypes
// ❌ BAD: Modifying built-in prototypes
Array.prototype.sum = function () {
return this.reduce((a, b) => a + b, 0);
};
// This invalidates optimized code!
// ✅ GOOD: Use helper functions
function sum(arr) {
return arr.reduce((a, b) => a + b, 0);
}
Anti-Pattern 4: Adding Properties Outside Constructor
// ❌ BAD: Properties added after construction
class Widget {
constructor() {
this.id = Math.random();
}
init() {
this.width = 100; // New hidden class
this.height = 100; // Another transition
}
}
// ✅ GOOD: All properties in constructor
class Widget {
constructor() {
this.id = Math.random();
this.width = 0; // Initialize all
this.height = 0;
}
init() {
this.width = 100; // Same hidden class
this.height = 100;
}
}
Debugging Hidden Classes
Using Chrome DevTools
// In Chrome DevTools Console:
// 1. Take a heap snapshot
// 2. Look for objects with same constructor
// 3. Check if they have same "map" (hidden class)
// Using V8 native syntax (Node.js with --allow-natives-syntax):
// %HaveSameMap(obj1, obj2) // Returns true if same hidden class
Using Node.js Flags
# Trace IC state changes
node --trace-ic your-script.js
# Trace hidden class transitions
node --trace-maps your-script.js
# Trace deoptimizations
node --trace-deopt your-script.js
Key Takeaways
┌─────────────────────────────────────────────────────────────────────┐
│ HIDDEN CLASSES & IC SUMMARY │
├─────────────────────────────────────────────────────────────────────┤
│ │
│ HIDDEN CLASSES: │
│ • Objects with same shape share hidden classes │
│ • Property order matters! │
│ • Adding/deleting properties creates transitions │
│ • Initialize all properties upfront │
│ │
│ INLINE CACHING: │
│ • Caches property access patterns │
│ • Monomorphic = fastest (one shape) │
│ • Polymorphic = OK (2-4 shapes) │
│ • Megamorphic = slow (5+ shapes) │
│ │
│ OPTIMIZATION TIPS: │
│ ✅ Use classes/factories for consistent shapes │
│ ✅ Initialize all properties in constructors │
│ ✅ Keep property order consistent │
│ ✅ Use null instead of delete │
│ ✅ Use Map for truly dynamic keys │
│ │
│ AVOID: │
│ ❌ delete operator │
│ ❌ Adding properties after initialization │
│ ❌ Different property orders for same type │
│ ❌ Modifying prototypes at runtime │
│ ❌ Too many object shapes in one function │
│ │
└─────────────────────────────────────────────────────────────────────┘
Next Steps
Continue to 22.3 Advanced Garbage Collection to understand how V8 manages memory with generational and incremental garbage collection.