With that in mind, today we’ll move on to the javascript call stack. Let’s start by reviewing the previous article: Three types of JavaScript executable code:

  1. When JavaScript executes global code, the global code is compiled and the global execution context is created, and there is only one global execution context for the lifetime of the page.
  2. When a function is called, the code inside the function is compiled and the function execution context is created. Generally, the function execution context is destroyed when the function is finished.
  3. When the eval function is used, the eval code is also compiled and the execution context is created.

With these three cases of creating execution context in mind, let’s look at the call stack. We need to understand function calls and the stack structure before we can understand the call stack.

A function call

To call a function is to run a function, we use the following code:

var a = 2 
function add(){ 
    var b = 10 
    return a+b 
} 
add()
Copy the code

Before the add() function is executed, the JavaScript engine creates a global execution context for the above code, which contains declared functions and variables. You can see the following figure:

As you can see from the figure, both global variables and functions in the code are stored in the variable environment of the global context.

When the execution context is ready, the global code is executed. When it reaches add, JavaScript determines that this is a function call (calling the function produces the execution context) and does the following:

  • First, extract the add function code from the global execution context.
  • Second, compile the code for the Add function and create the execution context and executable code for the function.
  • Finally, execute the code and print the results.

Refer to the following figure for the complete process:

That is, there can be multiple execution contexts when executing JavaScript. How does the JavaScript engine manage these execution contexts?

The answer is today’s topic — call stack management

JavaScript call stack

The JavaScript engine uses the stack structure to manage the execution context. After the execution context is created, the JavaScript engine pushes the execution context onto the stack, which is often referred to as the execution context stack, or call stack. Let’s look at a slightly more complex example of code:

var a = 2 
function add(b,c){ 
    return b+c 
} 
function addAll(b,c){ 
    var d = 10 
    result = add(b,c) 
    returnA + result + d} addAll (3, 6)Copy the code

In the above code, you can see that it calls the add function in the addAll function. How does the call stack change during the execution of the code?

Let’s analyze step by step the state of the call stack during the execution of the code.

The first step is to create the global context and push it to the bottom of the stack. As shown below:

After the global execution context is pushed onto the call stack, the JavaScript engine starts executing the global code. The assignment of a=2 is performed first, which sets the value of a in the global context variable environment to 2. The state of the global context after setting is shown below:

Next, the second step is to call the addAll function. When the function is called, the JavaScript engine compiles the function, creates an execution context for it, and finally pushes the execution context of the function onto the stack, as shown below:

D =10; d=10; d=10; d=10

Then proceed to step 3. When the add function call statement is executed, the execution context is also created for it and pushed onto the call stack, as shown below:

When add returns, the execution context of the function is popped off the top of the stack and the value of result is set to the return value of add, which is 9. As shown below:

Immediately after addAll performs the last addition and returns, addAll’s execution context pops off the top of the stack, leaving only the global context in the call stack. The final picture is as follows:

At this point, the JavaScript process is complete.

Here highly recommend a little elder brother abroad website, can be very clear to show the call stack into the stack and the stack process, also can have closure process (tylermcginnis.com/javascript-…).

Well, that wraps up today’s javascript call stack, and in the next article we’ll look at lets and const