The JavaScript Call Stack and Execution Context, Explained

"JavaScript is single-threaded" is a sentence every developer repeats and few can actually explain. It means there is exactly one call stack, and the JS engine can only ever be doing one thing at a time. Understanding the call stack is understanding what that one thing actually looks like.

What the call stack actually is

Every time a function is called, the engine pushes a new execution context onto the stack — a record of that function's local variables, its arguments, and where to resume the calling function once this one returns. When the function returns, its context is popped off. It's a literal stack: last in, first out.

function third() { console.log(new Error().stack); }
function second() { third(); }
function first() { second(); }
first();
// Stack at the deepest point: third → second → first → (global)

Why this explains stack overflow, exactly

A recursive function with no base case keeps pushing new execution contexts and never pops any of them off, because none of them ever return. The stack has a fixed size (set by the engine, not by you), and once it's exceeded, you get `RangeError: Maximum call stack size exceeded` — not a vague crash, a specific, literal description of what just happened: too many frames, stacked too deep.

Why this explains "single-threaded"

Because there's one call stack, there's one thing executing at any instant. A long-running synchronous function — a huge loop, a heavy computation — blocks that stack completely: no click handlers fire, no rendering happens, nothing else runs until it returns. This is the actual mechanism behind the advice "don't block the main thread," and it's why JavaScript's answer to "how do I not block" isn't threads — it's the event loop, which is the next post in this series.