Understanding the Call Stack

A simple mechanism used by JavaScript to keep track of function execution

The global execution context is denoted as “main()“ in the image above.

Introduction

The call stack is a simple mechanism used by JavaScript to keep track of function execution. It's a ¹stack data structure that follows a Last In, First Out (LIFO) principle, meaning the last function to be called is the first to complete.

Essentially, whenever a function is invoked, it's added (or "pushed") to the top of the call stack, and when the function completes execution, it's removed (or "popped") off the stack.

The call stack ensures that JavaScript remains single-threaded (i.e. it can only execute one function at a time).

How the Call Stack Works

Before any code is executed, JavaScript creates a global execution context. This context is the default environment where all code execution begins. It’s responsible for setting up the environment in which the call stack operates.

Here’s how the call stack works in a step-by-step manner:

1. Function Call: When a function is invoked, it is added, or “pushed,” to the call stack.

2. Execution: The JavaScript engine starts executing the function that is on top of the call stack.

3. Completion: Once the function finishes, it is removed, or “popped,” from the call stack.

4. Next Function: If there’s another function in the stack, the engine starts executing it. Otherwise, the stack is empty.

A practical example

Let’s look at a practical example to visualize the call stack —

function first() {
  second();
}

function second() {
  third();
}

function third() {
  console.trace('End.');
}

first();

Order of operations:

• The engine first invokes first(), which is pushed to the stack.

• Inside first(), second() is called and added to the stack.

• Inside second(), third() is called and added to the stack.

• The third() function completes and is removed from the stack.

• The second() function completes and is removed from the stack.

• The first() function completes and is also removed from the stack.

When the Stack Overflows

While the call stack is efficient, it does have its limits. If too many functions are pushed onto the stack without being popped off, you can encounter a “stack overflow”.

function recurse() {
  recurse(); // Infinite recursion
}

recurse(); // Causes a stack overflow.

In this case, each call to recurse() adds another function to the stack, and since there’s no exit condition, the stack keeps growing until it exceeds its limit, resulting in an error.

How Asynchronous Code Affects the Call Stack

JavaScript’s synchronous nature means only one task can be executed at a time. However, JavaScript also handles asynchronous operations like setTimeout, promises, and API calls efficiently. How does that work with the call stack?

While asynchronous functions doesn’t block the call stack, they use a mechanism called the ²event loop. Here’s how it looks:

console.log("Start");

setTimeout(() => {
  console.log("Inside setTimeout");
}, 1000);

console.log("End");

Order of operations:

• The call stack processes console.log("Start"), then sets the timeout.

• The function inside setTimeout waits in the background, leaving the call stack free.

• The stack logs "End".

• After one second (i.e. the time specified in the setTimeout function), the callback from setTimeout is added to the stack and executed.

Debugging with the Call Stack

One of the key reasons to understand the call stack is debugging. Most modern browsers come with developer tools that allow you to inspect the call stack at any point during code execution.

For example, when an error occurs, you can see exactly what functions were called and in what order, helping you pinpoint where the issue is in your code.

Conclusion

The is fundamental to understanding how JavaScript executes your code. Understanding how it works can improve your ability to write efficient code, avoid stack overflow errors, and debug problems with greater ease.

When next you're troubleshooting or optimizing your JavaScript code, remember that the call stack is always there, quietly managing function execution in the background.

That’ll be all for now ✌🏼

1. A “stack” is a linear data structure that follows the Last-In, First-Out (LIFO) principle. A similar data structure is the “queue”, which works differently as this follows the First-In, First-Out (FIFO) principle.

2. The event loop is a core concept in JavaScript that handles asynchronous operations, enabling JavaScript to remain non-blocking despite being single-threaded. It’s what allows JavaScript to perform tasks like handling user interactions, executing setTimeout callbacks, and processing AJAX requests, all while keeping the application responsive.