Introducing the JavaScript Call Stack Visually

What is the call stack?

The call stack is a feature not just of JavaScript but many other programming languages. When the code is running the call stack enables the JavaScript interpreter (how the files are read) to keep track of where in the code it is and which function is currently running. This becomes necessary if you have a function which calls another function.

What is a stack?

In computer science a stack is a basic data structure. Just like when you stack up some lego or you pile up some books, the last thing put on the stack goes on the top of the stack. It also becomes the first thing to be removed. The call stack works in the same way. A function gets pushed on to the call stack and later when a value is returned from a function it will get popped off the call stack.

If we have a program with many function calls when the program starts then the first function which is reached by the interpreter is added to the call stack. The function is then run, If the function then calls another function then this function is added to the top of the call stack. This process continues until one of the functions returns some value. When this happens the function is removed from the call stack. The function which is currently running (or being executed) is at the top of the call stack. Lets look at an example.

Understanding the JavaScript call stack?


const addOne = (value) => value + 1;
const doubleValue = (value) => addOne(value) * 2;
const makeTotal = (a, b) => {
return doubleValue(a) + doubleValue(b);
}
makeTotal(10, 20);
//Returns ---> 64


In the code example above we create a function called addOne which takes a value and adds one to the value. We create a second function called doubleValue which calls the addOne function and multiples the returned value by two. We create a third function called makeTotal. This function adds the return values from the doubleValue function using the parameters a and b. We then go ahead and call the makeTotal function passing in the arguments 10 and 20. Lets step through how this works using the JavaScript call stack.

Visualising the call stack

When we call makeTotal it gets pushed on to the call stack as shown in the diagram below. 10 becomes the value for the parameter a and 20 becomes the value for the parameter b. MakeTotal starts by calling the function doubleValue with the parameter a.

Next, makeTotal calls the doubleValue function with the parameter a (the value 10). MakeTotal has not returned anything so it remains on the call stack and doubleValue also gets pushed on to the call stack. This is shown in the diagram below.

The function doubleValue calls the addOne function passing in the value parameter which was the a parameter from the makeTotal function (10). The doubleValue function has not yet returned anything so this also remains on the call stack. The addOne function also gets added on to the call stack. This is shown in the diagram below.

The function addOne returns the total from adding 1 to the value parameter (10). As this function returns a value this now gets popped off the call stack and the current state of the call stack is shown in the diagram below.

The function doubleValue then takes the return value from the addOne function (11) and multiplies this by 2. This value is then returned so the doubleValue function is popped off the call stack as we can see in the diagram below.

The function makeTotal now moves on to calling doubleValue with the b parameter (20) so doubleValue is once again added to the call stack.

The doubleValue function goes ahead and calls the addOne function so this is also added to the call stack.

The addOne function returns the total of adding the value parameter and 1. As this function is complete and returns a value addOne is popped off the call stack.

The doubleValue function multiples the output of the addOne function and then also returns a value. This is popped off the call stack.

The makeTotal function then returns the total which leaves us with an empty call stack.

Please feel free to post any comments, questions or feedback!

I also have a Udemy course that is a great kickstart for beginners.

See you next time!