Understanding Call Stack

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:

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.

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

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

• Execute greeting().
• Delete greeting() from the stack.

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:

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:

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:

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.

Comments

[Oswaldo Pineda]

This is my first blog on Dev.to, any feedback is welcome!