Event Loop in JavaScript

• The event loop is a fundamental part of JavaScript's runtime that allows it to handle asynchronous operations (like fetching data from a server or reading a file) without blocking the main thread of execution.

How It Works

• Call Stack: This is where your code gets executed. When you call a function, it's added to the call stack. When the function returns, it's removed from the call stack.

• Web APIs: These are provided by the browser (or Node.js) and include things like `setTimeout`, `fetch`, DOM events, etc. When you call these functions, they run in the background.

• Callback Queue: Once an asynchronous operation completes (like `setTimeout`), its callback function is added to the callback queue.

• Event Loop: This constantly checks the call stack and the callback queue. If the call stack is empty, it takes the first function from the callback queue and pushes it onto the call stack, allowing it to be executed.

Example

• Let's go through an example to see how this works.

  console.log('Start');

  setTimeout(() => {

    console.log('Timeout callback');

  }, 2000);

  console.log('End');

• Step-by-Step Execution:

1. Start

• console.log('Start') is called and added to the call stack.
• It prints "Start" to the console and is then removed from the call stack.

2. setTimeout

• setTimeout is called and added to the call stack.
• setTimeout is a Web API, so it sets a timer for 2000 milliseconds (2 seconds) and then its callback function is added to the callback queue.
• setTimeout is then removed from the call stack.

3. End

• console.log('End') is called and added to the call stack.
• It prints "End" to the console and is then removed from the call stack.

4. Event Loop

• The event loop checks if the call stack is empty (which it is).
• After 2 seconds, the `setTimeout` callback function (`console.log('Timeout callback')`) is added to the callback queue.

5. Executing Callback:

• The event loop moves the `setTimeout` callback from the callback queue to the call stack.
• The callback function (`console.log('Timeout callback')`) is executed, printing "Timeout callback" to the console.
• The callback function is then removed from the call stack.

Visualization

• Here's a simplified visualization of the process:

1. Initial State

• Call Stack: []
• Web APIs: []
• Callback Queue: []

2. After `console.log('Start')`:

• Call Stack: [console.log]
• Web APIs: []
• Callback Queue: []

3. After `setTimeout`:

• Call Stack: []
• Web APIs: [setTimeout]
• Callback Queue: []

4. After `console.log('End')`:

• Call Stack: [console.log]
• Web APIs: [setTimeout]
• Callback Queue: []

5. 2 Seconds Later:

• Call Stack: []
• Web APIs: []
• Callback Queue: [setTimeout callback]

6. Callback Execution:

• Call Stack: [setTimeout callback]
• Web APIs: []
• Callback Queue: []

Conclusion

• The event loop ensures that JavaScript can handle asynchronous operations efficiently. By understanding the call stack, web APIs, and the callback queue, you can grasp how JavaScript manages to execute asynchronous code without blocking the main thread, making your applications more responsive and efficient.