JavaScript Engines

function greet(name) {
  return "Hello, " + name + "!"
}

greet("World")  // "Hello, World!"

┌─────────────────────────────────────────────────────────────────────────┐
│                     THE V8 JAVASCRIPT FACTORY                            │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│  RAW MATERIALS        QUALITY CONTROL        BLUEPRINT                   │
│  (Source Code)        (Parser)               (AST)                       │
│  ┌──────────────┐    ┌──────────────┐    ┌──────────────┐               │
│  │ function     │    │  Break into  │    │  Tree of     │               │
│  │ add(a, b) {  │ ─► │  tokens,     │ ─► │  operations  │               │
│  │   return a+b │    │  check       │    │  to perform  │               │
│  │ }            │    │  syntax      │    │              │               │
│  └──────────────┘    └──────────────┘    └──────┬───────┘               │
│                                                  │                       │
│                                                  ▼                       │
│  ┌───────────────────────────────────────────────────────────────────┐  │
│  │                      ASSEMBLY LINE                                 │  │
│  │  ┌─────────────────┐              ┌─────────────────────────┐     │  │
│  │  │    IGNITION     │              │       TURBOFAN          │     │  │
│  │  │   (Interpreter) │  ─────────►  │  (Optimizing Compiler)  │     │  │
│  │  │                 │   "hot"      │                         │     │  │
│  │  │  Steady workers │   code       │  Fast robotic assembly  │     │  │
│  │  │  Start quickly  │              │  Takes time to set up   │     │  │
│  │  └─────────────────┘              └─────────────────────────┘     │  │
│  └───────────────────────────────────────────────────────────────────┘  │
│                                                                          │
│                              ▼                                           │
│                     ┌──────────────┐                                    │
│                     │    OUTPUT    │                                    │
│                     │   (Result)   │                                    │
│                     └──────────────┘                                    │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

function add(a, b) {
  return a + b
}

add(1, 2)  // 3

```
'function' 'add' '(' 'a' ',' 'b' ')' '{' 'return' 'a' '+' 'b' '}' 
```

Each token is classified: `function` is a keyword, `add` is an identifier, `+` is an operator.

```
FunctionDeclaration
├── name: "add"
├── params: ["a", "b"]
└── body: ReturnStatement
          └── BinaryExpression
              ├── left: Identifier "a"
              ├── operator: "+"
              └── right: Identifier "b"
```

The AST captures *what* your code does, without the original syntax (semicolons, whitespace, etc.).

Bytecode for add(a, b):
  Ldar a1        // Load argument 'a' into accumulator
  Add a2         // Add argument 'b' to accumulator
  Return         // Return the accumulator value

function add(a, b) {
  return a + b
}

// V8 observes: add() is always called with numbers
add(1, 2)
add(3, 4)
add(5, 6)
// ... called many more times with numbers

// TurboFan thinks: "This always gets numbers. I'll optimize for that!"
// Generates machine code that assumes a and b are numbers

// After 1000 calls with numbers...
add("hello", "world")  // Strings! TurboFan assumed numbers!

┌─────────────────────────────────────────────────────────────────────────┐
│                    THE OPTIMIZATION CYCLE                                │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│     Source Code                                                          │
│          │                                                               │
│          ▼                                                               │
│     ┌─────────┐                                                         │
│     │  Parse  │                                                         │
│     └────┬────┘                                                         │
│          │                                                               │
│          ▼                                                               │
│     ┌─────────┐        profile         ┌───────────┐                    │
│     │ Ignition │ ───────────────────► │ TurboFan  │                    │
│     │(bytecode)│                       │(optimized)│                    │
│     └────┬────┘ ◄─────────────────── └─────┬─────┘                    │
│          │         deoptimize              │                            │
│          │                                 │                            │
│          ▼                                 ▼                            │
│      [Execute]                        [Execute]                         │
│       (slower)                        (faster!)                         │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

- Source code is executed line by line
- No compilation step
- Starts fast, but runs slow
- Every time a function runs, it's re-interpreted

```
Source → Execute → Execute → Execute...
```

- Source code is compiled to machine code before running
- Slow startup (must compile everything first)
- Very fast execution
- Can't adapt to runtime information

```
Source → Compile (wait...) → Execute (fast!)
```

- Start executing immediately with interpreter
- Compile "hot" code to machine code while running
- Best of both worlds: fast startup AND fast execution
- Can use runtime information for smarter optimizations

```
Source → Interpret (start fast!) → Compile hot code → Execute (faster!)
```

function process(x) {
  return x.value * 2
}

// x could be anything!
process({ value: 10 })        // Object with number
process({ value: "hello" })   // Object with string (NaN result)
process({ value: 10, extra: 5 }) // Different shape

