Demystification of JavaScript Code processing using V8 as the targeted engine 🔬
Tags: javascript, webdev, programming, tutorial
Published: 2023-02-01 20:25:36

So, we will be looking at how your JavaScript code gets processed. From you **writing your Js code** to the **computer understanding it** and **doing what you asked** 💻.  

> It's all about bringing you closer to the system 🔎.

## Phase 1: Coding Js
You write your Js code e.g:
```javascript
 function checkIsAValidObject(obj){
    return typeof obj == "object" && !Array.isArray(obj)
  }
```

## Phase 2: Host env setup
You take your code to a JavaScript host-env e.g Browser/Node. The host will do what we call the "initial time branch", during the initial time branching it gets the required components required to run your JavaScript code e.g core V8 engine, APIs(e.g DOM API, libuv API).

## Phase 3: Compilation
+ Your JavaScript code gets compiled to **AST(Abstraction Syntax Tree)**. Its a format that Our ISA(Instruction Set Architecture) machine/engine can process, the idea is similar to when you want to use **Theo-design-token-engine** to compile from one **style-model** to another e.g from **CSS** to **XML styles**, it means you must write in a model that **theo** understand. Here is a link if you wish to see the AST in action:[Click me](https://astexplorer.net/)

###Sample of Js code to AST
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/m8xpuhyxpeqh8eeclhay.jpg)

+ After your code is converted to AST, the next thing is the hoisting of expressions and statements.


## Phase 4: Generation of Executable Bytecode from the AST code
At this stage, the JavaScript engine takes the **AST code** and generates a **bytecode** following an Instruction Set Architecture. For the v8 engine, we make use of **ARMV8** which is a framework(i call it a framework because it's focused on specific machines and specific instruction architecture type) that implements a **reduced instruction set**. These executable bytes are instructions(see it as a language) that the CPU understands and decodes. **Note**, the CPU **CAN NOT** execute this instruction (they are usually in hexadecimal format 0-f), what the CPU does is pull the our instruction from the memory and decode it to 0-1(which is the language the CPU understand). So, have it at the back of your mind that the CPU can not understand either reduced or complicated instructions until the CPU has decoded/translated it into a machine-code of 0-1.

### To generate an executable bytecode for a Js code
I will be sampling with macOS:

`brew install v8`
`run: d8 --print-bytecode your-js-file-absolute-path.js`

###Sample of how to generate an executable bytecode for a Js code

######The Js code
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/gy7tygc07hwlbtomavhs.jpg)

######Install v8
![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e4xaio4u1gu8lx2uw390.jpg)

######Generate the bytecode

![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zjh20b6siercoov6mv71.jpg)

## Phase 5: Interpretation and Execution
This is the stage we all have been waiting for. This is what distinguishes a compiled language and an interpretable language. When you hear an interpretable language, it doesn't mean your program doesn't get compiled to instruction, but rather it means you write your program, send it to your language runtime and the language engine does the compilation for you at the point of execution. On the other hand, a compiled language needs to be compiled to an instruction and then sent to a machine that needs it(e.g sending a Java Jar executable to run on android Os).

At this stage, The JavaScript engine executes the executable file by running each instruction line by line e.g it sends an instruction that says **_create a primitive variable called name and assign it a value "Emmanuel"_**. The computer will execute the instruction which in simple terms means telling the computer to do what you want(i can write a detailed article on how the modern computers are architected to process instructions. Feel free to comment in the section below if the article would be useful to you).

## Phase 6: Hot Optimization stage
This stage is more of optimization, caching of frequently used bytecode. The Js engine will store the result of frequently interpreted `bytecode` so the computer doesn't need to reprocess it.

# Summary
+ You write Js code
+ The JavaScript engine turns your Js code to bytecode Instructions(0-f)
+ The Computer CPU(Usually the Control Unit) turns the bytecode instructions to machine code(0-1)
+ Then the computer executes the machine code
+ Then you get the result of the execution