Event Loop and Asynchronous JavaScript

The Rules of Engagement

Let's start with a quick recap of the execution order rules, which will be our guide throughout this lesson:

1. Synchronous Code First: All synchronous code in the current execution context is run to completion. Anything that is not inside a callback or handler runs immediately.
2. Queue Asynchronous Tasks: As the synchronous code runs, calls to asynchronous APIs like setTimeout and Promise handlers (.then(), .catch()) don't execute their callbacks immediately. Instead, they are placed in their respective queues.
   • setTimeout, setInterval, I/O, UI events schedule macrotasks.
   • Promise handlers (.then, .catch, .finally) schedule microtasks.
3. Process Microtasks: Once the call stack is empty, the event loop processes all tasks in the microtask queue. If a microtask schedules another microtask, that new task is added to the end of the same queue and will also run before moving on.
4. Process One Macrotask: After the microtask queue is completely empty, the event loop picks up one task from the macrotask queue and executes it.
5. Repeat: The cycle (run all microtasks, then run one macrotask) repeats.

A Foundational Example

Let's begin by analyzing a classic code snippet that mixes all three types of operations: synchronous, a macrotask, and a microtask.

console.log('script start');

setTimeout(function() {
  console.log('setTimeout');
}, 0);

Promise.resolve().then(function() {
  console.log('promise1');
}).then(function() {
  console.log('promise2');
});

console.log('script end');

Before looking at the answer, try to predict the output using the rules above.

Now, let's read a concise explanation that breaks down this exact scenario.

As the article explains, the execution proceeds as follows:

1. Synchronous Pass:
   • console.log('script start') runs. Output: script start
   • setTimeout is called. Its callback is scheduled as a macrotask.
   • Promise.resolve().then(...) is called. The first .then() callback is scheduled as a microtask.
   • console.log('script end') runs. Output: script start, script end
2. End of Initial Script: The call stack is now empty.
3. Microtask Phase: The event loop processes the microtask queue.
   • The first microtask runs: console.log('promise1'). Output: script start, script end, promise1.
   • This .then() completes, and since it returns undefined (which is promise-like for undefined), it schedules the next .then() callback as a new microtask.
   • The event loop sees the microtask queue is not empty and runs the new microtask: console.log('promise2'). Output: script start, script end, promise1, promise2.
4. Macrotask Phase: The microtask queue is now empty. The event loop picks one task from the macrotask queue.
   • The setTimeout callback runs: console.log('setTimeout'). Final Output: script start, script end, promise1, promise2, setTimeout.

Visualizing the Queues in Action

Watching this process unfold visually can solidify the mental model. We'll revisit the quiz from the end of our last lesson, but this time our goal is to actively trace it, not just test our knowledge.

The key takeaway from that video's example is seeing how a microtask (queueMicrotask) can itself add another microtask to the queue, and how the event loop diligently empties that entire queue before ever considering the setTimeout callback waiting in the macrotask queue.

A More Complex Challenge

You're now ready for a more intricate puzzle. This one includes a macrotask being scheduled from within a microtask, a common pattern in real-world code.

Carefully analyze the following code snippet. Write down what you believe the final output will be.

console.log(1);

setTimeout(() => console.log(2));

Promise.resolve().then(() => console.log(3));

Promise.resolve().then(() => setTimeout(() => console.log(4)));

Promise.resolve().then(() => console.log(5));

setTimeout(() => console.log(6));

console.log(7);

Once you have your prediction, let's consult a resource that provides a detailed, step-by-step breakdown of the solution.

Let's recap the logic here, as it's a perfect illustration of all the rules working together:

1. Synchronous Pass:
   • console.log(1) and console.log(7) execute.
   • Output so far: 1, 7
2. Queueing Pass:
   • Two setTimeout calls add () => console.log(2) and () => console.log(6) to the macrotask queue.
   • Three .then callbacks are added to the microtask queue: () => console.log(3), () => setTimeout(...), and () => console.log(5).
3. End of Script.
4. Microtask Phase (drain the entire queue):
   • First microtask runs: console.log(3).
   • Second microtask runs: setTimeout(() => console.log(4)). This schedules a new macrotask. The macrotask queue now contains callbacks for 2, 6, and 4.
   • Third microtask runs: console.log(5).
   • Output so far: 1, 7, 3, 5
5. Macrotask Phase (one at a time):
   • The microtask queue is empty. The event loop takes the first item from the macrotask queue: () => console.log(2).
   • Output so far: 1, 7, 3, 5, 2
   • The event loop checks for microtasks again (there are none). It takes the next macrotask: () => console.log(6).
   • Output so far: 1, 7, 3, 5, 2, 6
   • The event loop checks for microtasks again (none). It takes the final macrotask: () => console.log(4).
   • Final Output: 1, 7, 3, 5, 2, 6, 4

Conclusion

In this lesson, we put the theory of the JavaScript concurrency model into practice. By systematically applying the rules of execution, we can reliably predict the output of even complex asynchronous code.

Key Takeaways:

• Prediction is a Process: Tracing execution is not about guessing; it's a step-by-step process of identifying synchronous code, queuing microtasks and macrotasks, and then simulating the event loop's behavior.
• Microtasks Have Priority: The most critical rule is that the event loop will always completely empty the microtask queue after the current script or a macrotask finishes, before doing anything else.
• Tasks Can Schedule Other Tasks: As we saw, a microtask (from a Promise) can schedule a new macrotask (setTimeout), and a macrotask could schedule a new microtask. Understanding how new tasks are added to the queues is part of the puzzle.

What's Next?

You now have a solid grasp of when asynchronous code runs. In the next lesson, we will shift our focus to the core mechanism of modern asynchronous JavaScript: Promises. We will explore the three states of a Promise (pending, fulfilled, rejected), how they transition between these states, and why they are a significant improvement over traditional callbacks. This will build directly on your understanding of the microtask queue.