I was always curious to know how browsers understand Javascript code? How do we use Javascript to do some complex operations? The answer is the “Javascript Engine”.
Javascript engine helps the browser to understand the JS code. In a simple manner, whenever we write Javascript code, “something” needs to translate the code into machine-readable code. This “Something” is called a Javascript engine.
There are lots of Javascript engines that have been developed by some genius people, for example
1)Chakra: Used by Microsoft Edge.
2)V8: Used by google chrome,nodeJs
3)Spidermonkey: used by firefox.
4)JavascriptCore: used by safari.
5)Tamarin: Used by Adobe flash.
The first person who created a Javascript engine is “Brendan Eich” co-founder of the Mozilla project. Now he is also the CEO of Brave Software. In 1995 he wrote the first javascript engine called “Mocha” for Netscape. Back when Netscape was the leader in web browser development. Most importantly, JavaScript was initially designed and implemented by Mr.Brendan Eich in May 1995 at Netscape. I am so grateful to him that he commented on my previous tweet and shared some valuable paper links.
Here is the paper link
[https://hopl4.sigplan.org/details/hopl-4-papers/10/JavaScript-The-First-20-Years](Link)
The early version of SpiderMonkey(used in Firefox) was also created by him. Firefox is still using the javascript engine(SpiderMonkey). Because of him, we are able to execute javascript files into the browser.
Work process of the Javascript engine
The engine uses a parser to go through the code line by line and check if the syntax is correct, then creates a tree data structure called AST(abstract syntax tree). It’s easy to turn code into machine code from an AST.
The interpreter then turns AST into IR(an abstraction of machine code and an intermediary between JS code and machine code). The next step is to turn the IR into machine code. In the programming world, there are two ways to translate it into machine code. An interpreter or a compiler. An interpreter translates code line-by-line, it’s don’t translate before you start running your code. It’s pretty first but the problem arises when we run the same code more than once like loops. Then you have to do the same translation over and over again. On the other hand, the compiler creates a translation and writes it down, it translates the whole code line by line, which is a lengthy process. In that scenario, JIT has introduced. The full meaning of JIT is just in time compiler.
JIT is a combination of an interpreter & compiler. There is a part of the Javascript engine called monitor (profiler). Monitor watches the code as it runs and makes a note of it. Firstly it translates all of the Javascript files by the interpreter, if the same lines of code are run a few times it passes the code to the compiler and reduces the load on the CPU. Which helps the browser run faster. That’s all I learned about the Javascript engine. You can share your opinion in the comment sections. Here are some useful links about the Javascript engine
[https://nodejs.dev/learn/the-v8-javascript-engine](Link)
[https://hopl4.sigplan.org/details/hopl-4-papers/10/JavaScript-The-First-20-Years](Link)