The Call Stack and Execution Contexts

A Bug That Only Crashes in Production

Your teammate writes a recursive function to flatten deeply nested comment threads. It works perfectly in development with 3 levels of nesting. In production, a user has 12,000 nested replies. The page crashes with RangeError: Maximum call stack size exceeded.

The fix isn't "add more stack." The fix is understanding what the call stack actually is, why it has a limit, and how to restructure code that respects that limit.

The Mental Model

JavaScript is single-threaded. It has one call stack. That single stack is why a long-running function freezes the entire page — nothing else can execute until the current function returns and its frame is popped.

How the Call Stack Actually Works

Every time you call a function, the engine creates an execution context — a data structure that holds everything needed to run that function:

• Variable Environment — where let, const, and var declarations live
• Lexical Environment — the scope chain (how closures work)
• this binding — determined by how the function was called
• Code — the actual instructions to execute

These execution contexts are pushed onto the call stack. The engine always executes whatever is on top.

function multiply(a, b) {
  return a * b;
}

function square(n) {
  return multiply(n, n);
}

function printSquare(n) {
  const result = square(n);
  console.log(result);
}

printSquare(4);

Every step is deterministic. There is no concurrency, no parallelism, no surprises. The call stack is a pure LIFO (Last In, First Out) structure.

The Creation Phase vs. Execution Phase

Each execution context goes through two phases:

Creation phase (before any code in the function runs):

1. Create the Variable Environment — var declarations are initialized to undefined, let/const declarations are allocated but uninitialized (the Temporal Dead Zone)
2. Create the scope chain — link to the outer lexical environment
3. Determine this

Execution phase:

1. Execute code line by line
2. Assign values to variables
3. Call functions (which creates new execution contexts)

This two-phase process is why var hoisting works the way it does:

console.log(x); // undefined (created in creation phase)
var x = 5;

console.log(y); // ReferenceError: Cannot access 'y' before initialization
let y = 10;

var x is initialized to undefined during the creation phase. let y is allocated but lives in the Temporal Dead Zone until the engine reaches the declaration during the execution phase.

Stack Overflow: When the Stack Runs Out of Space

The call stack has a finite size. In V8 (Chrome/Node.js), it's roughly 10,000-15,000 frames depending on frame size. When you exceed it:

function recurse() {
  recurse(); // no base case
}

recurse(); // RangeError: Maximum call stack size exceeded

This isn't just a beginner mistake. It shows up in production with:

• Deeply nested data structures (comment threads, file trees, org charts)
• Mutually recursive functions where termination conditions have subtle bugs
• Prototype chain loops created by accident

The fix: Trampoline pattern

Convert recursion into iteration using a trampoline — a loop that calls functions until one returns a value instead of another function:

// Dangerous: stack overflow on deep trees
function sumTree(node) {
  if (!node) return 0;
  return node.value + sumTree(node.left) + sumTree(node.right);
}

// Safe: iterative with explicit stack
function sumTreeSafe(root) {
  let sum = 0;
  const stack = [root];
  while (stack.length > 0) {
    const node = stack.pop();
    if (!node) continue;
    sum += node.value;
    stack.push(node.left, node.right);
  }
  return sum;
}

The iterative version uses the heap (which is much larger) instead of the call stack. The "stack" variable is just an array — it can grow to millions of entries without hitting the call stack limit.

Production Scenario: The Silent Stack Overflow

A real-world example that bites teams: JSON.stringify with circular references.

const user = { name: 'Alice' };
const team = { members: [user] };
user.team = team; // circular reference

JSON.stringify(user); // RangeError: Maximum call stack size exceeded

This crashes because JSON.stringify recursively traverses the object. When it encounters the cycle (user -> team -> members -> user -> ...), it recurses infinitely.

The fix isn't always obvious in production where circular references form through complex ORM relationships, React state containing DOM references, or cached objects with back-pointers:

// Option 1: Replacer function to break cycles
const seen = new WeakSet();
JSON.stringify(user, (key, value) => {
  if (typeof value === 'object' && value !== null) {
    if (seen.has(value)) return '[Circular]';
    seen.add(value);
  }
  return value;
});

// Option 2: structuredClone handles cycles natively
// (but throws on functions, DOM nodes, etc.)

Common Mistakes

Challenge: Predict the Stack

Challenge: Trace the Call Stack

function a() {
  console.log('a start');
  b();
  console.log('a end');
}

function b() {
  console.log('b start');
  c();
  console.log('b end');
}

function c() {
  console.log('c');
}

a();

Key Rules