The JavaScript Stack Explained

JavaScript code is executed through leveraging two key data structures:

• the stack
• the heap

The goal in this blog post is to explain and clarify what the JavaScript call stack is.

The Stack

A stack is an ordered data structure that keeps track of functions invocations. It is important to note, the JavaScript call stack is part of the JavaScript runtime, you do not directly modify the stack.

Whenever you invoke a function (in JavaScript) the details of the invocation of that function is saved ("pushed") to the top of the stack. When the function returns a value, the information regarding the invocation is removed ("popped") from the top of the stack.

A Simple Stack Example

function multiply(x, y){    // line 1 
    return x * y;           // line 2
}                           // line 3 
let result = multiply(3,5); // line 4 

So in practice; when a script is executed by the browser, the JavaScript runtime first loads the main function to the top of the stack; in the example above this would be line 5 (let result = multiply(3,5);), where the stack records the name of the function and the location (i.e. line-number) at which the function was invoked.

At this point the stack would have 1 invocation:

1. 4 function: main

As the JavaScript runtime parses the first function call from the top of the JavaScript file (the multiply function), it then loads ("pushes") the multiply function to the stack.

At this points the stack would have 2 invocations:

1. 4 function: main
2. 2 funtion: multiply

This indicates that the call stack, with the first function of main is waiting on the function of multiply to resolve, before it can continue. Once the result of multiply(3,5) has been evaluated, multiply is removed ("popped") from the call stack.

Since there is nothing else in the file, the execution of the main function is considered complete; which means the call stack will now remove the main function from the stack, resulting in an empty stack/call stack.

Stack Frame

The "Stack Frame" refers to a single element in the JavaScript runtime call stack. Each "Stack Frame" contains the following information:

• the function that was invoked.
• the parameters that were passed to the function
• the line-number from which execution of the function started.

So, piecing that information together, we can understand that the JavaScript call stack is:

• An ordered set of stack frames
• the most recently invoked function would be at the top of the stack
• the bottom of the stack is the first function invoked
• the stack is always processed from top to bottom.

Why should you care?

Understanding how the call stack works is fundamental to writing web applications. Not only is it helpful to understand how the JavaScript runtime executes the logic in your application, but if you have ever seen a JavaScript error (or an error in pretty much any language), you've seen a text representation of the call stack (typically called a "stacktrace"), which tells you where your code threw an error, and what events lead up to that errors occurrence.