Understanding the NodeJS Event Loop: Why Microtasks are Executed After Macrotasks

Explore the intricacies of the `NodeJS` event loop and discover why microtasks are executed after macrotasks, with clear examples and solutions to common confusion.
---
This video is based on the question https://stackoverflow.com/q/66071786/ asked by the user 'Ievgeniii' ( https://stackoverflow.com/u/13628023/ ) and on the answer https://stackoverflow.com/a/66071913/ provided by the user 'Nick Parsons' ( https://stackoverflow.com/u/5648954/ ) at 'Stack Overflow' website. Thanks to these great users and Stackexchange community for their contributions.

Visit these links for original content and any more details, such as alternate solutions, latest updates/developments on topic, comments, revision history etc. For example, the original title of the Question was: NodeJS event loop wrong order

Also, Content (except music) licensed under CC BY-SA https://meta.stackexchange.com/help/l...
The original Question post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license, and the original Answer post is licensed under the 'CC BY-SA 4.0' ( https://creativecommons.org/licenses/... ) license.

If anything seems off to you, please feel free to write me at vlogize [AT] gmail [DOT] com.
---
Understanding the NodeJS Event Loop: Why Microtasks are Executed After Macrotasks

Node.js is a powerful environment for building server-side applications, but it can be confusing for developers, especially when it comes to understanding its event loop. One common point of confusion is how the event loop handles microtasks and macrotasks, particularly the order in which they are executed. In this guide, we will break down a specific issue related to this topic and provide a detailed explanation that clarifies the behavior of Node.js’s event loop.

The Problem

Consider the following Express code example:

[[See Video to Reveal this Text or Code Snippet]]

When executed, the console output appears as:

[[See Video to Reveal this Text or Code Snippet]]

This leads to a crucial question: Why is the microtask (the then callback) executed after the macrotask (the setTimeout callback)?

Understanding Microtasks and Macrotasks

Before we dive into the explanation, let's define what microtasks and macrotasks are:

Macrotasks: These are tasks that are executed in the background and can be processed after the current stack execution is completed. Examples include setTimeout, setInterval, and I/O operations.

Microtasks: These tasks are meant to handle callbacks that run after the currently executing script has finished but before processing macrotasks. Promises and mutation observers are prime examples of microtasks.

The Explanation

To understand why the outputs are in this order, we must look at how Node.js handles the event loop:

Task Queuing: When your code runs, setTimeout is called and its callback (console output "setTimeout") is queued as a macrotask. Meanwhile, User.findOne() is called which itself is a non-blocking operation. The promise returned by findOne() doesn’t resolve immediately, so no microtask is queued at that point.

Synchronous Execution: After queuing the macrotask, the next line (console.log('console.log')) executes synchronously and is logged immediately.

Completion of Current Execution: After all synchronous code runs, the event loop will first handle microtasks before moving on to macrotasks. However, in your code, the promise is not resolved yet because findOne() is still executing. Therefore, nothing is added to the microtask queue at this point.

Processing Macrotasks: The event loop now checks the macrotask queue. Since setTimeout has been queued and is ready, it gets executed and logs "setTimeout" to the console.

Final Step — Microtasks: Once the macrotask is complete, the loop checks for any microtasks to execute. When the database operation completes, the then() callback for the promise is finally queued and executed, logging "user" to the console.

Comparison with Browser Example

In contrast, consider the following code that works correctly in both the browser and Node.js:

[[See Video to Reveal this Text or Code Snippet]]

The output here would be:

[[See Video to Reveal this Text or Code Snippet]]

Breakdown:

The setTimeout is queued as a macrotask, but the executor for the Promise runs synchronously.

The promise resolves only after the loop completes, allowing the microtask to be queued and executed before the macrotask.

Conclusion

When working with asynchronous code in Node.js, understanding the event loop and the execution order of microtasks and macrotasks is essential to avoiding confusion in your applications. In this specific case, the timing of the promise resolution in relation to the macrotask from setTimeout results in the microtask being executed after.

Understanding these nuances will aid in debugging and optimizing your Node.js applications. Happy coding!