The JavaScript Stack Explained
Published: 2020-05-21 22:20:45

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 `return`s a value, the information regarding the invocation is removed ("popped") from the top of the stack. 

### A Simple Stack Example 

```js
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.