How the JS Call Stack Handles Function Execution

Learn exactly how the JavaScript call stack manages function execution. Covers frame creation, parameter passing, return values, nested calls, recursion mechanics, and error propagation through the stack.

RuneHub Team

March 1, 2026

11 min read

RuneHub Team

Mar 1, 2026

11 min read

The call stack does more than just track which function is running. It manages how arguments are passed, how local variables are allocated, how return values are delivered back to callers, and how errors propagate. This guide walks through the precise mechanics of each of these operations.

What Happens When You Call a Function

When JavaScript encounters a function call, the engine performs these steps in order:

Evaluate arguments: Each argument expression is evaluated left to right
Create a new execution context: Contains the lexical environment, this binding, and outer reference
Push the context onto the call stack: The new context becomes the "running" context
Bind parameters: Function parameters are bound to the argument values in the environment record
Execute the function body: Code runs line by line
Return: A value is produced (or undefined if no return statement)
Pop the context: The execution context is removed from the stack
Resume the caller: The calling function continues from where it left off

javascript

function add(a, b) {
  // Step 4: a = 3, b = 4 bound in environment record
  // Step 5: Execute body
  const sum = a + b;
  return sum; // Step 6: Return 7
}
 
// Step 1: Evaluate arguments (3 and 2+2)
// Step 2-3: Create EC for add, push to stack
const result = add(3, 2 + 2);
// Step 7: add's EC popped
// Step 8: result = 7, execution continues
console.log(result); // 7

Argument Evaluation Order

Arguments are evaluated before the function's execution context is created:

javascript

let counter = 0;
 
function increment() {
  return ++counter;
}
 
function display(a, b, c) {
  console.log(a, b, c);
}
 
// Arguments are evaluated left to right:
display(increment(), increment(), increment());
// Output: 1 2 3
 
// The call stack at the point of display():
// 1. increment() is called -> returns 1 -> popped
// 2. increment() is called -> returns 2 -> popped
// 3. increment() is called -> returns 3 -> popped
// 4. display(1, 2, 3) is called -> pushed

Parameter Binding Mechanics

Parameters are local variables created in the function's environment record. They are copies of the argument values (for primitives) or copies of the reference (for objects):

javascript

function modifyPrimitive(x) {
  // x is a COPY of the value 5
  x = 100;
  console.log("Inside:", x); // 100
}
 
let num = 5;
modifyPrimitive(num);
console.log("Outside:", num); // 5 (unchanged)
 
function modifyObject(obj) {
  // obj is a copy of the REFERENCE (not the object itself)
  obj.name = "Modified"; // Mutates the original object
  console.log("Inside:", obj.name); // "Modified"
}
 
const user = { name: "Original" };
modifyObject(user);
console.log("Outside:", user.name); // "Modified" (the object was mutated)

Parameter vs Arguments Table

Feature	Parameters	`arguments` Object
Defined where	Function declaration	Auto-created in non-arrow functions
Type	Named variables	Array-like object
Extra args	Ignored (or use rest `...args`)	All arguments available
Missing args	Set to `undefined`	Not present
In arrow functions	Available	Not available (use rest params)

Return Value Delivery

When a function returns, the return value is placed where the function call expression was in the caller's code:

javascript

function getFullName(first, last) {
  return `${first} ${last}`; // Return value: "Alice Smith"
  // Execution context is popped after return
}
 
function createUser(first, last) {
  // getFullName() call -> push -> execute -> return "Alice Smith" -> pop
  // The return value replaces the call expression:
  const name = getFullName(first, last); // name = "Alice Smith"
 
  return { name, id: Math.random() };
  // createUser's return value goes back to the global scope call site
}
 
const user = createUser("Alice", "Smith");

Multiple Return Points

Only the first return reached is executed. The function is immediately popped from the stack:

javascript

function classify(score) {
  if (score >= 90) return "A"; // If reached, function exits here
  if (score >= 80) return "B"; // If reached, function exits here
  if (score >= 70) return "C";
  return "F"; // Default return
}
 
