In today JavaScript can run inside of a browser as well as outside of a browser. This is all because of JavaScript Engine. This Engine is a piece of code that executes our high level JavaScript code to low level Machine Code.
In order to understand JavaScript Engine we need to understand the JavaScript Runtime Environment. A JavaScript Runtime Environment is an environment where the JS Engine, Web API, Event Loop, Callback Queue & Microtask Queue etc happen. See the picture below to understand better.
The JavaScript Runtime Environment is essential part that executes our JS code, which contains JS Engine.
Every Browser has it’s own JS Engine in their JS Runtime Environment. Node.js has also JS Runtime Environment. For example, Google and Node.js use V8, Mozilla Firefox uses Spider Monkey.
Now lets deep dive into JavaScript Engine.
There are three (3) major phases of JavaScript Engine. First step is Parsing, second step is Compilation & third step is Execution.
Parsing
In this stage our JavaScript code splits into Tokens. For example, let a = 10 splits into tokens let, a, =, 10, each of them called token. We can call them as,
let => Keyword/Kind.
a => Identifier.
= => Assignment.
10 => Literal.
After generating the Tokens the next task is to make AST or Abstract Syntax Tree. An AST is a tree which generated by tokens. For let a = 10 the AST will be,
After generating the AST the next phase is Compilation.
Compilation
Traditionally JavaScript is a Interpreted language. But now JavaScript is considered as modern language, it has both Interpreter and Compiler (thanks to modern JavaScript Engine). The Interpreter interpret each code line by line while the Compiler optimized the code. Most of the JS Engine use JIT Compiler or Just-in-time Compiler.
V8 engine uses Ignition Interpreter and Turbofan Compiler. Ignition will interpret and Turbofan will compile our JS code.
Execution
In execution phase code (interpret and compiled) will go to execute. We have Memory Heap and Garbage Collector in this phase. Every variable, function store in the Memory Heap and after a certain time when the item is not necessary in the Heap the Garbage Collector removes it.
This is the basic overview of JavaScript Engine.
After completing the Parsing, Compilation & Execution phase JavaScript Engine put those to Machine Code and the Machine Code will understand those.