How would you identify a "Monomorphic" vs. "Polymorphic" function?

Question

Accepted Answer

In JavaScript engine optimization, 'monomorphic' and 'polymorphic' refer to the state of a **function's inline cache (IC)** at a specific property access site . When a function accesses a property (like `obj.x`), the engine caches information about the object's shape (Hidden Class) and the property's offset. Over time, based on the variety of shapes seen, this cache transitions through different states. Identifying these states helps developers understand optimization potential and performance bottlenecks . **Uninitialized**: The initial state when a property access site hasn't been executed yet. **Monomorphic**: The site has seen exactly one object shape. This is the most optimized state, as the engine can directly access the property using the cached offset without any shape checking overhead . **Polymorphic**: The site has seen a small number (typically 2-4) of different shapes. The engine maintains a small cache of shapes and offsets, requiring a shape check for each possibility. This is less efficient than monomorphic but still manageable . **Megamorphic**: The site has seen many different shapes (typically 5+). The engine gives up on caching and falls back to a full dictionary lookup, which is significantly slower . // Example: Monomorphic function - always receives same shape
function getX(point) {
  return point.x;  // Property access site
}

// All objects have identical shape: {x, y}
getX({x: 1, y: 2});  // Shape A (Hidden Class H1)
getX({x: 3, y: 4});  // Still Shape A (H1)
getX({x: 5, y: 6});  // Still Shape A (H1)
// Result: Monomorphic cache with one entry (H1)

// Example: Polymorphic function - receives different shapes
function getX(point) {
  return point.x;
}

// Different shapes:
getX({x: 1, y: 2});        // Shape A (H1) - monomorphic initially
getX({x: 3, y: 4});        // Still H1
getX({x: 5, z: 6});        // Shape B (H2) - now polymorphic (2 shapes)
getX({x: 7});              // Shape C (H3) - now polymorphic (3 shapes)
getX({x: 9, y: 10, z:11}); // Shape D (H4) - could become megamorphic
// Result: Polymorphic cache with multiple entries The critical insight is that object shape is determined not just by which properties exist, but also by their creation order . Two objects with the same properties created in different orders will have different Hidden Classes, leading to polymorphism even though they appear identical to the developer . function Point(x, y) {
  this.x = x;  // Property order: x first
  this.y = y;  // then y
}

function createPoint(x, y) {
  const obj = {};
  obj.y = y;   // Property order: y first
  obj.x = x;   // then x
  return obj;
}

const p1 = new Point(1, 2);     // Shape: {x, y} (Hidden Class H1)
const p2 = new Point(3, 4);     // Same H1
const p3 = createPoint(5, 6);   // Shape: {y, x} (Hidden Class H2)

function getY(point) {
  return point.y;  // Access site
}

// This function will be polymorphic because p1 and p3 have different shapes
getY(p1);  // H1 shape
getY(p2);  // Still H1 (monomorphic so far)
getY(p3);  // H2 shape - now polymorphic! So how do you actually identify monomorphic vs. polymorphic functions in practice? Modern JavaScript engines provide tools for this analysis: **V8's --trace-ic Flag**: Running Node.js with the `--trace-ic` flag logs inline cache information. It shows each property access site and its cache state (monomorphic, polymorphic, megamorphic) along with the shapes seen . This is the most direct way to see what's happening . **V8's --trace-maps**: This flag traces Hidden Class (Map) transitions, helping you understand why objects are getting different shapes and causing polymorphism . **Chrome DevTools Performance Tab**: Recording a performance profile and looking at the 'Summary' or 'Bottom-Up' views can show functions that are deoptimizing frequently. Polymorphic functions are a common cause of deoptimizations . **v8-deopt-viewer**: Tools like the v8-deopt-viewer can parse deoptimization logs and help identify functions that are being deoptimized due to type instability or shape changes . **Benchmarking with Different Inputs**: A practical approach is to benchmark a function with monomorphic inputs (same shape) vs. polymorphic inputs (different shapes). Significant performance differences often indicate optimization issues . // Run: node --trace-ic myfile.js

function process(obj) {
  return obj.value * 2;
}

process({value: 10});        // Cache: monomorphic (shape {value})
process({value: 20});        // Still monomorphic
process({value: 30, extra:1}); // New shape! Cache becomes polymorphic
process({value: 40});        // Now polymorphic with two shapes cached

// The trace output would show something like:
// @ process.js:2: obj.value -> monomorphic [0x123]
// @ process.js:2: obj.value -> polymorphic [0x123, 0x456] Understanding monomorphic vs. polymorphic code is crucial for writing high-performance JavaScript. Monomorphic code stays in the fastest inline cache state, allowing the engine to generate highly-optimized

How would you identify a "Monomorphic" vs. "Polymorphic" function?

A monomorphic function is one that consistently receives objects of the same shape (Hidden Class), while a polymorphic function receives objects of different shapes, causing the engine's inline caches to handle multiple type profiles .

How would you identify a "Monomorphic" vs. "Polymorphic" function?

A monomorphic function is one that consistently receives objects of the same shape (Hidden Class), while a polymorphic function receives objects of different shapes, causing the engine's inline caches to handle multiple type profiles .

Scenario Questions

Follow-up Questions