How Javascript works

Original: https://javascript.plainenglish.io/how-javascript-works-a-visual-guide-515199eef837

This blog shows the execution process of js in the form of animation, which is very helpful to understand how js works. In this translation, the original translation will be deleted, some nonsense will be removed, and the core explanation part will be directly translated. In addition, the level is limited. If there is something wrong with the translation, please correct me!

Execution context

Everythig in Javascript happens inside an Execution Context

Some of Javascript happens in the execution context.

I hope everyone can remember this sentence, because it is very important! You can assume that the execution context is a large container, which is called when the browser wants to run js code. There are two components in this container:

1. Memory components
2. Code component

Memory components

The memory component is also called variable environment. In the memory component, variables and functions are stored in the form of key-value pair

Code component

In the code component, the code will be executed line by line. The code component also has an alias called execution thread

JavaScript is a synchronous single-threaded language. Because it can only execute one command in a specific order at a time.

Code execution

var a = 2;
var b = 4;

var sum = a + b;

console.log(sum);

In this code, two variables a and b are initialized, and then the added value of a and b is assigned to the variable sum. Let's take a look at how this code is executed.

The browser creates a global execution context, which contains the memory components and code components just mentioned above. The browser will run this code in two stages.

1. Memory creation phase
2. Code execution phase

Memory creation phase

In the memory creation phase, js scans all codes and allocates memory for variables and functions. For variables, they will be stored as undefined during the variable creation phase. As for the function, js will retain the entire function code, which will be mentioned in the following example.

Code execution phase

In the code execution stage, js will traverse all the code line by line. In memory, the value of a is always undefined until a is allocated as 2. The same is true for b. Then js will add the value 6 of a and b to the memory. Then print the sum value, and finally destroy the global execution context.

How is the function called in the execution context

Functions in js work differently from functions in other programming languages. Give a chestnut 🌰

var n = 2;

function square(num) {
 var ans = num * num;
 return ans;
}

var square2 = square(n);
var square4 = square(4);

The above function square takes a parameter num and returns the square of num.

In the memory creation phase, js creates a global execution context and allocates memory to variables and functions. The function will be stored entirely in memory.

In the code execution stage, js assigns a value of 2 to the variable a, and then encounters a function. At this time, the function has allocated memory and will directly jump to line 6. When the function square is run, js will be created in the global execution context. A new execution context.

In the new execution context, it will go through the two stages mentioned above. In the memory creation phase of the new execution context, memory is allocated to num and ans.

After the allocation is completed, the code execution phase starts, and the value 2 of n at this time is allocated to num, and then the value is allocated to ans after the square is calculated, and then the value is returned, and then allocated to square2. After the function returns, it will immediately destroy its execution context.

Then process square4 in the same way.

After all the code is executed, the global execution context is destroyed.

Call stack

When calling a function in js, js will create an execution context. When the function is nested, the execution context will become very complicated. js manages the creation and deletion of execution contexts through the call stack

Stack

The stack is an ordered collection of items, which can only be inserted and deleted at one end. Similar to a pile of books.

function a() {
    function insideA() {
        return true;
    }
    insideA();
}
a();

In the above code, a function a is created, and a function insadeA that returns true is called in the a function. Let's analyze the running process of this code below

1. js creates a global execution context, and then allocates memory to function a in two stages, and then executes the code to call function a.
2. After the function is called, a new execution context (second) is created, and this new execution context is placed above the global execution context.
3. The code that executes the second execution context is to call the function insideA
4. Then create a new execution context (third), place it on second, then allocate memory, and execute the code to return true;
5. Begin to destroy the third, second, and global execution contexts in turn.

finally

Recently I am going to translate an article every week. The article has been put into github . If there are students who are willing to join the translation, please contact me.