Why does Array.prototype.forEach() not recognize a

Question

This question already has answers here:

Using async/await with a forEach loop (18 answers)

Closed 2 years ago.

Using await in a for loop within an async function provides the expected result of the execution awaiting the completion of the current Promise within the iteration

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

(async() => {

  for (var i = 0; i < story.length; i++) {
    await new Promise(function(resolve) {
      setTimeout(function() {
        resolve(story[i])
      }, 1000)
    }).then(function(chapter) {
      document.body
        .appendChild(document.createTextNode(chapter));
    });
  }

})()

Why does Array.prototype.forEach() not provide the same functionality of awaiting the fulfillment of the current Promise when await is using within the callback passed to .forEach()?

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

(async() => {

  story.forEach(async function(chapterUrl) {
    // does not await for Promise fulfillment
    await new Promise(function(resolve) {
      setTimeout(function() {
        resolve(chapterUrl)
      }, 1000)
    }).then(function(chapter) {
      document.body
      .appendChild(document.createTextNode(chapter));
    });
  });
  
})();

Answer 1

await suspends the current function until the Promise is resolved. When using multiple await calls in a for loop, they are all executed within the same block scope and, thus, wait for the previous one to finish before continuing.

When using the forEach function, each iteration of the loop is run in its own scope, so each await has no effect on the others.