How V8 Optimizes JavaScript Code

How V8 Optimizes JavaScript Code

V8 is one of the fastest JS engines. Here is how it optimizes code: hidden classes, inline caching, TurboFan, and feedback.

Hidden Classes

V8 assigns a hidden class to each object based on its shape (property names and order). Objects with the same hidden class share optimized code.

// same hidden class (fast)
function Point(x, y) {
  this.x = x;
  this.y = y;
}
const a = new Point(1, 2);
const b = new Point(3, 4);

// different hidden classes (slow)
const c = { x: 1, y: 2 };
const d = { y: 2, x: 1 }; // different property order
const e = { x: 1 };       // missing property
e.y = 2;                  // new hidden class (transition)
``
**Tips for stable hidden classes**:
- Initialize all properties in the constructor (same order).
- Do not add properties after construction.
- Do not delete properties.
- Do not change property order.

### Inline Caching

When a function accesses `obj.x` repeatedly, V8 caches the memory location of `x` for that hidden class. Next time, it directly reads from the cached location (fast). If the hidden class changes, the cache is invalidated (deoptimization).

```js
function getX(obj) {
  return obj.x; // V8 caches the location of x
}
``
### TurboFan (Optimizing Compiler)

TurboFan watches for **hot code** (functions called many times) and compiles them to optimized machine code. It uses feedback from inline caching to make assumptions (e.g., "obj always has hidden class C").

If an assumption breaks (a different hidden class is passed), TurboFan **deoptimizes**: discards the optimized code and falls back to Ignition bytecode.

### Feedback Types

- **Call frequency**: how often a function is called.
- **Type feedback**: what types/hidden classes are passed to a function.
- **IC feedback**: which property access sites are stable.

### Triggering Optimization

V8 optimizes a function after it has been called enough times (the threshold varies). You can force optimization in benchmarks with `%OptimizeFunctionOnNextCall(fn)` (V8 native syntax, not for production).

### Deoptimization Causes

- Passing objects with different hidden classes to the same function.
- Adding properties to an object after construction.
- Deleting properties.
- Changing argument types (e.g., passing a string where a number was expected).
- `try/catch` (in older V8 versions; less of an issue now).
- `eval`, `with`, `delete`.

### How to Help V8

1. Initialize all object properties in the constructor (same order).
2. Do not add or delete properties after construction.
3. Keep monomorphic functions (same argument types/hidden classes).
4. Avoid `eval`, `with`, and `delete`.
5. Use `const` and `let` (block scope helps the optimizer).
6. Use arrays for contiguous numeric data (V8 optimizes dense arrays).

### The Takeaway

V8 optimizes with hidden classes (stable shapes), inline caching (cached property locations), and TurboFan (optimized machine code for hot functions). Help V8 by initializing all properties in the constructor, not adding/deleting properties, keeping functions monomorphic, and avoiding eval/with/delete.