// When classify(85) is called:
// 1. Push classify EC
// 2. score >= 90? No
// 3. score >= 80? Yes -> return "B"
// 4. Pop classify EC immediately (lines below are never reached)

Implicit Return

Functions without a return statement return undefined:

javascript

function noReturn() {
  console.log("I do stuff");
  // No return statement
}
 
const result = noReturn(); // undefined
// The stack frame is popped when execution reaches the closing }

Nested Function Calls

Each nested call pushes a new frame. The outer function's frame stays on the stack, paused at the call site:

javascript

function capitalize(str) {
  return str.charAt(0).toUpperCase() + str.slice(1);
}
 
function formatName(first, last) {
  // formatName is paused while capitalize runs
  const formattedFirst = capitalize(first);
  // capitalize returns, formatName resumes
  const formattedLast = capitalize(last);
  return `${formattedFirst} ${formattedLast}`;
}
 
function greetUser(first, last) {
  // greetUser is paused while formatName (and its nested calls) run
  const name = formatName(first, last);
  return `Hello, ${name}!`;
}
 
console.log(greetUser("alice", "smith"));
// Stack at deepest point: [Global, greetUser, formatName, capitalize]

Execution Timeline

Code

Time ->

Global:     |--- greetUser() call ---|------ resume ------|
greetUser:       |--- formatName() --|-- resume --|
formatName:           |-- capitalize("alice") --|-- capitalize("smith") --|
capitalize:                |-- exec --|                |-- exec --|

How Recursion Uses the Stack

Each recursive call creates a completely new stack frame. The frames accumulate until the base case is reached, then they unwind:

javascript

function factorial(n) {
  console.log(`Push: factorial(${n})`);
 
  if (n <= 1) {
    console.log(`Base case: return 1`);
    return 1;
  }
 
  const result = n * factorial(n - 1); // Pushes a new frame
  console.log(`Pop: factorial(${n}) = ${result}`);
  return result;
}
 
factorial(4);
 
// Output:
// Push: factorial(4)          Stack: [G, f(4)]
// Push: factorial(3)          Stack: [G, f(4), f(3)]
// Push: factorial(2)          Stack: [G, f(4), f(3), f(2)]
// Push: factorial(1)          Stack: [G, f(4), f(3), f(2), f(1)]
// Base case: return 1         Unwind starts
// Pop: factorial(2) = 2       Stack: [G, f(4), f(3)]
// Pop: factorial(3) = 6       Stack: [G, f(4)]
// Pop: factorial(4) = 24      Stack: [G]

Stack Memory During Recursion

Frame	`n`	Waiting for	After return
`factorial(4)`	4	`factorial(3)`	4 * 6 = 24
`factorial(3)`	3	`factorial(2)`	3 * 2 = 6
`factorial(2)`	2	`factorial(1)`	2 * 1 = 2
`factorial(1)`	1	(base case)	1

Each frame holds its own n and its own result variable. The total memory used is proportional to the recursion depth.

Error Propagation Through the Stack

When an error is thrown, JavaScript unwinds the call stack frame by frame looking for a try...catch block. If none is found, the error reaches the global scope and becomes an uncaught exception:

javascript

function validateEmail(email) {
  if (!email.includes("@")) {
    throw new Error(`Invalid email: ${email}`);
    // Error is thrown HERE -- validateEmail is on top of stack
  }
  return email;
}
 
function createAccount(data) {
  // No try...catch here -- error propagates upward
  const email = validateEmail(data.email);
  return { email, name: data.name };
}
 
function handleSubmit(formData) {
  try {
    // Error will propagate from validateEmail -> createAccount -> here
    const account = createAccount(formData);
    console.log("Account created:", account);
  } catch (error) {
    // CAUGHT HERE -- unwinding stops
    console.log("Error caught:", error.message);
  }
}
 
handleSubmit({ name: "Alice", email: "invalid" });
// "Error caught: Invalid email: invalid"

Error Propagation Stack Trace

