What is an Engine?

A JavaScript engine is a program whose main task is to read and execute code. So, the way that this program works is:

• Read the code
• Translate it into machine code
• Run that machine code

The JavaScript engines are embedded in JavaScript runtime environments such as browsers, Node.js, or even Java Runtime Environment (JRE).

How does the JS Engine work?

The JavaScript Engine has 6 main components that work together as a whole. We will take a short look into all of them, and show how are they connected and how they work together.

1. Parser - The source code is sent to a decoder which decodes the contents inside the HTML script tag into tokens that are sent to the parser. The engine tries to avoid parsing code that’s not necessary right away in order to save time.
2. AST - The parser creates nodes based on the tokens it receives. With these nodes, it creates an Abstract Syntax Tree (AST).
3. Interpreter - It generates byte code, by reading the code line by line. Once the byte code is generated, the AST is deleted and memory space is cleared up.
4. Profiler - Monitors and watches code to optimize it.
5. Compiler - Works ahead of time and creates a translation of the code that has been written and compiles it down to a lower level language that machines can read.
6. Optimized code - Code needs to be optimized to be run quicker. ![enter image description here]

(https://storage.googleapis.com/algodailyrandomassets/curriculum/frontend/js-engine-runtime/Engine.png)

Call Stack and Memory Heap

The Call Stack and the Memory Heap are both important parts of the JS engine.

The Call Stack keeps track of where we are in the code. It uses first in and last out and stacks for example functions.

The Memory Heap stores and writes information, where memory is allocated, used, and removed.

The Call Stack calls a function from the Memory Heap and after executing removes it from the stack. When the maximum call stack has been reached, e.g. with an infinite loop, is called a stack overflow.

What is a Runtime?

A runtime is the environment in which a programming language executes. The runtime system facilitates storing functions, variables, and managing memory by using data structures such as queues, heaps, and stacks.

The JavaScript runtime is a program that extends the JavaScript engine and provides additional functionalities, so it can interact with the outside world. Also, the JS runtime provides features/APIs to build Javascript based software. This means both browsers, and JavaScript based frameworks have runtimes, but different ones based on their needs.

How does the JS Runtime work?

There are three main concepts to discuss when talking about JS Runtime and how it works. Let's take a look at each of them in more detail:

1. Web APIs

There are a large number of APIs available in modern browsers that allow us to do a wide variety of things. Some of the most common categories of JS APIs let us:

• Manipulate documents - The DOM API allows developers to manipulate HTML and CSS, letting us create, change and even remove HTML and dynamically apply styles to web pages.
• Draw and manipulate graphics- The Canvas API and the Web Graphics Library API allow to programmatically update pixel data contained in a <canvas> element.
• Fetch data from a server - The Fetch API provides an interface for fetching resources across the network by using generic definitions of the Request and Response objects.

Features like event listeners, timing functions and AJAX requests all sit in the Web APIs container until an action gets triggered. When a request finishes receiving its data, a timer reaches its set time or a click happens and this triggers a callback function to be sent to the Callback queue.

2. Callback queue

The Callback queue stores the callback functions sent from the Web APIs in the order in which they were added. This queue is a data structure that runs in FIFO order.

Callback functions will sit in the queue until the call stack is empty, they are then moved into the stack by the event loop.

3. Event loop

The Event loop constantly monitors the state of the call stack and the callback queue. If the stack is empty it will grab a callback from the callback queue and put it onto the call stack, scheduling it for execution.

By pushing callbacks from the Web APIs to the callback queue, the event loop can constantly add those callbacks to the call stack, which makes us think of JavaScript as being able to run asynchronously.

How do JavaScript Engine and Runtime work together?

Given the detailed information about the different steps that are being executed in the Engine and the Runtime, we can easily suppose how they both work together.

The first thing that needs to happen before code execution is for JavaScript to understand the code. This means analyzing the code against the grammar of JavaScript language and determining the format of a sentence.

After understanding the code, JavaScript needs to do some other tasks to execute the code like resolving functions, values of parameters, managing returns, ordering function calls, collecting garbage memories, and preparing machine instructions. All of this is job of the Engine.

After the Engine has finished its job, the Runtime comes to play. As explained above, it checks the callback queue, and the event loop grabs whatever is inside it to schedule it for execution.

We can see how the different parts of the JS Engine and Runtime work together in the following diagram.

One Pager Cheat Sheet

• A JavaScript engine reads, translates and executes code and is embedded in JavaScript runtime environments such as browsers, Node.js or JRE.
• No, this statement is false: the JavaScript engine's execution of the code is the final stage that actually runs it.
• The JavaScript Engine works with a Parser, an Abstract Syntax Tree (AST), an Interpreter, a Profiler, a Compiler, and optimized code, as well as a Call Stack and Memory Heap, to process code quickly and efficiently.
• The Profiler watches the code and makes optimizations, improving the performance of the JavaScript Engine.
• A runtime is a program that extends the JavaScript engine and provides additional functionalities, such as relevant APIs to interact with the outside world, so as to build JavaScript based software.
• The JavaScript Runtime consists of Web APIs, the Callback queue, and the Event loop, which together enable JavaScript to run asynchronously by scheduling callbacks from the Web APIs to be added to the stack.
• The Event Loop monitors the Callstack and Callback Queue and allows asynchronous execution of callback functions by continuously pushing them onto the Callstack.
• The JavaScript Engine analyzes and prepares the code for execution, while the Runtime executes the code and manages the queues that are associated with code execution.
• No, the JavaScript Engine is responsible for syntactic analysis of the source code and creating a machine understandable code, while the Runtime is used for executing the code.