Event Loop

The Event Loop is a fundamental concept in JavaScript that helps manage how code is executed, particularly when dealing with asynchronous operations like fetching data from an API or setting timers. Understanding the Event Loop is key to grasping how JavaScript handles tasks in a non-blocking manner.

JavaScript is a single-threaded language, meaning it can only do one thing at a time. However, JavaScript often needs to handle multiple tasks simultaneously, such as waiting for user input or fetching data from the internet. This is where the Event Loop comes in.

The timers (setTimeout() and setInterval()) are handled by the event loop mechanism in JavaScript. When you use timers, you’re asking the JavaScript runtime to wait for the delay, and when the delay expires, the callback function is pushed into the event queue.

Here’s what happens under the hood:

1. JavaScript runs the code line by line.
2. When a timer is called (e.g., setTimeout()), it schedules the callback function in the event queue after the specified delay.
3. The event loop checks if the call stack is empty. Once it's empty, it pulls the callback from the event queue and executes it.

How Event Loop Cycle works:

Example

   function runTasks() {
       console.log("Running Task 1.")

        setTimeout(() => {
            console.log("Running Task 2.")
        }, 5000);

        setTimeout(() => {
            console.log("Running Task 3.")
        }, 0);

        setTimeout(() => {
            console.log("Running Task 4.")
        }, 2000);

        console.log("Running Task 5.")
    }
  runTasks();

Output

Running Task 1.
Running Task 5.
Running Task 3.
Running Task 4.
Running Task 2.

Components Involved:

1. Call Stack:
   • The call stack is where JavaScript keeps track of what function is currently being executed. When you call a function, it gets added to the call stack. When that function finishes, it's removed from the stack.
   • If the call stack is empty, JavaScript can execute the next piece of code.
2. Web APIs:
   • These are browser-provided features that allow JavaScript to perform tasks like making HTTP requests, setting timers.
   • When you use a Web API like setTimeout, the task is handed off to the browser, which handles it separately.
3. Callback Queue (Task Queue):
   • When an asynchronous task (like an API request or a timer) is completed, the associated callback function (the code that should run after the task is done) is placed in the Callback Queue.
   • The Callback Queue holds these functions until the call stack is empty and they can be executed.
4. Event Loop:
   • The Event Loop's job is to constantly check the call stack and the callback queue. If the call stack is empty, it takes the first task from the callback queue and moves it to the call stack for execution.

Importance of Event Loop:

• Non-blocking Operations: The Event Loop allows JavaScript to handle long-running tasks (like network requests) without freezing the entire application.
• Responsive User Interfaces: By not blocking the tasks, the Event Loop helps keep the UI responsive, even when performing complex operations.