• How JavaScript Works🔥 🤖 [Visually Explained]
  • Original author: Narottam04
  • The Nuggets translation Project
  • Permanent link to this article: github.com/PassionPeng…
  • Translator: Hoarfroster

JavaScript may be one of the most popular languages in the world, but it’s also one of the most hated. We love her because she’s so useful — just by learning the basics of JavaScript, we can develop a full-stack application in no time. And of course a lot of people hate her because she’s… Sometimes not so obedient, the implementation is really some confusing and sad. If we do not fully understand the language, it is likely that we will dislike it 💔.

In this technical post, we’ll explain how the JavaScript that lives in the browser’s black box actually executes code. We will look at this process through animated gifs 😆. After reading this blog post, you will be one step closer to becoming a Rock Star developer 🎸😎.

Execution Context

“Everything in JavaScript happens in an execution context.”

I want you to remember this sentence, because it is so important. We can assume that this execution context is a big, big container that gets called when the browser wants to run some JavaScript code.

Within this container, there are two components. The first is the memory part and the second is the code part.

The memory portion is also commonly referred to as the variable environment, where variables and functions are stored as key pairs.

The code section is the place in the container responsible for executing the code line by line. Isn’t it cool that he has a fancy name, “Execution process”?

JavaScript is a synchronous, single-threaded language. This is because she can only execute one command in sequence at a time.

Code execution

Let’s take a look at some sample code:

var a = 2;
var b = 4;

var sum = a + b;

console.log(sum);
Copy the code

In this simple example, we initialize two variables A and b and assign them to 2 and 4, respectively.

Then we add a and b and store the result in the sum variable.

Let’s see how JavaScript executes this code in the browser 🤖 :

First, the browser creates a global execution context with memory and code sections.

After that, the browser executes the JavaScript code as follows:

1> Procedure for creating memory

2> Code execution steps

In the memory creation step, JavaScript scans all the code and allocates memory to all the variables and functions in the code. For variables, JavaScript stores undefined in this step for the initialized variable, while for functions, it keeps the entire function body code, as shown in the figure below:

Now we come to the second step, which is code execution. This will start reading the code line by line and executing it.

When var a = 2, she assigns 2 in memory to variable A, which is undefined until then.

And again, exactly the same thing would happen to B — she would assign 4 to B. Next, she computes and stores the sum of a and b, which is 6, in the sum variable. As a final step, she prints the obtained and sum variables in the console and destroys the global execution context after the code is fully executed.

How is a function called in an execution context?

Functions in JavaScript work differently than in other programming languages.

Let’s look at a simple example:

var n = 2;

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

var square2 = square(n);
var square4 = square(4);
Copy the code

The above code contains a function that takes a number and returns the square of the number.

As we execute code, JavaScript creates a global execution context and allocates memory for all variables and functions.

For functions, she throws the entire function into memory.

Now comes the most exciting step — JavaScript runs functions! First she creates a global execution context.

On the first line, we encounter the assignment variable var n = 2; We already know that she’s going to assign 2 to the n variable. Second line, function! When a function is allocated in memory, it jumps straight to line 6.

The square2 variable now performs the square function in its assignment. At this point, JavaScript creates a new execution context.

This execution context, in the case of the Square function, allocates memory to all variables in the function during the execution.

After allocating memory for all the variables in the function body, she immediately executes the code line by line. First we get the sum variable, which is 2, and then we compute ans. After the calculation, she returns the calculated value and then assigns the square2 variable.

As soon as the function returns a value, that is, after the calculation is complete, she destroys her execution context.

Now she repeats a similar process for the Square4 variable on line 7, as shown below:

Once all code has been executed, the global execution context is also destroyed. That’s how JavaScript executes code behind the scenes!

The call stack

In JavaScript, when a function is called, JavaScript creates an execution context. When we nested function values, the execution context became complicated.

JavaScript itself is responsible for the creation and destruction of all code execution contexts, thanks to the call stack.

A stack, sometimes called a push-down stack, is an ordered collection of storage items. In the case of a stack, adding and removing always happen at the same end (rather than at both ends), like a stack of books, from which books can only be pulled or placed… (Generally speaking)

The call stack is a method tool for recording the positions of functions in a script.

Let’s look at an example:

function a() {
    function insideA() {
        return true;
    }
    insideA();
}
a();
Copy the code

We create function A, one that then calls another function called insideA and returns true. I know this code is useless and won’t do anything, but it will help us understand how JavaScript handles callbacks.

JavaScript creates a global execution context and then allocates memory to function A and insideA at the code execution step.

An execution context is created specifically for function A, that is, it is placed on top of the global context of the call stack.

Function A allocates memory, executes the function insideA, and puts it on top of function A.

The insideA function now returns true and is removed from the call stack.

Since function A also has no code left to execute, function A is also removed from the call stack.

Finally, the global execution context is also removed from the call stack.

The resources

  • Namaste JavaScript Playlist on YouTube

I hope this tweet contains knowledge! 💪🏾 If you have any questions, please feel free to ask me.

For more information, check out my blog site blog.webdrip.in

If you find any mistakes in your translation or other areas that need to be improved, you are welcome to the Nuggets Translation Program to revise and PR your translation, and you can also get the corresponding reward points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.