Roja Gnanavel for JSLovers

Posted on Feb 17

JavaScript Engines: The Core of Your Web Browser

What is JavaScript Engine

Okay, you’ve probably come across the term "JavaScript engine," but what does it really mean? Well, a JavaScript engine is a program that reads and executes JavaScript code. It converts the code into machine language that the computer understands. JavaScript engines are used in browsers (like Chrome, Firefox) and environments like Node.js to run JavaScript code.

Still confused? Let me make it easier for you: 😅

Imagine the JavaScript engine is like Google Translate. JavaScript is like English, and the JavaScript engine is like Google Translate. You don’t understand English directly, so Google Translate changes it into Tamil (or whatever language works for you!). Similarly, the JavaScript engine turns JavaScript code into a language that the computer understands and follows without getting confused.

Alright, now that we’ve got the basic idea of what a JavaScript engine is, you might wonder, why do we need it?

We need a JavaScript engine because JavaScript makes websites interactive. Without the engine, the browser wouldn’t know how to read or run the code. Here’s why it’s important:

1.Interactivity: Websites need to respond to actions like clicking a button or filling out a form. The JavaScript engine makes sure this happens.

Example: When you click the "Submit" button, JavaScript makes sure the form data is sent to the server. Without the engine, the browser wouldn’t know what to do with your click!

2.Performance: The engine helps the code run faster and more smoothly, making websites quicker.

3.Cross-platform compatibility: JavaScript works on different browsers and platforms (like Node.js), and the engine makes sure the code works well everywhere.

How JavaScript Engine Works

Let’s dive into how the engine actually works behind the scenes.

1.Parsing

Parsing is the process of breaking down the code so the JavaScript engine can understand and run it. It happens in two steps

Lexical Analysis

This is where the engine scans the code from left to right, breaking it down into small chunks called tokens. Tokens are like words in a sentence. For Example, If code is

let sum = 5 + 10;

The token would be:

let -> keyword
sum -> identifier
= -> operator
5 -> literal
+ -> operator
10 -> literal
; -> punctuation

Syntax Analysis

Once Lexical Analysis is done, the tokens are arranged into something called an Abstract Syntax Tree (AST). Think of it as a tree like structure that shows how your code is organized.

Here’s the cool part: this tree doesn’t just organize your code. It also checks if everything follows JavaScript’s rules.

For example:

let sum = 5+;

Oops! There’s a mistake here (you forgot something after the +).The parser will immediately catch this and throw a Syntax Error.

In short, the AST makes sure your code is both structured and error-free.
Here's a simple AST for the code above:

And if you're curious about the AST for your own code, it’s super easy to check! Just follow these steps:

Go to https://astexplorer.net/.
Paste your code in the left panel.
Pick Esprima or Babel as your parser.
And there you have it! The AST tree will appear on the right side.

2.Interpretation

Once parsing is done and we have our AST, the engine starts interpreting the code. This is when the engine reads through the code and makes things happen quickly. For example, when the code let sum = 5 + 10; runs, the engine calculates 5 + 10 to get 15 and assigns it to the variable sum.

At this stage, the engine is prioritizing speed, getting the program up and running quickly, even if the code isn’t fully optimized yet.

3.JIT Compilation

Now we get to the cool part: JIT (Just-In-Time) Compilation. This is where the engine really speeds things up.

It takes the code let sum = 5 + 10; and turns it into machine code that your computer can directly execute.
It does this just before the code runs, making it fast and efficient.

For example:
The engine reserves memory for sum.
It calculates 5 + 10, stores the result (15), and runs it smoothly.

4.Optimization (Hot Path Detection)

Now, the engine gets smarter. It monitors the code to identify "hot paths," which are frequently executed sections like loops or important functions.

If it notices that 5 + 10 doesn’t involve any variable changes, it might precompute the result as 15 and skip recalculating it repeatedly.
The Optimizing JIT Compiler steps in here, fine-tuning the code to make these repetitive parts super fast.

5.De-optimization (If Needed)

But what happens if the code changes? For example, if you later change the value of sum to "hello":

sum = "hello";

The engine realizes sum has changed from a number (15) to a string ("hello").

Now the engine knows that sum has changed from a number to a string. To ensure everything runs correctly, it de-optimizes the previously compiled machine code and makes sure the program works without any issues.

6.Execution Context and Scope

Once the code is parsed, the engine sets up the environment to run it:

Global Execution Context: This is the base environment created for the entire script. In browsers, the global object is window.
Function Execution Context: Every time a function is called, a new execution context is created with its own scope (local variables, functions).
Execution Stack: The engine uses a call stack to manage the execution contexts. When a function is invoked, its context is added to the stack. Once it completes, it is removed (popped off) from the stack.

Now, the engine is ready to manage memory and handle asynchronous tasks in the next steps.

7.Memory Management

To store and retrieve data, JavaScript uses two main types of memory:

Heap Memory: Used for objects, arrays, and functions (dynamic structures).
Stack Memory: Used for primitive values (numbers, strings, booleans). The stack is faster but limited in size, while the heap handles more complex data.

8.Event Loop

JavaScript’s single-threaded nature relies on the event loop to manage asynchronous tasks:

Message Queue: Tasks like setTimeout, API calls, and event handlers are queued up here after being initiated.
Event Loop: Constantly checks if the call stack is empty. When it is, it moves tasks from the message queue to the stack for execution. This ensures asynchronous code doesn't block the main thread.

9.Garbage Collection

To avoid memory leaks, the JavaScript engine has a garbage collector. It uses an algorithm called Mark-and-Sweep to find and remove objects that are no longer in use, freeing up memory for other tasks.
This is how JavaScript engine is working. 🎉

Popular JavaScript Engines

Here are the most common JavaScript engines you’ll encounter:

V8 (Chrome and Node.js) – Ignition (Interpreter) – TurboFan (Compiler)
SpiderMonkey (Firefox) – jsinterp (Interpreter) – IonMonkey (Compiler)
JavaScriptCore (Safari) – JSC (Interpreter) – LLInt, FTLJIT (Compiler)
Chakra (Internet Explorer) – Chakra Interpreter (Interpreter) – Chakra JIT (Compiler)

Each engine has its own strengths in how it interprets and compiles JavaScript, optimizing performance for their respective environments.

Comparison Of Engines

V8: Known for its efficient performance, used in both Chrome and Node.js.
SpiderMonkey: Offers strong memory management and powers Firefox.
JavaScriptCore: Optimized for Apple’s ecosystem, used in Safari.
Chakra: Used in Internet Explorer, focusing on just-in-time compilation for speed.

Conclusion

So, that’s how JavaScript engines work their magic! They handle everything like parsing, interpreting, optimizing, and managing memory. Whether you're working with Chrome, Firefox, Safari, or Node.js, each engine brings its own flavor to speed things up, making your experience faster and more efficient. So, next time you’re clicking around a website or running some code, remember there’s some cool engine magic happening in the background, making it all possible!! Hope this helps and you get a better idea of how things work under the hood! 😎