Hidden Classes and Inline Caches

Purpose

Modern engines track an object’s shape (which properties, in which order) as a hidden class — V8’s term, with analogous ideas in other engines under different names — and cache property-access paths against that shape via inline caches, enabling fast property access without a general lookup.

Example

function Point(x, y) {
  this.x = x;
  this.y = y;
}

const p1 = new Point(1, 2); // hidden class "has x, then y"
const p2 = new Point(3, 4); // same hidden class

const p3 = new Point(5, 6);
p3.z = 7; // p3 now has a DIFFERENT hidden class

Behavior notes

• Objects created the same way, with properties assigned in the same order, share a hidden class — the engine can reuse fast, optimized access code for all of them.
• An inline cache at a specific code location remembers the last hidden class(es) seen there; a repeated match takes the fast path, while a mismatch falls back to slower, general lookup.
• This is entirely engine-dependent optimization, not specified by ECMAScript — the language makes no promises about it, and different engines (or different versions of the same engine) can behave differently.

Common mistakes

• Conditionally adding properties to only some instances of an otherwise-uniform object population, fragmenting them across multiple hidden classes and degrading inline cache effectiveness for code that processes them together.
• Assuming this level of detail matters for typical application code — it’s most relevant for genuinely hot code paths processing large numbers of similarly-shaped objects, not general advice to obsess over for every object literal.

Runtime notes

Engine-specific optimization strategy, not a language guarantee — the general principle (consistent shapes help) tends to hold across major engines, but exact mechanics and terminology differ.