I recently started a series aimed at teaching web developers how JavaScript works and the various components that make the process of compiling and running code in JavaScript fast and simple.
The first article in this series was an overview of JavaScript engines, call stacks, and runtime environments. Part 2 of this JavaScript tutorial series focuses on the internals of the JavaScript engine and reveals why JavaScript is no longer an interpreted programming language.
In case you missed it or need a refresher, be sure to read the first part of the series, How JavaScript Works Behind the Scenes.
What is a JavaScript engine
A JavaScript engine is the program responsible for executing JavaScript code. All modern browsers come with their own version of his JavaScript engine, but the most popular is Google’s V8 engine of him. Google’s V8 engine supports not only Node.js, but also the Google Chrome browser. Node.js is a JavaScript runtime used to build server-side applications outside the browser.
Below is a list of different JavaScript engines for each of the major internet browsers.
- V8 – An open-source JavaScript engine developed by Google for Chrome
- spider monkey – JavaScript engine that powers Mozilla Firefox
- JavaScript core – An open-source JavaScript engine developed by Apple for Safari
- rhino – An open-source JavaScript engine for FireFox maintained by the Mozilla Foundation
- chakra – JavaScript engine for Microsoft Edge
- jerry script – A JavaScript engine for the Internet of Things (IoT).
Now that you know what a JavaScript engine is, you can take a deeper look inside and learn about the various components of JavaScript. In the next section, we’ll look at the engine behind it and how it compiles JavaScript code into machine code so that it can be executed.
read: Top 10 AngularJS Alternatives
How does JavaScript compilation and interpretation work?
First, let’s understand the difference between a compiler and an interpreter. As web developers may know, computers only understand 0’s and 1’s (think of them as simple on/off switches). Therefore, all computer programs must eventually be translated into machine code. This task is performed using a process called compilation or interpretation. The following sections describe each of these processes.
What is compilation in programming
At compile time, the entire source code is converted into machine code at once. Machine code is written in portable files that can be run anywhere, regardless of platform or operating system. The code compilation process involves two steps. The first step builds the machine code and the second step runs it on your machine.
Machine code execution occurs immediately after compilation. For example, all the applications you use on your computer today were originally compiled and ready to run on your computer.
read: Overview of garbage collection in JavaScript
What is Interpretation in Programming?
On the other hand, during interpretation, the interpreter executes the source code, executing it line by line. Unlike compilation, which is a two-step process, interpretation involves reading and executing code. at the same timeOf course, the source code must be translated into machine language, but the translation of the code does not happen ahead of time, but just before execution.
What is just-in-time compilation?
JavaScript is a purely interpreted language. However, the problem with interpreted languages is that interpreted programming languages have much slower performance compared to compiled languages. This is a problem for modern applications that require fast processing and high performance. Imagine you’re playing an online game in your browser and moving a cube through the tiles takes seconds to reach the endpoint. Is such delay acceptable?
Many people still refer to JavaScript as an interpreted programming language, but that is no longer the case. Current JavaScript engines use the concept of both compilation and interpretation at the same time. Just-in-time (JIT) compile.
In this approach, the entire source code is compiled into machine language at once and then executed.still contains two steps Beforehand It compiles, but there is no portable file to run. This is much faster than running code line-by-line, making it the perfect solution for today’s fast-performance web applications. This inclusion of JIT compilation is why JavaScript is technically no longer an interpreted programming language.
How does just-in-time compilation (JIT) work?
So how does the JavaScript Just-in-Time compiler work? When a new piece of JavaScript code enters the JavaScript engine, the first step taken is parsing the code. During this process the code is parsed into a data structure called Abstract Syntax Tree (AST).
The abstract syntax tree first splits each line of code into meaningful pieces for JavaScript. let me, staticAlso function keyword. Then save these codes in a tree-like structure. The next step is to check for syntax errors and if none are found, use the resulting tree to generate machine code.
Now let’s look at a simple example of JIT in action. The following JavaScript code snippet declares a variable on the left and has its AST equivalent on the right.
here, constant named variable value given value 45As you can see on the .AST tree side, there is a lot of additional code beyond the declaration. Can you imagine all the extra code generated in a large application?
The next step is to compile the generated AST into machine code. This machine code is then executed. This is how modern JavaScript uses just-in-time compilation. Note that the machine code execution process happens in the JavaScript engine’s call stack.
So far so good. At this point the code is running and the process is finished. Not so fast – JavaScript has some code optimization strategies to implement. First, JavaScript creates very unoptimized machine code to make scripts run as fast as possible. Then, in the background, this unoptimized code is recompiled and optimized while the current code is running. This is done most of the time, after each cycle of optimization swapping unoptimized code for more optimized code without stopping execution. This is why the JavaScript engine works so fast.
The code optimization process is done in a special thread separate from the main thread. JavaScript developers do not have access to code optimization algorithms from their source code. Different engines implement the strategy in different ways, but in a nutshell, this is how modern JavaScript just-in-time compilation works.
read: HTML, CSS and JavaScript tools and libraries
