Introducing the JavaScript Call Stack Visually
Tags: javascript, programming, tutorial, beginners
Published: 2022-04-20 12:58:34


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ra01p6zdap074cst0qoe.jpg)

{% embed https://www.youtube.com/watch?v=HXqXPGS96rw %}

## 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.


![call stack](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rl782e7pucnsl0pephos.jpg)

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. Let’s 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. Let’s 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_.


![call stack 1](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v7bpzxezrtc4jkf11p2b.jpg)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d6gplpzrclzr0e2ubgs2.jpg)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/eh3784opjeg8dhnol30f.jpg)


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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbzb1l5njckh3565jktl.jpg)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v6nxbwohw2mu7tw7g0di.jpg)

The function _makeTotal_ now moves on to calling _doubleValue_ with the _b_ parameter (20) so _doubleValue_ is once again added to the call stack.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/vv8ro57nca6u8w4zmet3.jpg)

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


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipwpa493tui6dgpyddab.jpg)

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.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/z02vep87ssogtq4vn6s5.jpg)

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.

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/cc0h7cazbj4abw2zc1bb.jpg)

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

I also have a [Udemy](https://www.udemy.com/course/learn-javascript-in-90-minutes/) course that is a great kickstart for beginners.

See you next time!