Code

1. validateEmail throws Error
   Stack: [Global, handleSubmit, createAccount, validateEmail]

2. validateEmail has no try...catch -> pop validateEmail
   Stack: [Global, handleSubmit, createAccount]

3. createAccount has no try...catch -> pop createAccount
   Stack: [Global, handleSubmit]

4. handleSubmit HAS try...catch -> error is caught
   Stack: [Global, handleSubmit]
   Execution continues in the catch block

Closures and the Stack

When a closure is created, the inner function's [[Environment]] reference keeps the outer function's lexical environment alive even after the outer function's frame is popped from the stack:

javascript

function createLogger(prefix) {
  // Frame pushed: { prefix: "APP" }
 
  return function log(message) {
    // log.[[Environment]] -> createLogger's lexical env
    console.log(`[${prefix}] ${message}`);
  };
  // Frame popped, but lexical env { prefix: "APP" } survives
}
 
const appLog = createLogger("APP");
// createLogger's stack frame is GONE
// But appLog still has access to prefix through [[Environment]]
 
appLog("Started"); // [APP] Started
// New frame for log is pushed, resolves prefix via [[Environment]]

Higher-Order Functions and the Stack

Higher-order functions create interesting stack patterns because the callback is called from inside the higher-order function:

javascript

function transform(array, callback) {
  const result = [];
  for (let i = 0; i < array.length; i++) {
    // callback is pushed and popped for EACH element
    result.push(callback(array[i], i));
  }
  return result;
}
 
const numbers = [1, 2, 3];
const doubled = transform(numbers, (num) => num * 2);
 
// Stack during first callback:
// [Global, transform, (anonymous callback)]
// callback returns 2, popped
// Stack: [Global, transform]
// Second callback pushed, and so on...

Chained Higher-Order Functions

javascript

const result = [1, 2, 3, 4, 5]
  .filter((n) => n > 2)    // filter runs, pushes/pops callback 5 times
  .map((n) => n * 10)      // map runs, pushes/pops callback 3 times
  .reduce((sum, n) => sum + n, 0); // reduce runs, pushes/pops 3 times
 
console.log(result); // 120
 
// Each method runs sequentially:
// 1. filter completes entirely (returns [3, 4, 5])
// 2. Then map runs (returns [30, 40, 50])
// 3. Then reduce runs (returns 120)

Stack Inspection Techniques

Using console.trace

javascript

function deeplyNested() {
  console.trace("Stack check");
  return 42;
}
 
function middle() {
  return deeplyNested();
}
 
function top() {
  return middle();
}
 
top();
// Prints the call stack without interrupting execution

Examining Stack Depth

javascript

function getStackDepth() {
  let depth = 0;
  try {
    (function recurse() {
      depth++;
      recurse();
    })();
  } catch (e) {
    // Stack overflow caught
  }
  return depth;
}
 
console.log("Max stack depth:", getStackDepth());
// Output varies: ~10,000 to ~25,000 depending on browser

Custom Stack Tracker

javascript

function createStackTracker() {
  let maxDepth = 0;
  let currentDepth = 0;
 
  return {
    push(label) {
      currentDepth++;
      if (currentDepth > maxDepth) maxDepth = currentDepth;
      console.log(`${"  ".repeat(currentDepth)}-> ${label} (depth: ${currentDepth})`);
    },
 
    pop(label) {
      console.log(`${"  ".repeat(currentDepth)}<- ${label}`);
      currentDepth--;
    },
 
    getMaxDepth() {
      return maxDepth;
    }
  };
}
 
const tracker = createStackTracker();
 
function fibTracked(n) {
  tracker.push(`fib(${n})`);
  let result;
  if (n <= 1) {
    result = n;
  } else {
    result = fibTracked(n - 1) + fibTracked(n - 2);
  }
  tracker.pop(`fib(${n}) = ${result}`);
  return result;
}
 
fibTracked(4);
console.log("Max depth:", tracker.getMaxDepth());

Rune AI

Key Insights

