Understanding the Event Loop in JavaScript

The event loop is a crucial concept in JavaScript that manages the execution of asynchronous operations. To understand why setTimeout(…, 0) does not execute immediately, let's break down the order of operations in your provided code.

Code Analysis

1console.log('1');
2
3setTimeout(() => {
4  console.log('2');
5}, 0);
6
7Promise.resolve().then(() => {
8  console.log('3');
9});
10
11console.log('4');

1console.log('1');
2
3setTimeout(() => {
4  console.log('2');
5}, 0);
6
7Promise.resolve().then(() => {
8  console.log('3');
9});
10
11console.log('4');

The expected output is 1, 4, 3, 2, which might seem counterintuitive at first. Here's what's happening:

Order of Operations

1. Synchronous Code: The code is executed line by line, so console.log('1') and console.log('4') are executed immediately.
2. Macrotasks and Microtasks: JavaScript has two types of tasks:
   • Macrotasks: setTimeout, setInterval, and other asynchronous operations that are scheduled to run at a later time.
   • Microtasks: Promise.resolve().then(), async/await, and other operations that are executed in the current iteration of the event loop.
3. Microtasks Execution: After the synchronous code is executed, the event loop checks for microtasks. In this case, Promise.resolve().then() is a microtask, so console.log('3') is executed.
4. Macrotasks Execution: Finally, the event loop checks for macrotasks. Since setTimeout(…, 0) is a macrotask, console.log('2') is executed last.

Async/Await and the Event Loop

async/await is built on top of promises and uses microtasks to execute asynchronous operations. When you use await, the execution is paused, and the event loop continues to execute other tasks. Once the awaited operation is complete, the execution is resumed, and the remaining code is executed as a microtask.

Example with Async/Await

1console.log('1');
2
3setTimeout(() => {
4  console.log('2');
5}, 0);
6
7async function example() {
8  console.log('3');
9  await Promise.resolve();
10  console.log('4');
11}
12
13example();
14
15console.log('5');

1console.log('1');
2
3setTimeout(() => {
4  console.log('2');
5}, 0);
6
7async function example() {
8  console.log('3');
9  await Promise.resolve();
10  console.log('4');
11}
12
13example();
14
15console.log('5');

In this example, the output will be 1, 3, 5, 4, 2. The async function is executed synchronously until it reaches the await statement. Then, the event loop continues to execute other tasks, and the remaining code is executed as a microtask.

Conclusion

In summary, the order of operations in JavaScript is:

1. Synchronous code
2. Microtasks (e.g., Promise.resolve().then(), async/await)
3. Macrotasks (e.g., setTimeout, setInterval)

Understanding this order is crucial for writing efficient and predictable asynchronous code in JavaScript.