The Challenge

// language: javascript
console.log('1');

setTimeout(() => console.log('2'), 0);

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

process.nextTick(() => console.log('4'));

new Promise((resolve) => {
    console.log('5');
    resolve();
}).then(() => console.log('6'));

console.log('7');

The Answer and Explanation

1, 5, 7, 4, 3, 6, 2

1. Synchronous Code Execution:
   • console.log('1'); executes first and prints 1.
   • console.log('5'); inside the new Promise executes next and prints 5.
   • console.log('7'); executes and prints 7.
2. Asynchronous Code Scheduling:
   • setTimeout(() => console.log('2'), 0); schedules a macrotask.
   • Promise.resolve().then(() => console.log('3')); schedules a microtask.
   • process.nextTick(() => console.log('4')); schedules a microtask. Note: process.nextTick has priority over other microtasks.
   • The new Promise’s .then(() => console.log('6')); schedules a microtask.
3. Execution of Microtasks:
   • Microtasks are executed after the current synchronous code completes but before any macrotasks.
   • process.nextTick(() => console.log('4')); executes first and prints 4.
   • Promise.resolve().then(() => console.log('3')); executes next and prints 3.
   • new Promise().then(() => console.log('6')); executes last among microtasks and prints 6.
4. Execution of Macrotasks:
   • The macrotask from setTimeout executes and prints 2.

Note: If you are seeing 1, 5, 7, 3, 6, 2, 4, it might indicate a difference in the environment where the code is being executed. Typically, process.nextTick should always execute before other microtasks like Promises.

Understanding Microtasks and Macrotasks in JavaScript

• setTimeout
• setInterval
• requestAnimationFrame
• I/O operations

• Promises (.then, .catch, .finally)
• process.nextTick (Node.js)
• MutationObserver

1. Execute synchronous code: Run all the code that is not inside any callback or asynchronous function.
2. Process microtasks: After completing the synchronous code, the event loop will process all the tasks in the microtask queue before moving on to the next macrotask.
3. Process macrotasks: Only after the microtask queue is empty will the event loop move on to the next macrotask.