Can you explain the working principle of the Event Loop in the asynchronous JavaScript model?

Event Loop is a mechanism in JavaScript that allows asynchronous code to run without blocking the main thread. JavaScript is single-threaded, but thanks to the Event Loop, it can handle multiple operations such as timers, network requests, and UI events.

How it works:

1. Call Stack — functions to be executed are placed here.
2. Web APIs — browser or environment APIs that handle asynchronous operations (e.g., setTimeout, fetch).
3. Callback Queue — completed asynchronous tasks are placed here.

When the call stack is empty, the Event Loop takes the first callback from the queue and pushes it onto the stack for execution. This ensures continuous event processing without blocking.

Example:

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

The output will be:

Start
End
Asynchronous code

Even with a delay of 0, setTimeout places the callback in the queue, which will execute after the main code.