Differences between two styles of async/await in JavaScript from a performance perspective

Question

I have come across two common styles of async/await JavaScript code:

 for await (const a of [x1, x2, x3, x4]) 
 { 
   //do stufF
 }

and

 [x1, x2, x3, x4].forEach(async (a) { 
  //do stuff
 }

Are there any performance (or other) advantages to either of these?

edit: Assume that each instance of x is a promise.

I don't think the second one works properly? (https://stackoverflow.com/questions/37576685/using-async-await-with-a-foreach-loop) — SuperStormer, Jun 29 '22 at 20:47
[`for await ... of` is only for async iterables](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/for-await...of) not anything async that you can iterate over. — Heretic Monkey, Jun 29 '22 at 20:50
You should use promises (await/async) only for asynchronous processes otherwise it's just an overhead for the synchronous anyway (round robin) flow of JS. Also in your question you pointed both async ways... forEach is a bit heavier than for, but it's not your question, is it ? — EvgenyKolyakov, Jun 29 '22 at 20:57
A [`for await` loop on an array does not work properly](https://stackoverflow.com/questions/59694309/for-await-of-vs-promise-all/59695815#59695815). And [neither does an async `forEach` loop](https://stackoverflow.com/q/37576685/1048572) — Bergi, Jun 29 '22 at 21:52

Quentin · Accepted Answer · 2022-06-29T21:01:25.017

The for loop will not continue to the next entry in the loop until the promise has settled.

The forEach loop will trigger the async function you pass to it for each promise immediately and, assuming you await the promise inside that function, it will go to sleep until the promise resolves.

Given that your variables contain promises, whatever work they are doing is already being done in parallel, so the only decision factor here is if you want to continue their processing in order or as soon as possible.

(async function() {

  const x1 = new Promise(r => setTimeout(() => {
    console.log('Resolve x1');
    r("x1")
  }, 3500));
  const x2 = new Promise(r => setTimeout(() => {
    console.log('Resolve x2');
    r("x2")
  }, 4000));
  const x3 = new Promise(r => setTimeout(() => {
    console.log('Resolve x3');
    r("x3")
  }, 3000));
  const x4 = new Promise(r => setTimeout(() => {
    console.log('Resolve x4');
    r("x4")
  }, 2000));

  for await (const a of [x1, x2, x3, x4]) {
    console.log(`${a} available inside loop`);
  }

})();

(async function() {

  const x1 = new Promise(r => setTimeout(() => {
    console.log('Resolve x1');
    r("x1")
  }, 3500));
  const x2 = new Promise(r => setTimeout(() => {
    console.log('Resolve x2');
    r("x2")
  }, 4000));
  const x3 = new Promise(r => setTimeout(() => {
    console.log('Resolve x3');
    r("x3")
  }, 3000));
  const x4 = new Promise(r => setTimeout(() => {
    console.log('Resolve x4');
    r("x4")
  }, 2000));

  [x1, x2, x3, x4].forEach(async function (a) {
    const value = await a;
    console.log(`${value} available inside loop`);
  });

})();

Thank you Quentin, I really like the interactive code example too, that's very useful to get my head around the differences — Barney Chambers, Jun 29 '22 at 21:00
-1 for not pointing out how utterly broken both of the approaches are. Neither will work in the presence of errors, they will crash the application with unhandled rejections. — Bergi, Jun 29 '22 at 21:54

Differences between two styles of async/await in JavaScript from a performance perspective

1 Answers1