How Does Javascript Work Under The Hood?

How Does Javascript Work Under The Hood?

Let’s discuss how the “console.log(”hello world”)” code is executed by JavaScript. We know that in JavaScript, this code is interpreted to machine code for execution. But how?

Firstly, What is the difference between a language like C and a language like JavaScript?

C is a compiled language, which means, the entire source program written in C is compiled into 0’s and 1’s (machine code) before the execution of the program.

That’s not the case with javascript. It doesn't compile the entire code into machine code before executions. It interprets the source code line by line during the runtime execution.

What executes the Javascript code?

It's JS ENGINE.

The JavaScript engine is a software component that executes the JavaScript code.

In the early days, JS engines were just simple interpreters that often relied solely on interpreting the source code directly, but modern JS engines are not just interpreters. they are also responsible for code optimizations. Modern JS engines introduced Just In Time Compilation. Instead of purely interpreting the entire source code, modern engines like V8 use a combination of interpretation and compilation.

Various JS Engines are designed specifically for different browsers.

The majority of these engines are written in robust languages of C and C++.

While their implementations may vary internally, these engines share a common goal—they execute JavaScript code efficiently.

Some popular JavaScript engines on the browsers are:

“SpiderMonkey” serves as the JS engine for the Mozilla Browser. It holds a place for being the first JS engine and also it’s built by the inventor of the javascript himself.

“V8” takes the spotlight as the JS engine built for the Chrome Browser. It’s an extremely fast engine and can run as a standalone engine outside of the browser. The NodeJS runtime uses the V8 Engine. This led to the adoption of using JavaScript on server-side applications.

“JavaScriptCore” is the engine that powers the Safari Browser. JavaScriptCore plays a crucial role in delivering an efficient browsing experience to Apple users.

Let’s see how the javascript code is executed in the V8 engine.

The first step in the execution is parsing. In this step, it checks syntax errors in the source code, if there is some error, the execution stops and sends back the error.

If there is no error, the source code is converted into an Abstract Syntax Tree (AST). AST represents the code in a tree structure, enabling the engine to understand the logical structure and is always created from the syntactically valid code.

https://astexplorer.net/ Check out this website to see the AST of your javascript code.

After the AST is generated, the v8 translates the AST into machine code. The V8 uses a combination of two compilers: The Ignition Interpreter and the TurboFan optimizing compiler.

Ignition Interpreter: Ignition is a lightweight interpreter designed for faster execution of the code. The interpreter converts the AST into byte code. Byte code is a low-level representation of the code that is similar to machine code.

Optimizing Compiler: Now the optimizing compiler takes the bytecode produced by the interpreter and generates an optimized machine code. The byte code is then optimized by applying various optimization techniques and produces more efficient code.

With the generated machine code, the V8 proceeds to execute the javascript program in the CPU.