A brief explanation of the JavaScript Engine.
We launched a series a few days ago aiming at delving further into JavaScript and how it works: we figured that by understanding the basic parts of JavaScript and how they interact, you’d be able to produce better code and apps.
The first instalment of this series focused on an overview of the engine, runtime, and call stack. The focus of the second piece will be on the internal workings of the JavaScript engine. We’ll also learn why JavaScript is no longer an interpretable language in this post.
What is JavaScript Engine?
In other words, a JavaScript engine is computer software that runs JavaScript code. There are several phases required in doing so, but an engine effectively executes JavaScript code. Every browser now has its own JavaScript engine, but Google’s V8 is the most well-known. The V8 engine runs not only Google Chrome, but also Node.js, the JavaScript Runtime we discussed in the last article, which allows us to create server-side JavaScript applications outside of any browser. Anyway, it’s very simple to comprehend what an engine is, but the most difficult aspect is to comprehend its composition and operation.
The Engine consists of two main components:
* Memory Heap — this is where the memory allocation happens
* Call Stack — this is where your stack frames are as your code executes
Memory Heap & Call Stack
A Call Stack and a Heap are always present in any JavaScript engine. Our code is actually performed using execution contexts in the Call Stack. The heap, on the other hand, is an unstructured memory pool where all of the objects that our programme need are stored. So, with this peek at the engine, we’ve figured out where our code gets run. However, the challenge now is how the code is compiled to machine code so that it can be executed. So, let’s see what we can find out.
Compilation & Interpretation
First, let’s take a brief computer detour and discuss the distinction between compilation and interpretation. We already know that the computer’s processor can only handle 0s and 1s. As a result, every computer programme must eventually be turned into machine code, which can be accomplished by compilation or interpretation.
Compilation
Compilation converts the full source code into machine code at once. After that, the machine code is saved as a portable file that may be run on any computer. So there are two steps to this. Machine code is created first, and then it is executed in the CPU, or processor. And the execution can take place after the compilation has been completed. For example, any application you are using right now on your computer was previously compiled, and you are currently executing it after it was compiled.
Interpretation
In Interpretation, on the other hand, an interpreter runs through the source code and executes it line by line. As a result, the two steps are not the same as before. Rather, the code is read and executed simultaneously. Of course, the source code must still be transformed into machine code, but this occurs just before it is executed rather than beforehand.
Just-In-Time Compilation
JavaScript used to be fully interpreted, however, interpreted languages are substantially slower than compiled languages. Low performance used to be OK with JavaScript, but it is no longer acceptable with current JavaScript and fully-fledged online applications that we build and use today. Consider this scenario: you’re using Google Maps in your browser and you’re dragging the map, which takes one second to move each time you drag. Isn’t that unacceptably unacceptably unacceptably unacceptably unacceptably
Many people still believe that JavaScript is an interpreted language, but this is no longer the case. Instead of straightforward interpretation, the Modern JavaScript engine now employs a hybrid approach that combines compilation and interpretation, known as Just-in-Time (JIT) compilation.
This method essentially compiles all of the code into machine code at the same time and then executes it immediately. So we’ll have two steps of ordinary compilation ahead of time, but no portable file to run. And the compilation is immediately followed by the execution. And this is ideal for JavaScript because it is much faster than executing code line by line. And now we know that JavaScript is no longer an interpreted language.
COMPILATION OF JAVASCRIPT JUST-IN-TIME IN THE MODERN WORLD
As a result, when a piece of JavaScript code is entered into the engine. The first step is to parse the code, which is a fancy way of saying “read the code.” The code is processed into a data structure called the Abstract Syntax Tree during the parsing process (AST). This works by breaking each line of code into components that are meaningful to the language, such as const or function keywords, and then saving all of these pieces in a structured manner into the tree. This stage also checks for syntax mistakes, and the resulting tree will be used to build machine code later on.
Let’s pretend we have a very basic programme. In the example, all it does is define a variable, and on the right-hand side, it seems like an AST for only one line of code. So we have a variable declaration with the name “a” and the value “23” that should be constant. Aside from that, as you can see, there is a lot of stuff here. Imagine how it would look in a large-scale real-world application.
The following stage is a compilation, which takes the created AST and converts it to machine code, as we saw earlier in this article. Because Modern JavaScript uses Just-in-Time compilation, this machine code is immediately executed. Remember that execution takes place in the Call Stack of the JavaScript engine. In the upcoming article, we’ll delve deeper into this topic.
So far, everything has gone well. We’ve got our code up and running, so we can wrap things up here. Right? Not so fast, because modern JavaScript engines employ some ingenious optimization techniques. They begin by creating a very unoptimized version of machine code in order for it to begin executing as quickly as feasible. The code is then optimised and recompiled in the background while the programme is already running. Most of the time, and after each optimization, this can be done. Without ever pausing execution, the unoptimized code is simply swept for the new, more optimised code. And it’s because of this process that modern engines like the V8 are so quick.
And all of this parsing, compilation, and optimization takes place on the engine’s special threads, which we can’t access from our code. So, separate from the main thread, which is really executing our code through the call stack. Different engines implement Modern Just-in-Time Compilation for JavaScript in slightly different ways, but in a nutshell, here is how it works. When someone tells you that JavaScript is an interpretable language, simply show them this article so they can understand how it works.
So, we spent a lot of time looking at the JavaScript Engine and how it operates behind the scenes. I hope the information in this article has helped you better grasp the JavaScript Engine. Let’s call it a day for now. The next post will focus on the JavaScript Runtime as well as other critical components. So, if you want to keep up with this series, you may follow me on Twitter or Medium.
I recommend taking Jonas Schmedtmann’s JavaScript course. I’ve included a link to the greatest JavaScript course below.
https://www.udemy.com/share/[email protected]_HPaIcxhsmXJcvwnk7eNy_HNeIr2/
