How JavaScript works behind the scene

The JavaScript engine interprets the JavaScript code and executes it. The JavaScript engine contains a Call Stack and a Heap. The Call Stack is where the code is executed, while the Heap is an unstructured memory space that stores all the objects. Just-in-Time Compilation Because computers understand only binary, JavaScript code must be translated into binary. JavaScript uses Just-In-Time (JIT) Compilation, where the source code is compiled and immediately executed. This approach helps improve performance by combining the benefits of both interpretation and compilation. Execution Context The execution context contains the code that is currently running and everything that aids in its execution. There are two types of execution context. We have the Global Execution Context (GEC) and the Function Execution Context (FEC). The Global Execution Context is the default execution context where all JavaScript code that is not inside a function is executed. For every JavaScript file, there can only be one GEC. Whenever a function is called, the JavaScript engine creates a different type of execution context — the Function Execution Context — within the GEC to execute the code inside that function. Each execution context contains: . The current code being executed . Variable and function references . The scope chain The Call Stack The Call Stack is a data structure that keeps track of where in the code we are. It records, in Last-In, First-Out (LIFO) order, which function is currently being executed. Whenever a function is invoked, it is pushed onto the call stack. When the function finishes executing, it is popped off the call stack. This allows the JavaScript engine to keep track of nested function calls and resume execution in the right place. Callback Queue The Callback Queue is a FIFO (First-In, First-Out) data structure that stores all callback functions — such as those from asynchronous tasks like setTimeout, DOM events, or HTTP requests. These callbacks wait for the Call Stack to be empty before they can be executed. Event Loop The Event Loop continuously checks the Call Stack and the Callback Queue. If the call stack is empty (i.e., no function is currently running), the event loop takes the oldest callback from the queue and pushes it into the call stack, where it gets executed. This mechanism enables JavaScript, which is single-threaded, to handle asynchronous behavior such as events, timers, and API calls without blocking the main thread.

May 5, 2025 - 02:42

The JavaScript engine interprets the JavaScript code and executes it. The JavaScript engine contains a Call Stack and a Heap. The Call Stack is where the code is executed, while the Heap is an unstructured memory space that stores all the objects.

Just-in-Time Compilation
Because computers understand only binary, JavaScript code must be translated into binary. JavaScript uses Just-In-Time (JIT) Compilation, where the source code is compiled and immediately executed. This approach helps improve performance by combining the benefits of both interpretation and compilation.

Execution Context
The execution context contains the code that is currently running and everything that aids in its execution. There are two types of execution context. We have the Global Execution Context (GEC) and the Function Execution Context (FEC).
The Global Execution Context is the default execution context where all JavaScript code that is not inside a function is executed. For every JavaScript file, there can only be one GEC.
Whenever a function is called, the JavaScript engine creates a different type of execution context — the Function Execution Context — within the GEC to execute the code inside that function.
Each execution context contains:
. The current code being executed
. Variable and function references
. The scope chain

The Call Stack
The Call Stack is a data structure that keeps track of where in the code we are. It records, in Last-In, First-Out (LIFO) order, which function is currently being executed.
Whenever a function is invoked, it is pushed onto the call stack. When the function finishes executing, it is popped off the call stack.
This allows the JavaScript engine to keep track of nested function calls and resume execution in the right place.

Callback Queue
The Callback Queue is a FIFO (First-In, First-Out) data structure that stores all callback functions — such as those from asynchronous tasks like setTimeout, DOM events, or HTTP requests. These callbacks wait for the Call Stack to be empty before they can be executed.

Event Loop
The Event Loop continuously checks the Call Stack and the Callback Queue.
If the call stack is empty (i.e., no function is currently running), the event loop takes the oldest callback from the queue and pushes it into the call stack, where it gets executed.
This mechanism enables JavaScript, which is single-threaded, to handle asynchronous behavior such as events, timers, and API calls without blocking the main thread.