JAVASCRIPT BEHIND THE SCENES

One of the most popular and well-maintained programming languages of the 21’st century.

JavaScript (often shortened to JS) is a lightweight, interpreted, object-oriented language with first-class functions, and is best known as the scripting language for Web pages, but it’s used in many non-browser environments as well. It is a prototype-based, multi-paradigm scripting language that is dynamic, and supports object-oriented, imperative, and functional programming styles.

JavaScript runs on the client-side of the web, which can design / program how the web pages behave in the occurrence of an event. JavaScript is an easy-to-learn and also powerful scripting language, used for controlling web page behavior.

In a nutshell, JavaScript handles the current web and all websites you see nowadays.

Overview

Almost everyone in the world of technology knows about the V8 Engine as existence, and many people also know that JavaScript is a single-thread language.

in the article, we will go through all the concepts of how JavaScript runs it is also true for another similar programming language.

if you are a noob in JavaScript, this article helps you understand abut JavaScript more so that can write more efficient code to get the most out of the performance and efficacy.

this article tells you all the basic components the help to run your *.js plain text file in the browser:

1. Engine

2. Runtime Environment

3. The Call Stack

4. concurrence and event loop

The JavaScript Engine

as you know, that JavaScript is an interpreted programing language that means it doesn't compile your code to binary prior to the execution, it compiles it on the fly while reading your code from top to bottom

how your computer knows what to do with the hunk of text you wrote?

So here comes the JavaScript engine. JavaScript engine is a well laid out and engineered program which converts your code to binary.

What a JavaScript engine does is parse your written code into tokens, then convert it into a parse tree which can find any errors in your code. If it doesn't have any error, it gets converted to an equivalent binary and gets executed in your device.

The type of compile used to do this task is called a just-in-time compiler.

Every browse has its own JavaScript engine but the most popular out of them is V8 by google. The v8 engine not only powers google chrome but also Node.js which is The JavaScript runtime

Engine	Browser
V8	Google Chrome and Node.js
Spider Monkey	Mozilla Firefox
JavaScriptCore	Safari
Chakra	Microsoft Edge(legacy)

The engine comprises two major components:

1. Memory Heap: where the memory allocation happens.

2. Call Stack: this is where your code is executed

the call stack is the place where your actual code is executed, but you can't achieve that without a memory heap, heap is the place where all your object is stored.

for example variables, functions, and everything else.

The Runtime Environment

JavaScript engine doesn't work in a global or in an isolated environment. Rather, it runs in a separate environment that contains many components like JS engine, web API, call back queue, event table, event loop.

all these components together make JER (JavaScript runtime environment).

this runtime environment is the reason which makes JavaScript-capable of asynchronous calls.

The Call Stack

JavaScript has a single call stack, that is why it can execute a single command at a time.

the call stack is a data structure that works on a FIFO system, which means first in First out, which means the command the caller first will be the first to show the output.

for example:

console.log("1");
console.log("2");
console.log("3");
console.log("4");
console.log("5");

Concurrency and the Event Loop

What happens if you have active calls in Call Stack that take a long time to process?
For example, suppose you want to perform complex JavaScript computation in a browser.

You may ask - why is this a problem?

The problem is that while Call Stack has tasks to perform, the browser cannot do anything else - it is blocked. This means that the browser cannot perform, cannot use any other code, it is simply blocked. And this creates a problem.

And that is not the only problem. When your browser starts processing multiple tasks in Call Stack, we may stop responding for a long time. And many browsers take action by suggesting an error, asking you if you want to close a webpage and in the worst-case senior your browser might stop responding to your system.

more about Concurrency and the Event Loop in later articles so stay tuned.