DEV Community

GregLimo
GregLimo

Posted on

How to execute javascript foreach in series?

Hey buddies, On a piece of code I am working on there is a number of async functions that operate on an array of data. The way I would expect to handle this is using the standard forEach function. The problem found is that even if you await in the callback in the for loop this does not help:

const takesLongToRun = async additionalText => {
  setTimeout (() => {
    console.log (`Long function done :) ${additionalText}`);
  }, 3000);
};

const mainFunc = async () => {
  const numbers = [1, 2, 3, 4];

  numbers.forEach (async num => {
    console.log (num);
    await takesLongToRun (num);
  });
};

mainFunc ();
Enter fullscreen mode Exit fullscreen mode

which outputs:

1
2
3
4
Long function done :) 1
Long function done :) 2
Long function done :) 3
Long function done :) 4
Enter fullscreen mode Exit fullscreen mode

So the functions do run in order but it doesn't wait for each value to complete before proceeding to next, what I expect is:

1
Long function done :) 1
2
Long function done :) 2
3
Long function done :) 3
4
Long function done :) 4
Enter fullscreen mode Exit fullscreen mode

After doing a bit of googling I found that this is an issue with forEach and instead the for of syntax seem to solve it in theory. I changed the code as below but still worked the same.

const mainFunc = async () => {
  const numbers = [1, 2, 3, 4];
  for (const num of numbers) {
    console.log (num);
    await takesLongToRun (num);
  }
};
mainFunc()
Enter fullscreen mode Exit fullscreen mode

The result is still the same, I will really appreciate any insight on this from anyone who has experienced it before. Thanks.

Discussion (0)