Why does Async/Await work properly when the loop is inside the async function and not the other way around?

Question

I have three snippets that loop three times while awaiting on a promise.

In the first snippet, it works as I expect and the value of i is decremented with each await.

let i = 3;

(async () => {
  while (i) {
    await Promise.resolve();
    console.log(i);
    i--;
  }
})();

Output:

3
2
1

---

In the second one, the value of i is continuously decremented until it reaches zero and then all the awaits are executed.

let i = 3;

while (i) {
  (async () => {
    await Promise.resolve();
    console.log(i);
  })();
  i--;
}

Output:

0
0
0

---

Lastly, this one causes an Allocation failed - JavaScript heap out of memory error and doesn't print any values.

let i = 3;
while (i) {
  (async () => {
    await Promise.resolve();
    console.log(i);
    i--;
  })();
}

---

Can someone explain why they exhibit these different behaviors? Thanks.

Answer 1

Concerning your second snippet:

Caling an async function without awaiting it's result is called fire and forget. You tell JavaScript that it should start some asynchronous processing, but you do not care when and how it finishes. That's what happens. It loops, fires some asynchronous tasks, when the loop is done they somewhen finish, and will log 0 as the loop already reached its end. If you'd do:

await (async () => {
  await Promise.resolve();
  console.log(i);
})();

it will loop in order.

Concerning your third snippet:

You never decrement i in the loop, therefore the loop runs forever. It would decrement i if the asynchronous tasks where executed somewhen, but that does not happen as the while loop runs crazy and blocks & crashes the browser.

 let i = 3;
 while(i > 0) {
   doStuff();
 }