Understanding the JavaScript Event Loop

JavaScript is a single-threaded language, meaning it can execute only one piece of code at a time. Despite this, JavaScript can handle asynchronous operations efficiently thanks to the event loop.

The event loop is responsible for coordinating the execution of synchronous code, asynchronous callbacks, promises, and browser APIs.

The Call Stack

The call stack is where JavaScript keeps track of function execution. When a function is called, it is pushed onto the stack. When it returns, it is popped off.

  function first() {
    second();
  }

  function second() {
    console.log("Hello from the call stack");
  }

  first();
      

Web APIs

Asynchronous operations such as setTimeout, DOM events, and HTTP requests are handled by Web APIs, not the call stack.

  setTimeout(() => {
    console.log("Executed later");
  }, 1000);
      

Task Queue (Callback Queue)

Once a Web API finishes its task, the callback is placed into the task queue. The event loop monitors this queue.

The Event Loop

The event loop continuously checks whether the call stack is empty. If it is, the event loop pushes the first callback from the queue onto the stack.

The event loop ensures that asynchronous code runs only after synchronous code has finished executing.

Microtasks vs Macrotasks

Promises use the microtask queue, which has higher priority than the task queue.

  console.log("Start");

  setTimeout(() => {
    console.log("Timeout");
  }, 0);

  Promise.resolve().then(() => {
    console.log("Promise");
  });

  console.log("End");
      

The output will be:

  Start
  End
  Promise
  Timeout
      

Conclusion

Understanding the event loop is critical for writing efficient and predictable JavaScript. It explains why certain async operations run before others and helps developers avoid performance bottlenecks and unexpected behavior.