## What are JavaScript Engines?

A JavaScript engine is a software component that executes **JavaScript code**. The first JavaScript engines were mere **interpreters**, but all relevant modern engines use **just-in-time compilation** for improved performance.

An elementary JavaScript engine includes a baseline compiler whose job is to compile JavaScript source code into an **intermediate representation (IR)** called the **bytecode** and feeds this bytecode to the **interpreter**. The interpreter takes this bytecode and converts it to the **machine code**, which is ultimately run on the **machine’s hardware** (CPU).

A JavaScript engine is typically developed and used in web browsers to run client-side code but can also be used in server-side environments like Node.js.

Do not confuse JavaScript engines with rendering engines, which are also crucial parts of browsers.

The first JavaScript engine was created by **Brendan Eich** in **1995** for the **Netscape Navigator web browser**. It was a rudimentary interpreter for the nascent language Eich invented. (This evolved into the SpiderMonkey engine, still used by the Firefox browser.)

Google debuted its *Chrome browser* in **2008**, with the **V8 JavaScript engine** that was *faster* than its competition. The **key innovation was just-in-time compilation (JIT)**, which Mozilla had also been working on for SpiderMonkey. Because of V8's performance, the other browser vendors needed to overhaul their engines for JIT. **Apple** developed the Nitro engine for its **Safari browser**, which had **30% better performance** than its predecessor. Mozilla then leveraged portions of Nitro to improve SpiderMonkey

## JavaScript Engine Components
Now that we have this knowledge, I wonder.. Since the JavaScript Engine is an Engine right it must have its components. What are these components?
1. **Memory Heap**:
Heap is a large unstructured data structure that stores all the dynamic data like function definitions, objects, arrays, etc. The memory heap is where the memory allocation happens, it is a location in memory where memory may be allocated at random access. Individual data elements distributed on the heap are typically released in ways that are asynchronous from one another. The memory occupied in the heap continues to exist even after JavaScript code execution has been completed and is later removed by the JavaScript Garbage Collector if needed.

2. **Call Stack**:
The Call stack is a data structure that functions on the Last In First Out (LIFO) principle. The call stack stores the execution context or code for each function. It is defined as an object which stores local variables, functions, and objects of the codes and how would they appear on the screen. Primitive values like int, bool, etc are stored inside the call stack. While function definitions and objects are not stored inside the call stack, they are stored inside the memory heap. The call stack just has the reference or memory address of where these function definitions and objects are stored and would appear on the search engine.

### Schema Of How JavaScript works
<img src="https://cdn.prod.website-files.com/5ef788f07804fb7d78a4127a/626f63373ef65674fa6cabee_3VCgNiMb2d6IvaT7YmgdMHTpt_2gotv0IGoZlhCz9_u9HOCxPRcapkFd7r_73NDDZ8gZLhHIE1odOTWRJmZzh0rZVymJO4zIhcfzcKBfn-EykYOdvMFsJJIkwiS3jrnHKYLDwiyM.png">

### How It Works
1. **Parsing**: as a new piece of JavaScript code enters the JavaScript Engine, the first step performed is parsing of the code. During this process, the code is parsed into a data structure called the Abstract Syntax Tree (AST).
2. **Profiling**: in this step the JIT compiler identify the parts of the code that are executed most frequently, which are the parts that should be optimized.
3. **Optimization**: The JIT compiler then applies various optimization techniques to the frequently executed code, such as inlining functions, eliminating redundant code, and generating specialized machine code.
4. **Code generation**: Once the optimization process is complete, the JIT compiler generates machine code that can be executed directly by the CPU.
5. **Execution**: Finally, the optimized machine code is executed by the CPU, resulting in faster and more efficient code execution.

## The Mystery of Just-In-Time Compilation in JavaScript
JavaScript Just-in-Time (JIT) compilers work by dynamically compiling JavaScript code at runtime to native machine code, allowing it to execute faster than interpreted code. The general idea is to compile code that is executed frequently or takes a long time to execute.

## Examples of JavaScript Engines and the Web Browsers that Use Them.

1. V8
It is a JavaScript engine developed by the Chromium Project for Google Chrome and Chromium web browsers which can run standalone or be embedded into any C++ application. V8 uses its own parser and generates an abstract syntax tree, used for generating bytecode by Ignition using the internal V8 bytecode format. V8 provides an edge as it allows JavaScript to run much faster, which improves users' experience of the web and the overall functionality of the system. V8 from Google is the most used JavaScript engine. Google Chrome and the many other Chromium-based browsers use it, as do applications built with CEF, Electron, or any other framework that embeds Chromium. Other uses include the Node.js and Deno runtime systems.

2. Chakra
Chakra is a JavaScript engine developed by Microsoft used for Microsoft Internet Explorer. It is proprietary software with distinctive features. Chakra can JIT compile scripts on a separate CPU core parallel to the web browser. Firstly, Chakra Core reads through the Javascript code syntax and parses it to generate its AST. After the AST is generated, the code is passed to the byte code generator to profile the byte codes. Chakra works a bit differently from V8, as V8 has a decision process that decides whether a piece of code should be profiled and optimized or should be turned into byte code. Chakra is the engine of the Internet Explorer browser. It was also forked by Microsoft for the original Edge [Legacy] browser, but Edge was later rebuilt as a Chromium-based browser and thus now uses V8.

3. Spider Monkey
SpiderMonkey is the first JavaScript engine, written by Brendan Eich at Netscape Communications, released as open-source, and is currently maintained and used by the Mozilla Foundation. It contains a JavaScript compiler and interpreter along with several service programs. It is written in C++, Rust and JavaScript can be embedded into C++ and Rust projects and run as a stand-alone shell. SpiderMonkey is developed by Mozilla for use in Firefox and its forks. The GNOME Shell uses it for extension support.

4. JavaScriptCore
JavaScriptCore is a framework that provides a JavaScript engine for WebKit implementations, and provides this type of scripting in other contexts within macOS. JavaScriptCore is originally derived from KDE's JavaScript engine (KJS) library (which is part of the KDE project) and the PCRE regular expression library. Since forking from KJS and PCRE, JavaScriptCore has been improved with many new features and greatly improved performance. On June 2, 2008, the WebKit project announced they rewrote JavaScriptCore as "SquirrelFish", a bytecode interpreter. The project evolved into SquirrelFish Extreme (abbreviated SFX, marketed as Nitro), announced on September 18, 2008 further speeding up JavaScript execution. An optimizing just-in-time (JIT) compiler named FTL was announced on May 13, 2014. It uses LLVM to generate optimized machine code. "FTL" stands for "Fourth-Tier-LLVM", and unofficially for faster-than-light, alluding to its speed. As of February 15, 2016, the backend of FTL JIT is replaced by "Bare Bones Backend" (or B3 for short). JavaScriptCore is Apple's engine for its Safari browser. Other WebKit-based browsers and the Bun runtime system also use it. KJS from KDE was the starting point for its development.

In Conclusion JavaScript Engines are the driving force that sees that great scripts are flawlessly executed on the Machine. Their evolution and progresive innovation through the years goes to show their importance and value in the world of Tech. I sincerely hope this article brings together all relevant information a beginner would require to get a basic idea of what JavaScript engines are. I also encourage you to do more research and look up things that might seem new, Who knows what you might discover ;).