#7 Promise Order

easy
javascript
promise
event loop

What will be order of console logs in the following code?

console.log(1)
const promise = new Promise((resolve) => {
  console.log(2)
  resolve()
  console.log(3)
})

console.log(4)

promise.then(() => {
  console.log(5)
}).then(() => {
  console.log(6)
})

console.log(7)

setTimeout(() => {
  console.log(8)
}, 10)

setTimeout(() => {
  console.log(9)
}, 0)

Let's break down the code execution:

  1. console.log(1): This is a synchronous operation, and it's the first line executed.

  2. const promise = new Promise((resolve) => { ... }): The promise constructor callback is synchronous, so console.log(2) and console.log(3) are executed next, in order.

  3. console.log(4): This is another synchronous operation.

  4. promise.then(() => { console.log(5) }).then(() => { console.log(6) }): The then callbacks are added to the microtask queue and will be executed after the current synchronous code. So, they are not executed immediately.

  5. console.log(7): Another synchronous operation.

  6. setTimeout(() => { console.log(8) }, 10): This sets up a timer, but it won't immediately execute. It's added to the callback queue and will be executed after the specified timeout (10 milliseconds).

  7. setTimeout(() => { console.log(9) }, 0): Similarly, this is also added to the callback queue with a timeout of 0 milliseconds. Despite the timeout being 0, it still goes to the callback queue and waits for the current synchronous code to finish.

Now, let's look at the order of execution:

  • Synchronous code: 1, 2, 3, 4, 7
  • Promise resolution (microtask queue): 5, 6
  • setTimeout callbacks (callback queue): 9, 8

So, the final order is 1, 2, 3, 4, 7, 5, 6, 9, 8. The key points are the asynchronous nature of promises (handled in the microtask queue) and the setTimeout callbacks being processed in the callback queue after the current synchronous code is completed.