Why is the order of response different when calling async calls iteratively using for-each and for-of?

36 Views Asked by At

I am trying to wrap my head around working of javascript asynchronous functions in loop. Please follow the code snippet below

const sleep = async(delay, input) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(input);
    }, delay);
  });
};

const promises = [sleep(500, 1), sleep(1000, 3), sleep(750, 2)];

(async() => {
  console.time('runTime');
  const res1 = [];
  const res2 = [];

  promises.forEach(async(promise) => {
    const res = await promise;
    res1.push(res);
  });

  console.log('logging forEach loop response-1', res1);

  for (const promise of promises) {
    const res = await promise;
    res2.push(res);
  }

  console.log('logging forEach loop response-2', res1);
  console.log('logging for loop response', res2);

  console.timeEnd('runTime');
})();

The output printed for above snippet is as below

logging forEach loop response-1 []
logging forEach loop response-2 [ 1, 2, 3 ]
logging for loop response [ 1, 3, 2 ]
runTime: 1.011s

Why is the order of output is different in forEach response-2 than in for response? Any explanation will be very helpful.

EDIT: My apologies for the vauge question earlier. But there are two queries in particular which I am not able to unravel

  1. How the whole snippet takes ~1s to execute. I understand the logging forEach loop response-1 logs the empty array because callbacks in forEarch are async but entire forEach is not, and array is not yet populated after forEach has finished. But in the case of for-of loop shouldn't it have taken ~2.25s to execute, because it awaits for 0.5s, 1s and 0.75s respectively in each iteration?

  2. How the sequence of output logged in logging forEach loop response-2 is in the order of delay as opposed to for-of loop. Is it because in forEach an separate instance of anonymous callback is created and each callback is resolved in order of delay and hence the output. But if that's the case the my question #1 still unclear why for-of loop takes ~1s and not ~2.25s.

In this post I am able to understand the reason for #2 partially but still as per my understanding and what I read, why the runtime of for-of loop is not ~2.25s?

0

There are 0 best solutions below