How JavaScript Handles Nested Function Calls

How JavaScript Handles Nested Function Calls

When a function calls another function, the engine stacks execution contexts. Understanding nested calls explains the call stack, the scope chain, and recursion.

The Stack Grows With Each Call

Each nested call pushes a new frame. The engine runs the top frame, returns, and pops it. Then the previous frame resumes.

function a() { return 1; }
function b() { return a() + 1; }
function c() { return b() + 1; }
c();

Stack during execution: [GEC, c, b, a]. As each returns, frames pop in reverse: a first, then b, then c.

Variable Resolution Across Nests

Inner functions can access variables from their lexical parents via the scope chain, not the call stack. The scope chain is determined by where functions are written, not where they are called.

function outer() {
  const x = 10;
  function inner() {
    console.log(x); // 10, via scope chain
  }
  inner();
}
outer();

Recursion Is Just Nested Calls

A recursive function calls itself. Each call is a new frame with its own local variables:

function factorial(n) {
  if (n <= 1) return 1;
  return n * factorial(n - 1);
}
factorial(3);

Stack: [GEC, factorial(3), factorial(2), factorial(1)]. Each frame has its own n. Returns unwind the stack, multiplying as it goes.

Async Nesting

If a nested call schedules async work, the callback runs later on its own frame:

function fetchUser(cb) {
  setTimeout(() => cb({ name: "A" }), 100);
}
fetchUser((user) => console.log(user));

The arrow runs in a new frame, pushed by the event loop after the stack is empty.

The Takeaway

Nested calls push frames onto the call stack. Variables are resolved through the scope chain (lexical), not through the stack order. Recursion is nested calls of the same function, each with its own locals. Async callbacks run as fresh invocations later.