#346 Promise Order

easy
javascript
promises

What will be the order of 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 me explain the execution order of this code:

The output will be: 1, 2, 3, 4, 7, 5, 6, 9, 8

Here's why:

  1. First, synchronous code executes:

    • console.log(1) executes first
    • Promise constructor executes synchronously, so console.log(2) and console.log(3) run next
    • console.log(4) runs next
    • console.log(7) runs after that

  2. Then microtasks (Promise callbacks) execute:

    • First .then() executes, printing console.log(5)
    • Second .then() executes, printing console.log(6)

  3. Finally, macrotasks (setTimeout callbacks) execute:

    • setTimeout with 0ms delay prints console.log(9)
    • setTimeout with 10ms delay prints console.log(8)

Key points to understand:

  • Promise constructor runs synchronously
  • Promise .then() callbacks are microtasks and execute after all synchronous code but before macrotasks
  • setTimeout callbacks are macrotasks and execute after microtasks
  • Between two setTimeout, the one with shorter delay executes first (0ms vs 10ms)