What are "Hidden Classes" and "Inline Caching"?

Question

Accepted Answer

JavaScript is a **dynamically-typed language,** which means object structures can change at runtime by adding or deleting properties. This flexibility poses a performance challenge because, in a naive implementation, the engine would need to perform **expensive dictionary lookups** every time a property is accessed. Hidden Classes and Inline Caching work together to solve this problem, making property access nearly as fast as in statically-typed languages. A Hidden Class is an internal meta-object that V8 (and other engines) creates to describe the 'shape' or structure of a JavaScript object, such as which properties it has and their memory offsets . Objects with the exact same properties in the same order will share a single Hidden Class, which saves memory and allows for optimized property lookups . When a property is added to an object, the engine doesn't modify its existing Hidden Class. Instead, it creates a new one through a process called 'transition,' forming a transition tree that tracks the object's evolution . Because the order of property addition matters, two objects that end up with the same properties but added in a different order will have different Hidden Classes, preventing them from being optimized together . function Point(x, y) {
  this.x = x;  // V8 creates a new Hidden Class (C1) based on the initial empty one (C0)
  this.y = y;  // V8 creates another new Hidden Class (C2) based on C1
}

const p1 = new Point(1, 2); // p1 uses Hidden Class C2
const p2 = new Point(3, 4); // p2 also uses C2, sharing the optimized code

// Adding a property later forces a new transition
p1.z = 5; // V8 creates a new Hidden Class (C3) just for p1 While Hidden Classes provide a fast way to locate a property, the engine still needs to find the correct Hidden Class first. This is where Inline Caching (IC) comes in. IC is a technique where the engine caches the result of a successful property lookup at the same location for future use . When a function that accesses a property (like `o.x`) is executed for the first time, the engine performs a full lookup. It notes the Hidden Class of the object and the offset where the property's value was found . This information is cached right at the instruction site. The next time the same line of code runs, the engine first checks if the incoming object has the same Hidden Class . If the Hidden Class matches (a 'cache hit'), the engine skips the expensive lookup and directly accesses the value at the remembered memory offset. This is what makes subsequent calls so fast . The IC goes through several states: starting as 'uninitialized', then becoming 'monomorphic' (one shape cached), 'polymorphic' (a few shapes cached), and finally 'megamorphic' (many shapes, requiring a global lookup) . function getX(point) {
  return point.x; // <-- This is the property access site
}

// First call: IC is 'uninitialized'. Engine looks up 'x' on the object.
// It finds the object has Hidden Class 'C2' and the value at offset 0.
// It caches this information.
getX({x: 1, y: 2});

// Second call with same shape: IC is now 'monomorphic'.
// Engine checks the incoming object. Its Hidden Class is 'C2'!
// Cache hit! It directly accesses offset 0 without another lookup. This is blazing fast.
getX({x: 3, y: 4});

// Third call with a different shape: IC becomes 'polymorphic'.
// The new object has a different Hidden Class (e.g., from adding 'z' later).
// This is a cache miss, triggering a new lookup and caching the new shape.
getX({x: 5, z: 6}); These two concepts are deeply interconnected. Inline Caching depends entirely on Hidden Classes to quickly verify if an object is the same as the one it has seen before . For developers, the key takeaway is that writing 'monomorphic' code (consistently using objects with the same shape) allows Inline Caching to remain in its fastest state, leading to significant performance gains, especially in hot code paths .

What are "Hidden Classes" and "Inline Caching"?

These are two fundamental optimization techniques used by JavaScript engines like V8 to dramatically speed up object property access.

What are "Hidden Classes" and "Inline Caching"?

These are two fundamental optimization techniques used by JavaScript engines like V8 to dramatically speed up object property access.

Scenario Questions

Follow-up Questions