Understanding Call Stack
Tags: javascript, node, programming
Published: 2023-08-06 21:37:30

The call stack is the base to understand why javascript can do only one process at a time and how our programs are executed. We are going to talk about the call stack that Javascript has, this is an important concept to understand other topics such as Event Loop, Closures, and Scopes.

We will talk about what it is and what it is for, what specific information is stored on it and how we can see it in the browser when we are running a program helping to find bugs in your code in a faster and more efficient way.

## What is Call Stack?
It is a mechanism used by the Javascript interpreter in the browser to keep track of which function is in each step of the program execution and which functions were executed before getting there.
Understanding what execution is before the current execution, where the call was made from, and what is its context.

Leet's see an example:

![Call stack example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/mbj2pfs3xjt9cdgqscov.png)

Let’s see the execution of the previous code:

- Read line by line.
- Execute the first function called that is `greeting()`.
- Add `greeting()` to call stack.


![Call stack image one](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0107p32tg9o1f3fbxkfw.png)

- The `greeting()` function calls the function `sayHi()`.
- Add `sayHi()` to call stack.


![Call stack image two](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/p3bnp0394obz20pf73v3.png)

- If there are no more function calls the stack will take and execute the function at the top.
- Execute `sayHi()`.
- Delete `sayHi()` from the stack.


![Call stack image three](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m1nlog5yiaier1mek8ko.png)

- Execute `greeting()`.
- Delete `greeting()` from the stack.


![Call stack image four](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7r9wjsc5qjpc9u0971ua.png)

Understanding these steps is important to know that the Javascript engine can only execute one procedure at a time and you can see how it is executed step by step in your browser by accessing the developer tools like this:



![Call stack execution gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qsoax5fnm2kmoh5pgzk2.gif)

This tool allows us to see more important information in the execution of the code such as the Scope.

## What is the Scope?
The scope is the set of variables that the executing function has access to, whether it is the context(this), arguments, or global object(window or global).

In the execution of the sayHi and greeting functions, we can see that there are two values, global and local. In both functions, we can see that the value `this` exists, `this` is a very important variable that functions have in Javascript and it refers to the object that owns the function. The `this` object determines the context of the function.

Let's see how the execution stack behaves when a function calls itself:

![Scope execution gif](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/rar1r07s3tznl5vhxoly.gif)

We can see that the function calls itself but this time with a different value since we are subtracting 1 in each iteration, the function is added again to the call stack appearing to be the same but each with its execution context.

Every time a function is called, an execution context is created for that function and it is added to the stack, even if it is the same function with the same name, they are considered as two different elements in the call stack, each with its own name. own context.

## Call Stack Limit
If we modify the previous code a bit to always receive the same value in the countDown function, we can see the following error:

![Call stack error](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xbwux4azzv7yjl8kln4l.png)

As much as we add elements to the stack, it has a limit, each engine defines a limit for the number of references that the stack can store, without this limit our computer would continue to store values infinitely. This is something that we must keep in mind when using the call stack so that it does not happen to us in our programs.


Understanding how the call stack works is important to work with Javascript professionally and I hope it has helped to understand this basic but important concept more clearly.