Hidden Classes & Optimizations

Short explanation

Engines create hidden classes (internal shapes) for objects with similar properties to optimize property access. Inline caches remember previous access patterns to avoid repeated lookups.

Real-world example

function makePoint(x, y) {
  return { x, y };
}
const p1 = makePoint(1, 2);
const p2 = makePoint(3, 4);
// Objects with same property order share hidden classes, enabling optimizations

How JS handles it internally

When object shapes are consistent, engines can generate faster code paths. Changing an object's shape (adding properties in a different order) can deoptimize access.

FAQ

Q: How do I write code friendly to hidden classes?

A: Initialize object properties in the same order and avoid adding properties dynamically on hot objects.