function getX(obj) {
  return obj.x
}

const point1 = { x: 1, y: 2 }
const point2 = { x: 5, y: 10 }

// point1 and point2 have the SAME hidden class!
// V8 knows: "For objects with this hidden class, 'x' is at offset 0, 'y' is at offset 1"

┌─────────────────────────────────────────────────────────────────────────┐
│                         HIDDEN CLASSES                                   │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   Hidden Class HC1                point1              point2             │
│   ┌────────────────────┐         ┌────────┐         ┌────────┐          │
│   │ x: offset 0        │ ◄────── │ HC1    │         │ HC1    │ ◄──┐     │
│   │ y: offset 1        │         ├────────┤         ├────────┤    │     │
│   └────────────────────┘         │ [0]: 1 │         │ [0]: 5 │    │     │
│           ▲                      │ [1]: 2 │         │ [1]: 10│    │     │
│           │                      └────────┘         └────────┘    │     │
│           │                                                       │     │
│           └───────────────────── Same hidden class! ──────────────┘     │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

const obj = {}        // Hidden class: HC0 (empty)
obj.x = 1             // Transition to HC1 (has x at offset 0)
obj.y = 2             // Transition to HC2 (has x at 0, y at 1)

┌─────────────────────────────────────────────────────────────────────────┐
│                       TRANSITION CHAIN                                   │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   const obj = {}      obj.x = 1          obj.y = 2                       │
│                                                                          │
│   ┌──────────┐       ┌──────────┐       ┌──────────┐                    │
│   │   HC0    │ ───►  │   HC1    │ ───►  │   HC2    │                    │
│   │  (empty) │ add x │ x: off 0 │ add y │ x: off 0 │                    │
│   └──────────┘       └──────────┘       │ y: off 1 │                    │
│                                         └──────────┘                    │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

const a = { x: 1, y: 2 }  // HC with x then y
const b = { y: 2, x: 1 }  // Different HC with y then x

function getX(obj) {
  return obj.x  // V8 caches: "For HC1, x is at offset 0"
}

const p1 = { x: 1, y: 2 }
const p2 = { x: 5, y: 10 }

getX(p1)  // First call: look up x, cache the location
getX(p2)  // Second call: same hidden class! Use cached location
getX(p1)  // Third call: cache hit again!

```javascript
function getX(obj) {
  return obj.x
}

// All objects have the same shape
getX({ x: 1, y: 2 })
getX({ x: 3, y: 4 })
getX({ x: 5, y: 6 })

// IC: "Always HC1, x at offset 0" - ONE entry, super fast!
```

**Performance:** Excellent. Single comparison, direct memory access.

```javascript
function getX(obj) {
  return obj.x
}

getX({ x: 1 })              // Shape A
getX({ x: 2, y: 3 })        // Shape B  
getX({ x: 4, y: 5, z: 6 })  // Shape C

// IC: "Could be A, B, or C" - checks a few options
```

**Performance:** Good. Checks a small list of known shapes.

```javascript
function getX(obj) {
  return obj.x
}

// Every call has a completely different shape
getX({ x: 1 })
getX({ x: 2, a: 1 })
getX({ x: 3, b: 2 })
getX({ x: 4, c: 3 })
getX({ x: 5, d: 4 })
// ... many more different shapes

// IC gives up: "Too many shapes, doing full lookup every time"
```

**Performance:** Poor. Falls back to generic property lookup.

// Good: Factory creates consistent shapes
function createPoint(x, y) {
  return { x, y }
}

getX(createPoint(1, 2))
getX(createPoint(3, 4))  // Same shape, monomorphic IC!

┌─────────────────────────────────────────────────────────────────────────┐
│                        V8 MEMORY HEAP                                    │
├─────────────────────────────────────────────────────────────────────────┤
│                                                                          │
│   YOUNG GENERATION                      OLD GENERATION                   │
│   (Short-lived objects)                 (Long-lived objects)             │
│                                                                          │
│   ┌─────────────────────────┐          ┌─────────────────────────┐      │
│   │ Nursery  │ Intermediate │   ───►   │  Survived multiple GCs  │      │
│   │          │              │ survives │                         │      │
│   │  New     │  Survived    │          │  App state, caches,     │      │
│   │  objects │  one GC      │          │  long-lived data        │      │
│   └─────────────────────────┘          └─────────────────────────┘      │
│                                                                          │
│   Minor GC (Scavenger)                  Major GC (Mark-Compact)          │
│   • Very fast                           • Slower but thorough            │
│   • Runs frequently                     • Runs less often                │
│   • Only scans young gen                • Scans entire heap              │
│                                                                          │
└─────────────────────────────────────────────────────────────────────────┘

// ✓ Good: Consistent shape
function createUser(name, age) {
  return { name, age }  // Always name, then age
}

