0

I have this piece of code and I'm struggling to understand why the log order is "1,3,2".

(async () => {
 
  const doSomething = async () => {
    console.log("1");
  };
 
  await doSomething();
  console.log("2");

})();

console.log("3");

Async/await is implemented under the hood with promises. With promises even if a promise resolves immediately the callback within the then is added as a microtask, and the current callstack execution continues. Then once the call stack is completed the microtasks are run.

So the way I read the code, the await keyword before the doSomething() function means that the rest of the code in the function after the await will be wrapped in a then call, giving control back to the caller of the function. Thus "3" should be logged first, so the order should be "3,1,2"?

What is the control flow? What actually happens when the javascript translator comes across an await keyword?

Igor
  • 60,821
  • 10
  • 100
  • 175
user14216042
  • 117
  • 7
  • 1
    _"the await keyword before the doSomething() function means that the rest of the code in the function after the await will be wrapped in a then call"_ and _"Thus "3" should be logged first, so the order should be "3,1,2"?"_ are contradicting. First, the function is evaluated (log `1`). Then, the await will give back the control to the caller (`3`). Then, evaluate the micro task (log `2`) – jabaa May 06 '22 at 12:26
  • 1
    Does this answer your question? [Does awaiting a non-Promise have any detectable effect?](https://stackoverflow.com/questions/55262996/does-awaiting-a-non-promise-have-any-detectable-effect) – Igor May 06 '22 at 12:26
  • `Async/await is implemented under the hood with promises` - this is **100% NOT TRUE** at all. Instead async/await is a syntax sugar for handling promises. The difference is it's like saying frying pans are implemented under the hood with omelettes - that's not true, frying pans were created to handle omelettes - they are not made from omelettes (most of them are made of some sort of metal) – slebetman May 06 '22 at 12:31
  • @Igor, I think its similar, if it sounds like a good idea to you I might link it in an answer to my own question? I think the main thing I didn't understand was that on the line "await doSomething()", doSomething() is executed which then returns a promise, which is then awaited on. Before I was thinking that await was awaiting on the function to be executed, which is incorrect. Have I explained that correctly? – user14216042 May 06 '22 at 12:41

1 Answers1

2

the await keyword before the doSomething() function means that the rest of the code in the function after the await will be wrapped in a then call, giving control back to the caller of the function.

Yes:

(() => {
  const doSomething = () => {
    console.log("1");
    return Promise.resolve();
  };
 
  return doSomething().then(() => {
    console.log("2");
  });
})();

console.log("3");

Thus "3" should be logged first

No. Logging "1" is not delayed by any promise.

Bergi
  • 630,263
  • 148
  • 957
  • 1,375