How does JavaScript Engine work? And Execute?

The engine is simply a translator Just like we can interact with somebody who doesn’t know our language. And this special translator is called the engine to understands what they mean. Almost everyone that has worked with Javascript has to stimulate with the V8 engine. The shape of the JS engine. And most people know that Javascript is a single-threaded language. That is using a callback queue. we also hear phrases like JS is an interpreted language. So why we quite discover the whole of this? We can just write code without knowing each of these principles and we’ll be nice. If we understand how the engine operates underneath the hood we can design more optimized code. Code that compiler understands easily and run it quicker than our usual code.

Why need Javascript Engine?

Think if we open the computer and create a dot.js file also wrote some code for the display name. let’s say

const name = "Thor";

We just wrote some Javascript code. Assigning the “Thor” string to the name variable. Now the computer will understand this? No, the computer would have no sense whatever we quite write. The computer simply understands ones and zeros at the end of the day. So the computer doesn’t really identify what Javascript is. So how we able to talk useing a Javascript file so that the computer displays our name. This time comes to the picture engine. It helps us to give the machine dot.js extension file. And this machine is going to understand this file and tell the computer what to do. To display a Name. There are so many javascript engines that exist for example V8 engine, Spider monkey, KJS, etc. So anytime we use an engine we’re able to give it to a javascript file and this Javascript file gets understood by the engine and it allows this engine to communicate, and tell the machine the computer to do. what we ask it to do with Javascript. Presently, those engines are written by programmers, for example, the V8 engine is composed in C++. But why do programmers write these engines? 2008 marked a really pivotal moment in history when it comes to JavaScript. because Google released a V8 before then, Most browsers used engines that were very basic which meant that JavaScript was a little bit slow. Google had this problem. They had something called Google Maps and Google Maps as we know requires a lot of power. It does a lot of things we can ask for directions to zoom in and zoom out maybe even use Street View. And all the previous engines before it would make Google maps very very slow on the browser. And Google because they’re a search engine. They want everybody to use their search engine and they built a browser for them to control more of the market. So with Google Maps and their own Chrome browser, they said we’re going to write our own JavaScript engine. the V8 engine so that JavaScript runs way faster on the browser than it’s done previously in 2008 they released V8. But the big takeaway for us here is that really really smart people work on these engines so that our javascript runs as fast as possible on the browser on the server or any type of computer. So every day javascript gets faster and faster for us.

How it Process

  • Lexical analysis.
  • AST (Abstract Syntax Tree).
  • Interpreter and Compiler.

Lexical analysis

Which breaks the code into something tokens to identify their meaning. So that we know what the code is trying to do. In simple it converts our source code into a set of tokens. okay, Now we need to know what a is token? A token is a sequence of characters and it is verified by a set of patterns.

AST (Abstract Syntax Tree)

When the lexical analysis is done and these tokens are formed into what we call AST. So we pass the code that is we try and figure out how the text is divided up based on keyboards from javascript and it gets formed into this tree-like structure called abstract syntax tree. And this is a fun little tool online that you can use to demo this if we go to https://astexplorer.net/.I’ll show you how this abstract syntax tree looks like and you have a bit of code here. And as you can see you can look at it in Jason format or he can use it The tree and it breaks down the program into different things that are happening And although this may look like gibberish right now to you this allows the engine to understand what’s going on in the program or at least break things down one by one.

Interpreter and Compiler,

With Interpreters, we can read code line by line on the housefly. Interpreting code just taking a collection of directions and producing something with that code. also delivering a response.

Suppose you know two languages — Hindi and English. Now some friend of yours, knows only English and there is a nice book written in Hindi which she, unfortunately, can’t read, but desperately wants to ….

So she comes for your help…

Now you have two options -

  1. Read one line, translate it for her from Hindi to English. Read next line, translate, tell her English version of that line …And so on …
  2. Read the entire book and save the translated version in English, like a book. And give her that translated English version book.

Here the first method is an interpreter and the second is the compiler. The interpreter does line by line translation from source to the target language and does immediate execution .it does not store translated code.

In the compiler translated code is stored as ready to run code and so some memory is needed to store it. But the benefit of a compiler is, you don’t need it for translation each time you want the “same” source code translated, unlike the interpreter. ref: quora

Which one is the best interpreter or compiler?

They both have their prosing and tricks compiler clearly takes a little bit longer to get up and operating but the code is going to eventually run faster. Other side interpreter gets up and running fast but unfortunately doesn’t do any optimizations. So considering the compiler is better the interpreter. But there a way that we can get the best of both worlds and this is what some engineers came up with JIT compiler. Just in time means a system of manufacturing that makes and delivers what is needed, when is needed, and in the quantity needed. Just in time will help you to have the shortest production and delivery lead times.

Final Executing Output

Javascript is reading our code and executing it. First, we need a place to store and write information that is to store our variable array or objects. Then a place to actually run and keep track of what’s happening line by line on our code. Well, this uses call stack.

Memory Heap

We need the memory heap as a place to store our variable and write information because at the finish of the time all programs are simply read and write operations. That way we have a place to allocate memory use memory and release memory.

Example:

const name = "Thor";

In this example, we’re saying here is please allocate memory for the name variable and make this name variable point two in-memory heaps the value “Thor”

Call Stack

With call stack, we are able to track where we are in code. So with that, we can run the code in order. Also, the engine keeps track of where your code is and it’s execution. When a Javascript file read line by line and think of call stack as a region in memory that operates in first in last out mode.

Example:

const sum = (a,b) => {return a + b}sum(10,5)

In this example when we run sum we simply on our call stack it’s going to just add the top of the stack and after we finish running this function it’s going to remove it from the call stack.

Conclusion

Thanks for reading.

If interested, you can view more resources on Youtube and also read the Javapoint article.

Front End Developer