Skip to content Skip to sidebar Skip to footer

Asynchronous Execution Order In Javascript

I don't understand why following execution output is 1 3 4 2 6 5;

Solution 1:

Here's how your code executes:

  1. Promise.resolve() creates a resolved promise which puts () => console.log(2) in the micro-task queue

    queue: [ 
       () => console.log(2)
    ]
    
  2. The IIFE executes in which you have await 6. Awaiting 6 is similar to wrapping it in Promise.resolve(6) and then awaiting it: await Promise.resolve(6).

    When the operand of await is not a promise, await creates a native promise and uses the operand's value to resolve that promise

    queue: [ 
       resolve(6),
       () => console.log(2)
    ]
    
  3. 1 is logged on the console

    queue: [ 
       resolve(6),
       () =>console.log(2)
    ]
    
    consoleoutput: 1
  4. Second IIFE executes where you have await console.log(3). This is like await undefined because console.log(3) will execute, 3 will be logged on the console and the return value of console.log, i.e. undefined will be awaited.

    In short, you are awaiting undefined.

    queue: [ 
       resolve(undefined),
       resolve(6),
       () =>console.log(2)
    ]
    
    consoleoutput: 13
  5. Promise.resolve() creates a resolved promise which puts () => console.log(5) in the micro-task queue

    queue: [ 
       () =>console.log(5),
       resolve(undefined),
       resolve(6),
       () =>console.log(2)
    ]
    
    consoleoutput: 13
  6. 4 is logged on the console

    queue: [ 
       () =>console.log(5),
       resolve(undefined),
       resolve(6),
       () =>console.log(2)
    ]
    
    consoleoutput: 134
  7. Script execution end

  8. Event loop will now begin processing the micro-task queue

  9. 2 will be logged on the console because it was queued first

    queue: [ 
       () =>console.log(5),
       resolve(undefined),
       resolve(6)
    ]
    
    consoleoutput: 1342
  10. await 6 resolves with the value 6 which is then passed to console.log. As a result 6 is logged on the console

    queue: [ 
       () =>console.log(5),
       resolve(undefined)
    ]
    
    consoleoutput: 13426
  11. Promise created as a result of await console.log(3) resolves with the value of undefined

    queue: [ 
       () =>console.log(5)
    ]
    
    consoleoutput: 13426
  12. 5 is logged on the console

    queue: [ ]
    
    console output:134265
  13. Done.


Note: Your code shouldn't rely on the timing and order in which different unrelated promises are resolved.

Solution 2:

1 is printed first because of order of execution. 3 is printed as code is executed because console.log() is not an asynchronous operation. Does not matter if you put await in front of it. 4 is again printed because of order of execution.

Now, rest of the order of execution is due to asynchronous operations. The 3 statements are printed in an asynchronous manner after the above 3 statements are executed.

Solution 3:

There are two sequences here: 1 3 4 and 2 6 5. The first is produced on the first tick (before any promises have resolved, and the second on the second tick (after promise resolution).

(async() => await console.log(3))(); writes 3 to the log before the await, so the 3 appears before any promises resolve, and between 1 and 4 because of the order of the statements. (Note that the await in this line resolves to undefined, because console.log doesn't return anything).

For the sequence 2 6 5, all of the console logs come after a promise resolves (or, equivalently, an await statement), and they're in natural order otherwise.

Post a Comment for "Asynchronous Execution Order In Javascript"