Seven-step function call cycle: Evaluate arguments, create execution context, push to stack, bind parameters, execute body, return value, pop from stack
Parameters are local copies: Primitives are copied by value, objects are copied by reference, the original variable in the caller is never reassigned
Recursion accumulates frames: Each recursive call adds a new frame with its own local variables, unwinding happens only after the base case returns
Errors propagate by unwinding: Thrown errors pop frames off the stack one by one until a try/catch is found or the global scope is reached
Closures outlive their stack frames: The execution context is destroyed when popped, but the lexical environment persists if any inner function holds a reference to it

Frequently Asked Questions

What is the difference between the call stack and the memory heap?

The call stack stores execution contexts (function calls with their local variables and parameters) in a LIFO structure. The memory heap is where [objects](/tutorials/programming-languages/javascript/what-is-an-object-in-javascript-beginner-guide), [arrays](/tutorials/programming-languages/javascript/how-to-create-and-initialize-javascript-arrays), and functions are actually stored. Stack frames reference heap objects, so when a local variable holds an object, the variable (a pointer) is on the stack while the actual object data is on the heap.

Does each function call really create a new execution context?

Yes. Every function invocation, including recursive calls and [callback](/tutorials/programming-languages/javascript/what-is-a-callback-function-in-js-full-tutorial) invocations, creates a brand new execution context with its own environment record, `this` binding, and outer reference. This is pushed onto the call stack and popped when the function returns. This is why recursive functions accumulate stack frames and can cause overflow.

How do return values travel through the call stack?

When a function executes a `return` statement, its execution context is popped from the stack and the return value is placed at the exact location in the calling function's code where the function call expression appeared. If the call was `const x = fn()`, the return value becomes the value of `x`. If the function has no return statement, `undefined` is returned implicitly.

Why do errors include a stack trace?

When an `Error` object is created, JavaScript captures the current state of the call stack and stores it in the error's `stack` property. This snapshot shows every function on the call stack at the moment the error was created, giving developers a complete call chain for debugging. The trace reads from top (where the error occurred) to bottom (the entry point). See our guide on [reading stack traces](/tutorials/programming-languages/javascript/how-to-read-and-understand-javascript-stack-traces) for more.

Can I increase the maximum call stack size?

In browsers, you cannot control the call stack size. In Node.js, you can pass `--stack-size=<size in KB>` to increase it, but this is rarely the right solution. If you are hitting stack limits, the better approach is to rewrite the algorithm iteratively, use a trampoline, or use an explicit stack data structure (a regular array that you [push](/tutorials/programming-languages/javascript/js-array-push-and-pop-methods-a-complete-guide) and pop from manually).

Conclusion

The call stack manages the entire lifecycle of function execution: argument evaluation, context creation, parameter binding, code execution, return value delivery, and error propagation. Each function call pushes a new frame and each return pops it. Closures survive stack popping because they hold references to lexical environments, not to stack frames. Errors unwind the stack looking for catch blocks.

How the JS Call Stack Handles Function Execution

What Happens When You Call a Function

Argument Evaluation Order

Parameter Binding Mechanics

Parameter vs Arguments Table

Return Value Delivery

Multiple Return Points

Implicit Return

Nested Function Calls

Execution Timeline

How Recursion Uses the Stack

Stack Memory During Recursion

Error Propagation Through the Stack

Error Propagation Stack Trace

Closures and the Stack

Higher-Order Functions and the Stack

Chained Higher-Order Functions

Stack Inspection Techniques

Using console.trace

Examining Stack Depth

Custom Stack Tracker

Rune AI

Frequently Asked Questions

What is the difference between the call stack and the memory heap?

Does each function call really create a new execution context?

How do return values travel through the call stack?

Why do errors include a stack trace?

Can I increase the maximum call stack size?

Conclusion

Tags

More in this topic

OffscreenCanvas API in JS for UI Performance

Advanced Web Workers for High Performance JS

JavaScript Macros and Abstract Code Generation

Stay Updated