The call stack

Each active function call has a stack frame containing information such as its local variables and where execution should return.

function formatName(name) {
  return name.trim().toUpperCase()
}

function renderUser(user) {
  return `<p>${formatName(user.name)}</p>`
}

renderUser({ name: ' Ada ' })

The stack grows in this order:

1. the top-level script
2. renderUser()
3. formatName()

formatName() returns first, then renderUser(). The last function called is the first one removed, so the stack is last-in, first-out.

This model explains two practical debugging tools. An error stack trace shows the chain of calls that led to the error. A breakpoint’s Call Stack pane lets you select an earlier frame and inspect the values that caller passed.

It also explains stack overflow. Recursion must eventually reach a base case:

function countdown(value) {
  if (value === 0) return
  countdown(value - 1)
}

Remove the base case and frames keep accumulating until the engine refuses another call.

Set a breakpoint inside formatName(), reload the page, and inspect the Call Stack pane. Step out once and watch the formatName frame disappear while renderUser becomes active again.