The call stack

The stack of calls

A JavaScript program is always running somewhere: at the top level of a script, inside a function, or inside a function that was called by another function. The call stack is the engine’s record of those active calls.

The previous lesson, Execution contexts, introduced the context a function call needs: its local variables, parameters, scope links, and where to continue. A stack frame is the stack’s entry for one active call. It is the note that says “this execution context is currently running, and here is where it returns.”

This lesson goes deeper than the Recursion lesson’s plates analogy: you will watch ordinary helper functions push and pop frames, read a stack trace from top to bottom, safely trigger an overflow, and use the DevTools Call Stack panel with purpose.

A frame is pushed whenever JavaScript calls a function. The caller pauses underneath. When the callee returns, its frame is popped, and the caller continues from the waiting line.

The checkout example has a realistic shape: checkout calls calculateTotal, then applyCoupon, then formatReceipt. The helper roundPrice is called twice from different callers, proving that “same function” does not mean “same frame.”

1function checkout(cart, coupon) {2  const subtotal = calculateTotal(cart);3  const discounted = applyCoupon(subtotal, coupon);4  const receipt = formatReceipt(discounted);5  return receipt;6}7function calculateTotal(cart) {8  const total = cart.items.reduce((sum, item) => sum + item.price, 0);9  return roundPrice(total);10}11function applyCoupon(total, coupon) {12  if (coupon === "SAVE10") {13    return roundPrice(total * 0.9);14  }15  return roundPrice(total);16}17function formatReceipt(total) {18  return "$" + total.toFixed(2);19}20function roundPrice(value) {21  return Math.round(value * 100) / 100;22}Run23checkout({ items: [{ price: 19.99 }, { price: 5 }] }, "SAVE10");

The player above shows source lines and values. This playground shows the same run as stacked cards. It is a conceptual display of recorded events, not a secret window into the engine.

1function checkout(cart, coupon) {2  const subtotal = calculateTotal(cart);3  const discounted = applyCoupon(subtotal, coupon);4  const receipt = formatReceipt(discounted);5  return receipt;6}7function calculateTotal(cart) {8  const total = cart.items.reduce((sum, item) => sum + item.price, 0);9  return roundPrice(total);10}11function applyCoupon(total, coupon) {12  if (coupon === "SAVE10") {13    return roundPrice(total * 0.9);14  }15  return roundPrice(total);16}17function formatReceipt(total) {18  return "$" + total.toFixed(2);19}20function roundPrice(value) {21  return Math.round(value * 100) / 100;22}23checkout({ items: [{ price: 19.99 }, { price: 5 }] }, "SAVE10");

A stack trace is a snapshot of the call stack at the moment an error was created or thrown. Formats differ between V8, SpiderMonkey, JavaScriptCore, browsers, and Node.js, but the practical reading habit is the same: start at the top to find where the error began, then read downward to learn who called whom.

1function checkout() {2  calculateTotal();3}4function calculateTotal() {5  applyCoupon();6}7function applyCoupon() {8  throw new Error("Coupon database is offline");9}10checkout();

Click Run to capture your browser's stack trace.

1Error: Coupon database is offline2    at applyCoupon (checkout.js:7:9)3    at calculateTotal (checkout.js:4:3)4    at checkout (checkout.js:2:3)5    at checkout.js:9:1

Anonymous functions make traces harder to read because the engine has less name information. A named callback such as function showItem(item) { ... } gives the trace a useful label. V8 also exposes non-standard controls such as Error.captureStackTrace and Error.stackTraceLimit; the later Stack traces & the stack trace API lesson goes into those carefully.

The stack is finite. If calls keep piling up without returning, the pile hits the ceiling. Most browsers throw RangeError: Maximum call stack size exceeded; Firefox may report InternalError: too much recursion. The exact depth varies by engine, frame size, optimization, and settings.

1const user = {2  set name(value) {3    this.name = value;4  }5};6try {7  user.name = "Ada";8} catch (error) {9  console.log(error.name);10}

The setter assigns to this.name from inside the setter for name, so the setter calls itself again and again. Store the backing value somewhere else, such as this._name or a private field, to break the loop.

In the Debugging in the browser lesson, you used breakpoints and stepped into and out of functions. When code is paused, the DevTools Call Stack panel is the live version of the same idea. The top entry is the current function. Older callers are below.

1function checkout() {2  calculateTotal();3}4function calculateTotal() {5  applyCoupon();6}7function applyCoupon() {8  debugger;9}10checkout();

1. Open DevTools, choose Sources or Debugger, and run the snippet.
2. When debugger; pauses, read the Call Stack panel.
3. Click applyCoupon, calculateTotal, and checkout.
4. Watch the Scope or Variables panel change to that frame’s locals.

Modern DevTools can also show async stack traces for callbacks and promises. Those are reconstructed histories, not one single synchronous stack. You will meet them again in Async stack traces.

Where you’ll use this

You use the call stack whenever you debug code that jumps between helpers. If an error appears inside roundPrice, the stack tells you whether the bad input came from calculateTotal or applyCoupon. If a callback fails inside forEach, the stack tells you which application function started the iteration.

Common misconceptions

Key takeaways

• Calling a function pushes a stack frame; returning pops it.
• The top frame is the currently running function. Callers wait underneath.
• A stack trace snapshots active calls when an error is created or thrown.
• Stack overflow happens when calls keep nesting until the stack limit is reached.
• DevTools lets you inspect each paused frame’s source and local variables.

Up next: Hoisting & the temporal dead zone.