JavaScript engines are a program that helps in converting your code of raw JavaScript into a lower level code or machine code. JavaScript is not understandable by computer. So, we need a program to convert our JavaScript program into computer-understandable language. A JavaScript engine is a computer program that executes JavaScript code and converts it into computer understandable language. JavaScript is a multi-paradigm prototype-based language(multi-paradigm means that we can use different styles when programming and prototype-based primarily is a programming model that works on the concept of object cloning and prototyping), which uses JavaScript Engine such as Chrome’s V8 engine Firefox SpiderMonkey engine and etc. ECMAScript Standards is being followed by all JavaScript engines. The job of these standards is to give a definition, how JavaScript engines should work. It also tells what all features it should have.
Anatomy of Javascript Engine
ECMA Script specifies the procedure in which JavaScript should be implemented by the browser so that in every single browser this program runs the same. It does not specify how the JavaScript should be running inside these browsers. Each browser gives you a JavaScript engine that will run the JavaScript code. Though SpiderMonkey is the first JavaScript engine, written by Brendan Eich(creator of Javascript programming language), currently maintained by the Mozilla Foundation. It is used in the Firefox web browser. But today we will learn about the most popular Javascript engine, Chrome V8. V8 is an open-source JavaScript engine developed by the Chromium Project for Google Chrome and Chromium web browsers. Let's learn what happens inside Javascript Engine.
Google chrome’s JavaScript V8 engine: Firstly, raw JavaScript file goes into the Parser. Refer to the image below.
Parser: It checks for syntax and semantics. Parser is nothing but a lexical analysis(a lexical analyzer is used to produce tokens from a stream of input string characters, which are broken into small components to form meaningful expressions) that results into the breaking of code into tokens(a token is the smallest unit in a programming language that possesses some meaning, such as +, -, “function”, or “new” ) in order to understand their meanings and these tokens gets converted into Abstract Syntax Tree(AST).
Abstract Syntax tree: Don't get alarmed because of it's name. It's just a hierarchical tree like structure of program representation which allows interpreter to understand the program. Refer to the image below. This AST initially goes to the Interpreter.
Interpreter: It lets the AST to get converted into Byte code. In V8 engine, this process is known as Ignition.
Bytecode: This are abstractions of machine codes. Think of it as something in between the code we can read and the code machines execute. However, bytecodes are machine agnostic, which means that bytecodes can be compiled into whatever machine architecture you're running on. Bytecode image below.
- TurboFan: You can think that process Ignition is baseline compiler, a bytecode interpreter, an AST to bytecode transformer. Where as TurboFan does similar job but those machine codes are optimised machine code(bytecode), which helps in faster execution of the process.
Now you understand how javascript code is turned into bytecode to make it understandable for computers. Then everything is displayed on the browser. There are different javascript engines for each browser. They work in similar way but there are minor differences between each of the engines. Tell me which Javascript engine is your favourite?
If you loved the article do follow me on Twitter.