JavaScript Event Loop

The event loop is an essential part of the JavaScript concurrency model, handling the execution of code, callbacks, and events in a non-blocking manner. It ensures that JavaScript continues to execute and handles asynchronous operations correctly. 

Here is the working process of the Event Loop,

 

Understanding the Event Loop

Call Stack- JavaScript is single-threaded, which means it can only execute one piece of code at a time (except for Web Workers). The call stack is where function calls are queued and performed Last In, First Out (LIFO).

Web APIs and Callback Queues- The JavaScript engine, like in a web browser, uses a web API (such as the DOM, setTimeout, fetch, etc.) that handles asynchronous operations and initiates transactions when these APIs are called after the JavaScript engine , and specify how to terminate them.

Event Loop- The function of the event loop is to maintain the Call Stack and Callback Queue,

• Call Stack- Consists of synchronous function calls one at a time.
• Callback Queue- Stores tasks (callbacks) that are ready to execute after the result of the currently executed script (when the stack is empty).

 

Process of Execution

• When the script starts executing, the main thread executes the synchronous code and pushes the function calls onto the call stack.
• When an asynchronous operation (such as setTimeout) is encountered, it starts and then sends the associated callback operation to the Web API environment (it sets a time in the setTimeout statement).
• The browser's web API handles asynchronous actions, leaving the JavaScript engine free to run code synchronously.
• When the Web API processing completes (e.g., setTimeout times out), the callback task is pushed to the Callback Queue.
• The event loop continues to check if the Call Stack is empty. If present, it is the first operation in the Callback Queue to the Call Stack for execution.
• This functionality is persistent, allowing JavaScript to handle asynchronous events and callbacks in a non-blocking manner while maintaining a single-threaded execution model

Example- 

console.log('Start');
setTimeout(() => {
 console.log('Inside setTimeout callback');
}, 0);
console.log('End');

In the example above-
console.log('Start') and console.log('End') are activated simultaneously by pushing to the Call Stack.

Call setTimeout, which configures its callback function to be at least 0 milliseconds (the actual delay may vary depending on system performance).

console.log('End') completes execution and pops from the Call Stack.

The callback function for setTimeout is added to the Callback Queue after the specified delay.

The event loop detects that the Call Stack is empty and moves the callback task from the Callback Queue to the Call Stack, where it is executed (console.log('Inside setTimeout callback')).

Output-

Start
End
Inside setTimeout callback

 

Also, Read: Explain the concept of Web APIs in JavaScript