This post is divided into 2 parts

1. What about the javascript V8 Engine? 👈 You are here
2. Inside the javascript V8 Engine (Waiting to be published)

   ---

From the '90s to 2020s' browser went from seed to plant and now they are trees and we have no clue where it will go next. There was a time when the browser was just meant for little surfing and browsing. Look at it now, you can play games, you can run 3D renders(https://theoneplusworld.com/), you can even edit documents(Google Docs) and the possibilities are endless. We have literally replaced most of are installed application with a browser compatible ones and with the set of extensions available at our disposal we are more productive than ever

But what made this transition so smooth, in the end, it was just javascript which is still single-threaded.

So let's deep dive and have a look at the javascript engine, some awesome facts, and much more.

Javascript Engine ⚙️

We already know that javascript is a single-threaded application and it uses a callback apart from that we also know that javascript is an interpreted language as well.

But what the hell is interpreted language mean?

Let's understand better with a code

const iAmDeveloper=true;

How does the computer read this, technically speaking computer really can't understand the meaning of the above code so if you just throw a javascript file to the CPU it might go crazy as it won't understand a thing?
Since a computer can only understand 1's and 0's.

So to make a computer understand our javascript file, the developer introduced a Javascript engine. Javascript Engine will understand the file and will tell the computer what to do.

So for a layman engine is nothing but a translator that helps the CPU understand what basically the code is all about and this special engine understand javascript and hence the javascript engine.
Here is the list of all the javascript engine.

Did someone say EcmaScript Engine? will have a look at it in the latter part of this post.

All the above engines are written by some of the other developers but what is the need to write these engines when there is some other engine already available?

To answer the above question lets open a google map on our browser, did you notice anything maps are so fast and snappy, you can easily hover the map, zoom in or zoom out, scroll the areas, ask for directions, and whatnot. From the developer's eye, this process is heavy and require a decent amount of power-optimized code, all the engine that exists already would make google maps very slow so google has to write there own engine to optimize their maps and run them much faster. So Google decided to build their own browser and they decided to write their own engine which is none other than the V8 engine which was released in 2008.

Fun Fact 1: First javascript engine named spider monkey was created by Brandon Eich who is also the creator of javascript. This engine is also known for running the firefox browser👏👏.

Inside the Engine📦

Our Understanding So Far...

1. We know that Javascript Engine takes JS file and convert it to machine-readable code
2. We can also see that there are many javascript engines made by a different developer and one of them is the V8 Engine
3. In the end engine is nothing but a program and anyone can write the engine. V8 Engine is written in c++

let's see what is happening inside this engine.

Inside the engine, a JS file is passed to the engine and is executed at different steps.

Let's have a look at these steps one by one

1. Parser -: This is the very first step, which is also known as lexical analysis. Parser breaks the code into small pieces which are known as tokens. This helps to identify what the code is actually trying to do.

2. AST(Abstract Syntax Tree) -: The tokens generated in step one are formed into a tree-like structure known as AST.There is a fun tool to visualize the AST astexplorer.net.

3. Interpreter -: Once the AST is formed it goes into the interpreter and to 4. A compiler that spits out a machine-readable code that gets understand by the CPU.

Let's try to create our own engine to better understand the interpreter and compiler.

function myEngine(code){
return code.split(/\s+/)
}

myengine('var a = 1')

//['var','a','=','5']

So we created our own engine, which can understand the code. This is a very layman engine and there are many more complexities involved in the process. But in the end, the real V8 engine is doing something like this but at a much granular and advanced level using C++.

So, can we say that anybody can create the javascript engine?

Yes, but we already saw a list of JS engines which are known as ECMAScript engines. Imagine everybody creating their own javascript engine(well I can smell some chaos there). To prevent chaos ECMA (the governing body of javascript) was created which set some predefined standards on how things should work in javascript.

This is the reason it is called the ECMAScript engine, not a javascript engine because anyone can create a javascript engine just like we did above but to include your JS engine into the ECMAScript engine you need to follow certain guidelines.

Fun Fact 2 🧐

• Chakra: Javascript engine used in Edge
• V8: Javascript engine used in Chrome.
• Carakan: Javascript engine used in Opera.
• SpiderMonkey: Javascript engine used in Mozilla Firefox.

So now you know why things don't really work with the internet explorer(Pun intended😂 )

So google one of the tech giants really work on its own engine V8 round the clock to make it faster than before, so that more and more people can use their services and application.

Interpreter and Compiler

So we know that the interpreter and compiler are one of the most important parts of the JS engine. Technically the concept of interpreter and compiler is not limited to just Javascript but can also be seen in other languages like python, JAVA, etc.

Interpreter

In the interpreter, the file is translated and read line by line on the fly.

Let's say we have the following code

function someAddition(a,b){ //line 1
return x + y //line 2
}//line 3

for(let i=0;i<100;i++){ //line 4
someAddition(5,4) //line 5
}//line 6

In the above code, we are just looping thru a function 100 times and returning our result.The output will be

/*
9
9
9
.
.
.
9
*/

So, if we give the above code JS file to the interpreter, the translation will happen line by line on the fly. In the above code, the interpreter will read from line 1 to line 3 and will mark that as a function. And will go to the next part from line 4 to line 6 and will start looping the function that it encountered from line 1 to line 3(someAddition)

We can say that interpreting code simple means taking a set of instructions and returning an answer and doing something. Initially, that's how javascript works it is interpreting using some sets of instruction.

So how does a compiler works?

Unlike interpreter compiler doesn't translate on the fly, what it does is compiles down to create a translation or language about what code actually does. The compiled version of our code is used by the machine to understand the actual code at the machine level.

if we pass the same code to the compiler, instead of reading line by line it will read everything at 1 pass. Technically it will take the program in javascript or any other language and compiles down to a new language mainly machine code.

So basically every language is compiled and interpreted and there are a lot of layers that are involved. We have to keep one thing in mind that there are 2 ways to run javascript using an interpreter or compiler.
Why do you think there is a need for an interpreter or compiler both? is it possible that the interpreter is better than the compiler or vice versa? Well, we will find out that in the next part of this blog, till then stay tuned

Fun Fact 3🧐
Have you heard of Babel or typescript?
Babel is a Javascript compiler that takes your modern JS code and returns browser compatible JS (older JS code). Typescript is a superset of Javascript that compiles down to Javascript.

Icons made by Flat Icons from www.flaticon.com