JS Engine EXPOSED 🔥 Google's V8 Architecture 🚀

In this blog, we are going to learn about JS Engine and how amazing stuff it does for us in the background but before that, we need to learn a little bit about JRE(Javascript runtime environment). So JRE is an environment where you have everything to run javascript code which includes js engine, call back queue, event loop and many other external APIs. We need to understand that javascript does not run only on browsers but also on different devices like maybe your watch, robots, water purifiers etc. And for that, all they need is their javascript runtime also do you that node is also an open-source, cross-platform JavaScript runtime environment which has everything that is needed to run a javascript piece of code js engine is the heart of javascript runtime environment.

JS ENGINE: Now before moving into the architecture of javascript let's see the list of the best available js engines.

V8: Developed by Google, V8 is a high-performance JavaScript engine used in Google Chrome and Node.js.

SpiderMonkey: Developed by Mozilla, SpiderMonkey is a fast and powerful JavaScript engine used in Firefox.

JavaScriptCore: Developed by Apple, JavaScriptCore is a fast and lightweight JavaScript engine used in Safari and WebKit.

Chakra: Developed by Microsoft, Chakra is a high-performance JavaScript engine used in Microsoft Edge.

Nashorn: Developed by Oracle, Nashorn is a lightweight and high-performance JavaScript engine used in the Java Virtual Machine (JVM).

Spidermonkey was the first javascript engine which was created by Brendan Eich who is the creator of javascript also we can even create our own js engine but it has to follow all the ECMA script standards. Also, we need to understand that the js engine is not a machine or hardware it's just a piece of code that is written in low-level languages.

Now Javascript engine takes our humanly readable code and processes it in these three steps which are Parsing Compilation and Execution.

Parsing: During the first step of parsing our code will be converted into tokens which are also known as AST (abstract syntax tree). Let's see an example of how this tree looks for a single line of code.

// For this one line of code will see the AST 
const today = "Do better Hope better Live better rest will be fine";

// Here we go no need to sleep this is just to get idea
// https://astexplorer.net/ play with your code with this incredible // website
{
  "type": "Program",
  "start": 0,
  "end": 68,
  "body": [
    {
      "type": "VariableDeclaration",
      "start": 0,
      "end": 68,
      "declarations": [
        {
          "type": "VariableDeclarator",
          "start": 6,
          "end": 67,
          "id": {
            "type": "Identifier",
            "start": 6,
            "end": 11,
            "name": "today"
          },
          "init": {
            "type": "Literal",
            "start": 14,
            "end": 67,
            "value": "Do better Hope better Live better rest will be fine",
            "raw": "\"Do better Hope better Live better rest will be fine\""
          }
        }
      ],
      "kind": "const"
    }
  ],
  "sourceType": "module"
}

Now as soon as the js engine has an abstract syntax tree then it will move to the compilation and execution part of the code but before we understand that we need to understand one thing what is the JIT compilation.

JIT compilation: Now to understand this also need to understand what interpreter and compiler are javascript is the interpreter language or its compiler language. So when javascript was created it was interpreter language means the js engine execute code line by line don't know what the next line code will be this way the execution of code became fast but at the same time if the js engine is a compiler then it will compile the entire code first and optimize It then only execution of code happens. So with an interpreter, we have more speed whereas with a compiler we have more efficiency so both have their pros and cons. So here the JIT compilation comes into the picture and most of the current js engines used were at the time of code execution js engine tries to compile the code as much as it can and this way code execution becomes fast and efficient at the same time. Nowadays some js engines use something called AOT (Ahead of time compilation) where a js engine takes a piece of code and compiles it before execution.

Now after execution, we have a few other things that are present in the js engine like a memory heap(Where all the variables and functions get stored) and call stack(You are the master of it so no explanation) also we have a garbage collector which is used to free up the memory whenever it is not used and use mark and sweep algorithm.

Now that all about js engines now at this time one of the best JS Engines available is V8 which is used in google chrome node.js and deno.Let's see the v8 architecture

Ignition Interpreter: The Ignition interpreter is the first part of the V8 JavaScript engine that is executed when a script is loaded. It is responsible for parsing and executing the JavaScript code.

TurboFan Compiler: Once the Ignition interpreter has generated bytecode, the TurboFan compiler optimizes the code for better performance. The TurboFan compiler uses just-in-time (JIT) compilation to generate machine code that can be executed directly by the computer's processor.

Execution: Finally, the optimized machine code is executed by the V8 runtime system, which manages memory and garbage collection.

The combination of the Ignition interpreter and the TurboFan compiler allows the V8 engine to execute JavaScript code much faster than traditionally interpreted engines. The Ignition interpreter quickly generates bytecode to execute the code, while the TurboFan compiler optimizes the performance of the code by generating optimized machine code. This approach allows the V8 engine to balance speed and efficiency, making it a popular choice for high-performance JavaScript execution in environments like Google Chrome and Node.js.

That's all about JS Engine EXPOSED 🔥 Google's V8 Architecture. And thanks to Akshay Saini for creating an incredible Namaste Javascript playlist this blog is just whatever learning I had from there.