How Javascript Works Behind the Scene

Congratulations on running your first JavaScript code without errors! It’s an exciting feeling of accomplishment and a great start to learning this powerful language.

But what happens behind the scenes when you run a JavaScript code? How does your browser understand and execute your code without the need for any additional software?

In this article, we’ll take a look at how JavaScript works in a web browser. We’ll cover the following topics:

• The JavaScript runtime environment
• JavaScript engines
• The memory heap
• The call stack
• Concurrency and event loops

The JavaScript Runtime Environment

The JavaScript runtime environment is a software program that provides the required infrastructure for running a JavaScript program. This infrastructure includes things like memory management, garbage collection, and input/output (I/O) support.

The JavaScript runtime environment is responsible for determining the global object that your code can access, and for ensuring that your code runs correctly.

JavaScript Engines

A JavaScript engine is a software program that is responsible for executing JavaScript code. JavaScript engines are typically written in C or C++, and they are often used by web browsers to execute JavaScript code.

There are many different JavaScript engines available, and each one has its own strengths and weaknesses. Some of the most popular JavaScript engines include:

• V8: V8 is the most popular JavaScript engine, and is used by Google Chrome.
• SpiderMonkey: SpiderMonkey is the JavaScript engine that is used by Mozilla Firefox.
• Chakra: Chakra is the JavaScript engine that is used by Microsoft Edge.

The Memory Heap

The memory heap is a region of memory that is used to store all of the dynamic data in a JavaScript program. This includes things like objects, arrays, functions, and variables.

The memory heap is managed by the JavaScript engine, and it is important to understand how it works in order to avoid memory leaks and other problems.

The Call Stack

The call stack is a data structure that is used to keep track of the current execution context of a JavaScript program. The call stack contains a stack of frames, each of which represents a function that is currently being executed.

The call stack is used by the JavaScript engine to determine which function should be executed next, and it is also used to handle errors and exceptions.

Concurrency and Event Loops

JavaScript is a single-threaded language, which means that only one piece of code can be executed at a time. However, JavaScript is also a non-blocking language, which means that it can handle asynchronous events such as AJAX requests and timer events without blocking the main thread(call stack).

This is accomplished through the use of a callback queue and an event loop. The callback queue is a queue of functions that are waiting to be executed. The event loop is a loop that repeatedly checks the callback queue for functions that are ready to be executed.

When an asynchronous event occurs, the JavaScript engine adds a function to the callback queue. The event loop then checks the callback queue, and it executes the first function that is ready to be executed.

This allows JavaScript to handle asynchronous events without blocking the main thread (Call Stack).