What Is the Call Stack in JavaScript?

What Is the Call Stack in JavaScript?

The call stack is a LIFO data structure that the JavaScript engine uses to track active function calls. It is the core mechanism that makes code execution possible.

How It Works

• When a function is called, a stack frame is pushed onto the top of the stack.
• The frame holds the function's arguments, local variables, and the address to return to.
• When the function returns, the frame is popped.
• Only the frame on top is active. JS executes one function at a time.

A Walkthrough

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(5);

Stack at each step:

1. GEC sits at the bottom.
2. printSquare(5) called, frame pushed.
3. Inside it, square(5) called, frame pushed on top.
4. Inside it, multiply(5, 5) called, frame pushed on top.
5. multiply returns 25, frame popped.
6. square returns 25, frame popped.
7. printSquare logs 25 and returns, frame popped.
8. Only GEC remains.

Stack Overflow

The stack has a finite size. If you recurse without a base case, frames pile up:

function infinite() { infinite(); }
infinite(); // RangeError: Maximum call stack size exceeded

Why the Call Stack Matters

• It explains stack traces in errors (the trace is the stack at the time of the error).
• A blocking function (long loop) holds the stack, freezing the UI.
• The event loop can only push queued callbacks when the stack is empty.

The Takeaway

The call stack is a LIFO stack of function frames. Each call pushes a frame, each return pops one. One function runs at a time. Infinite recursion causes stack overflow. The stack must be empty for the event loop to schedule async callbacks.