Array.prototype.forEach() function does not await..

Recently I discovered that Array.prototype.forEach() function is not suitable for 'awaitable' functions. Let's have a look at an example.

const getAsyncData = (n) => {
   return new Promise((resolve, reject) => {
      setTimeout(() => resolve(n), 500)
   })
};

const arr = [1,2,3,4,5];

//forEach example
(async () => {
   let total = 0;
   arr.forEach(async n => {
      let res = await getAsyncData(n);
      console.log(res);
      total += res;
   });
  
   console.log('total = ' + total);
})();

1. const getAsyncData = (n) => {
2. return new Promise((resolve, reject) => {
3. setTimeout(() => resolve(n), 500)
4. })
5. };
7. const arr = [1,2,3,4,5];
9. //forEach example
10. (async () => {
11. let total = 0;
12. arr.forEach(async n => {
13. let res = await getAsyncData(n);
14. console.log(res);
15. total += res;
16. });
18. console.log('total = ' + total);
19. })();

const getAsyncData = (n) => {
   return new Promise((resolve, reject) => {
      setTimeout(() => resolve(n), 500)
   })
};

const arr = [1,2,3,4,5];

//forEach example
(async () => {
   let total = 0;
   arr.forEach(async n => {
      let res = await getAsyncData(n);
      console.log(res);
      total += res;
   });
  
   console.log('total = ' + total);
})();

I expected that forEach will await for every call of the getAsyncData() function so that to calculate total correctly, but surprisingly the result was different.

total = 0
1
2
3
4
5

Obviously, forEach ignores await keyword and quits immediately so total is not calculated.

To make await working properly I replaced forEach with for .. of

//for of example
(async () => {
   let total = 0;
   for (let n of arr){
      let res = await getAsyncData(n);
      console.log(res);
      total += res;
   }
  
   console.log('total = ' + total);
})();

1. //for of example
2. (async () => {
3. let total = 0;
4. for (let n of arr){
5. let res = await getAsyncData(n);
6. console.log(res);
7. total += res;
8. }
10. console.log('total = ' + total);
11. })();

//for of example
(async () => {
   let total = 0;
   for (let n of arr){
      let res = await getAsyncData(n);
      console.log(res);
      total += res;
   }
  
   console.log('total = ' + total);
})();

That approach gives expected result:

1
2
3
4
5
total = 15

Alternatively, we can also use Promise.all function if processing order does not matter

//Promise.all example
(async () => {
   let total = 0;
  
   total = await Promise.all(arr.map(n => getAsyncData(n)))
      .then(results => results.reduce((acc, el) => acc + el));
  
   console.log('total = ' + total);
})();

1. //Promise.all example
2. (async () => {
3. let total = 0;
5. total = await Promise.all(arr.map(n => getAsyncData(n)))
6. .then(results => results.reduce((acc, el) => acc + el));
8. console.log('total = ' + total);
9. })();

//Promise.all example
(async () => {
   let total = 0;
  
   total = await Promise.all(arr.map(n => getAsyncData(n)))
      .then(results => results.reduce((acc, el) => acc + el));
  
   console.log('total = ' + total);
})();