The Javascript Engine

Javascript is an indispensable part of modern web development. In this theory-heavy article, we will be exploring what is Javascript Engine, what is Javascript Runtime Environment, and how Javascript code is executed under the hood.

A Javascript Engine is a program responsible for executing the JS code. It is a part of the JavaScript Runtime Environment. Wait, what the hell is JavaScript Runtime Environment?

A Javascript Runtime Environment is a kind of box that makes a JavaScript code actually work. It provides access to the outside world like the DOM(in case of browsers) or the File System(in case of Node) to name a few. If we do not have the Javascript Runtime Environment, we will be unable to use setTimeout, console, or other APIs methods provided by the outside world.

In a typical web browser, a Javascript runtime environment consists of:

1. JS Engine
2. Web APIs
3. Callback Queue aka Job Queue aka Macro task Queue
4. Event loop

We will cover only JS Engine in this blog.

All browsers have their JS engine. Google Chrome has V8. Mozilla has Spider Monkey and the list goes on. The JS Engine basically converts high-level code(what we write) to machine-level code(what computers understand).

Before we dive deep and dig out what happens in the process, we need to know two super important things: a compiler and an interpreter.

Compiler: It takes the source code and first compiles it line by line before even executing a single line of code. The compiler compiles the code into machine code which is highly optimized and simultaneously checks for syntactic or semantical errors. After compilation, it generates a file that contains the low-level code understandable by the machine. Used in C++ (remember the .exe file from your good old college days?).

Interpreter: It takes the source code and starts executing it line by line immediately.

So now, you may ask if Javascript is a compiled or interpreted language.

Well, it is the best of both worlds. Here’s how:

Basically, there are three steps involved in the code execution:

1. Parsing
2. Execution
3. Compilation

1. Parsing

The JS engine takes the source code, breaks it down into tokens, and generates a data structure called Abstract Syntax Tree (AST). If there is a syntax error in the program, the execution is stopped here, and control returns.

2. Execution

This generated AST gets fed into the interpreter which generates bytecode and starts executing the code line by line. While executing the bytecode, the interpreter collects profiling data, which can be used later to speed up the execution. The profiling data contains code that can be optimized. For example, a function is invoked multiple times.

3. Compilation

The generated bytecode and the profiling data are passed to something known as an optimizing compiler, which generates highly-optimized and efficient machine code(based on the profiling data) that runs very fast. This optimized code replaces the non-optimized code generated by the interpreter and gradually the Javascript Engine becomes hot and code execution improves.

So, Javascript uses both interpreter and compiler aka it has JIT (Just-in-time) Compilation.

That’s it for today. Thanks for reading!