Call Stack

advanced
Published

March 5, 2024

JavaScript, being a single-threaded language, relies heavily on the call stack to manage function execution. Understanding the call stack is important for debugging and writing efficient JavaScript code. This post will look at the call stack, its role in program execution, and what happens when things go wrong (stack overflow errors).

What is the Call Stack?

Imagine a stack of plates. The last plate you put on is the first one you take off. The JavaScript call stack works similarly. Whenever a function is called, it’s “pushed” onto the stack. When the function completes, it’s “popped” off, and execution resumes where it left off in the calling function. This LIFO (Last-In, First-Out) structure is fundamental to how JavaScript manages its execution context.

A Simple Example

Let’s illustrate with a simple code example:

function greet(name) {
  console.log("Hello, " + name + "!");
  return "Greeting sent";
}

function sayHello() {
  const message = greet("World");
  console.log("Message returned:", message);
}

sayHello();

Here’s how the call stack would look during execution:

  1. sayHello() is called: sayHello() is pushed onto the call stack.
  2. greet() is called: Inside sayHello(), greet() is called. greet() is pushed onto the stack on top of sayHello().
  3. greet() completes: greet() logs “Hello, World!” and returns “Greeting sent”. greet() is popped off the stack.
  4. sayHello() completes: Execution resumes in sayHello(). sayHello() logs “Message returned: Greeting sent” and then is popped off the stack.

The stack is now empty, indicating the completion of the program.

Visualizing the Call Stack

You can visualize this process:

Step 1: sayHello() on the stack

[sayHello()]

Step 2: greet() added

[greet()]
[sayHello()]

Step 3: greet() removed

[sayHello()]

Step 4: sayHello() removed

[]

Stack Overflow Errors

When a function calls itself recursively without a base case (a condition to stop the recursion), or when there’s an extremely deep nesting of function calls, it can lead to a stack overflow error. This happens when the call stack exceeds its allocated memory.

function infiniteRecursion() {
  infiniteRecursion();
}

infiniteRecursion(); // This will cause a stack overflow error!

This example will continuously push infiniteRecursion() onto the stack until the browser runs out of memory. Browsers have limits on the stack size to prevent crashes.