// ❌ Bad: Inconsistent shapes
function createUser(name, age) {
  const user = {}
  if (name) user.name = name  // Sometimes name first
  if (age) user.age = age     // Sometimes age first
  return user
}

// ✓ Good: Consistent types
let count = 0
count = 1
count = 2

// ❌ Bad: Type changes trigger deoptimization
let count = 0
count = "none"  // Now it's a string!
count = null    // Now it's null!

// ✓ Good: Dense array with consistent types
const numbers = [1, 2, 3, 4, 5]

// ❌ Bad: Sparse array with holes
const sparse = []
sparse[0] = 1
sparse[1000] = 2  // Creates 999 "holes"

// ❌ Bad: Mixed types
const mixed = [1, "two", 3, null, { four: 4 }]

// ❌ Bad: Using delete
const user = { name: "Alice", age: 30, temp: true }
delete user.temp  // Changes hidden class!

// ✓ Good: Set to undefined or use a different structure
const user = { name: "Alice", age: 30, temp: true }
user.temp = undefined  // Hidden class stays the same

// ✓ Good: Monomorphic - always same shape
class Point {
  constructor(x, y) {
    this.x = x
    this.y = y
  }
}

function distance(p1, p2) {
  const dx = p1.x - p2.x
  const dy = p1.y - p2.y
  return Math.sqrt(dx * dx + dy * dy)
}

distance(new Point(0, 0), new Point(3, 4))  // All Points, same shape

```javascript
// Potential memory leak: event listener keeps reference
element.addEventListener("click", () => {
  console.log(largeData)  // largeData can't be GC'd
})

// Fix: Remove listener when done
element.removeEventListener("click", handler)
```

**Ignition** is V8's interpreter. It generates bytecode from the AST and executes it immediately. It's fast to start but doesn't produce the fastest possible code. While running, it collects profiling data about types and execution patterns.

**TurboFan** is V8's optimizing compiler. It takes bytecode and profiling data from Ignition, then generates highly optimized machine code. It takes longer to compile but produces much faster code. TurboFan kicks in for "hot" functions that run many times.

V8 assigns hidden classes to objects based on their properties **and the order those properties were added**. Objects with the same properties in the same order share a hidden class and can use the same optimizations.

```javascript
const a = { x: 1, y: 2 }  // Hidden class A
const b = { y: 2, x: 1 }  // Hidden class B (different!)
```

Different hidden classes mean different inline cache entries and less optimization sharing. For best performance, always add properties in a consistent order.

Deoptimization happens when TurboFan's assumptions about your code are violated. Common triggers include:

- **Type changes:** A function optimized for numbers receives a string
- **Hidden class changes:** An object's shape changes (adding/deleting properties)
- **Unexpected values:** `undefined` where a number was expected
- **Megamorphic call sites:** Too many different object shapes at one location

```javascript
function add(a, b) { return a + b }

// Optimized for numbers
add(1, 2)
add(3, 4)

// Deoptimizes!
add("hello", "world")
```

Inline caching (IC) is an optimization where V8 remembers where it found a property for a given hidden class. Instead of doing a full property lookup every time, it caches: "For objects with hidden class X, property 'foo' is at memory offset Y."

On subsequent accesses with the same hidden class, V8 skips the lookup and reads directly from the cached offset. This turns an O(n) dictionary lookup into an O(1) memory access.

```javascript
function getX(obj) {
  return obj.x  // IC: "For HC1, x is at offset 0"
}

getX({ x: 1, y: 2 })  // Cache miss, full lookup, cache result
getX({ x: 3, y: 4 })  // Cache hit! Direct access to offset 0
```

The generational hypothesis states that **most objects die young**. Temporary variables, function arguments, intermediate results. They're created, used briefly, and become garbage quickly.

V8 exploits this by dividing the heap into:
- **Young generation:** Where new objects are allocated. Collected frequently with a fast "scavenger" algorithm.
- **Old generation:** Objects that survive multiple young generation collections. Collected less frequently with a slower but thorough algorithm.

This is efficient because checking young objects frequently catches most garbage quickly, while long-lived objects aren't constantly re-checked.

// Pattern B
function createPoint(x, y) {
  const point = {}
  point.x = x
  point.y = y
  return point
}
```

**Answer:**

**Pattern A is more engine-friendly.** 

In Pattern A, the object literal `{ x: x, y: y }` creates an object with a known shape immediately. V8 can skip the empty object transition.

In Pattern B, the object goes through three hidden class transitions:
1. `{}` - empty shape
2. `{ x }` - after adding x
3. `{ x, y }` - after adding y

Pattern A is faster to create and produces the same final shape more directly. Modern engines optimize object literals with known properties, skipping intermediate shapes.