JavaScript Call Stack Basics for Beginners

JavaScript Call Stack Basics for Beginners

The call stack is a data structure that tracks which function is currently running and what to return to when it finishes.

How It Works

• The stack is LIFO: Last In, First Out.
• When a function is called, a frame is pushed onto the stack.
• The frame contains the function's arguments, local variables, and the return address.
• When the function returns, its frame is popped.

Example

function greet() {
  sayHi();
  console.log("done");
}
function sayHi() {
  console.log("hi");
}
greet();

1. GEC is at the bottom.
2. greet() is called, frame pushed.
3. sayHi() is called inside, frame pushed on top.
4. sayHi logs "hi" and returns, frame popped.
5. greet logs "done" and returns, frame popped.
6. Only GEC remains.

Stack Overflow

If functions keep calling each other without returning (infinite recursion), frames pile up until the engine's stack limit is hit. The engine throws a RangeError: Maximum call stack size exceeded.

function recurse() { recurse(); }
recurse(); // RangeError

Why It Matters

• The stack is single, so a long-running function blocks everything else.
• The event loop only runs queued callbacks when the stack is empty.
• Debugging stack traces are literal snapshots of the call stack at error time.

The Takeaway

The call stack tracks active function calls as a LIFO stack. Each call pushes a frame, each return pops one. Infinite recursion causes stack overflow. The stack must be empty before the event loop can run queued callbacks.