JavaScript: The Runtime Environment🏃🏻🏃🏻🏃🏻

#javascript #programming #architecture #tutorial

So you may know that in JavaScript, your code somehow compiles and executes in your browser or server to display the beautiful application you've built. But are you aware of all the components that come into play to produce the output?

let's dive into deep and see what happens behind the hood in JavaScript and how it's run.

first, we're just glance over the runtime definition.

What's 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.

JavaScript Runtime Environment

JavaScript runtime environment is like a container, that has all the things to run a JavaScript Code.There are two types of JavaScript runtime environment:

The runtime environment of a Browser (like Google Chrome).
The Node runtime environment.

Every Browser has it's own JS Runtime Environment. The heart of any JavaScript Runtime is always JavaScript Engine. Without an engine there is no runtime and no JavaScript at all.

A JavaScript Runtime consists of the following components-

[🚀] The JS Engine.
[🌏] Web/Global APIs.
[⌛] Callback Queue.
[🔬] Microtask Queue.
[🔄] Event Loop.

Here, we can glimpsed the JavaScript Runtime Environment as a whole in one picture.

1. The JS Engine 🚀
The JavaScript engine, is a vital component of the JavaScript Runtime Environment. Consider it heart of the JavaScript runtime environment. Operating in a single-threaded manner,it executes tasks one at a time, following a specific order. There are a lot of steps involved in doing that, but essentially executing JavaScript code is what an engine does.
Every browser has its own JavaScript engine but the most well known engine is Google's V8. The V8 engine powers Google Chrome but also Node.js which is that JavaScript Runtime.

2. Web/Global APIs 🌏
Web/Global APIs play a crucial role in the JavaScript Runtime Environment by enabiling the execution of tasks in the background, creating the illusion of a multi-threaded environment. It's not part of the JS Engine rather it's crucial part of Runtime environment. These APIs, provided by the browser or the operating system, allow JavaScript to interact with external resources and perform operations asynchronously.

Queue
The queue is an essential part of the JavaScript task scheduling algorithm, which dertermines the order in which tasks are executed by the JavaScript Engine.Both queues hold tasks that are executed asynchronously, but there are some differences in how they work.

3. Callback Queue (Macrotask Queue) ⌛
The Callback Queue also known as the task queue, holds tasks that are pushed to the queue by Web/Global APIs, such as setTimeout,setInterval,XMLHttpRequest, or Events like mouse clicks and keyboard inputs. When the call stack is empty & microtask queue has no priority task, the event loop moves the first task from callback queue to the call stack for execution.
For example:

console.log('script step-1');
setTimeout(() => console.log('script step-2'), 0);
console.log('script step-3');

4. Microtask Queue 🔬
The Microtask Queue, also known as the Job Queue or Promise Queue. It's handle the mutation observer callbacks and promise callbacks. These tasks are scheduled to run after the currently executing script is complete and before the event loop continues with the next task in the task queue.The microtask queue is processed before the callback queue, so the tasks in the microtask queue are given priority over tasks in the callback queue.

console.log('script start');

setTimeout(() => {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(() => {
  console.log('promise1');
}).then(() => {
  console.log('promise2');
});

console.log('script end');

5. Event Loop 🔄
The event loop is a continuous process that constantly checks the call stack and the callback queue,microtask queue. Event loop takes callback functions from the callback queue,microtask queue and puts them in the call stack. So that they can be executed. Also Event Loop is essential for non-blocking concurrency model.