If you're looking to streamline this process with ES6, one efficient approach is to implement a for..of loop.

const executeAsyncLoop = async (array) => {
  const allResults = []

  for (const item of array) {
    const result = await asyncOperation(item)
    allResults.push(result)
  }

  return allResults
}

Alternatively, you can handle multiple async requests concurrently by utilizing Promise.all() like so:

const executeAsyncLoop = async (array) => {
  const promises = array.map(asyncOperation)
  await Promise.all(promises)
  console.log(`All async tasks are now finished!`)
}

let numbers = [1,2,3,4,5,6,7,8,9,10];

In case you are executing asynchronous tasks within the loop, you can enclose it within a promise ...

let promise = new Promise((resolve, reject) => {
    numbers.forEach((value, index, array) => {
        console.log(value);
        if (index === array.length -1) resolve();
    });
});

promise.then(() => {
    console.log('Task completed!');
});

In the scenario where you have a loop containing an async task that you need to wait for completion, you can employ the for await syntax.

for await (const file of files) {
    let uploadedFile = await uploadDocument(file);
};

let count = 20; //this code block runs subsequently

Opt for for of over forEach. Here's an example:

for (const element of list) {
  //perform an action
}
console.log("completed");

The message "completed" will be displayed upon completing the loop.

Utilizing map() along with Promise.all() is a more efficient approach compared to using forEach() since the former allows for handling promises in an organized manner.

let numbers = [1, 2, 3, 4, 5, 6]

const doubleAsync = (num) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve(num * 2)
    }, Math.random() ); // Math.random returns a random number between 0 and 1
  })
}

let promises = numbers.map(async (num) => {
  let result = await doubleAsync(num)
  return new Promise((resolve, reject) => {resolve(result)})
})

Promise.all(promises)
.then((results) => {
  // perform desired actions on the results
  console.log(results)
})

https://i.sstatic.net/K8rk0.png

A foolproof method to ensure that all elements in a forEach() loop have completed execution.

const testArray = [1,2,3,4]
let count = 0

await new Promise( (resolve) => {
  testArray.forEach( (num) => {
    try {
      //implementing actual logic
      num = num * 2
    } catch (e) {
      // error handling
      console.log(e)
    } finally {
      // crucial step
      count += 1
      if (count == testArray.length) {
        resolve()
      }
    }
  })  
})

The concept is similar to the answer that uses an index to keep track. However, in real-world scenarios, if an error occurs, the index method may not tally accurately. Hence, this solution is more resilient.

Thanks

let myArray = [5, 10, 15];
let myResults = [];
let count = 0;

const asyncTask = (element, callback) =>
  setTimeout(() => callback(element * 5), 100 - element * 5);

new Promise((resolve, reject) => {
  myArray.forEach((element) => {
    asyncTask(element, (result) => {
      myResults.push(result);
      count++;
      if (count === myArray.length) resolve();
    });
  });
}).then(() => {
  console.log(myResults); // [75, 50, 25]
});

// or
// myPromise = new Promise(...);
// ...
// myPromise.then(...);

The order of results in the "myResults" array may not match the order of elements in the original array, depending on the completion time of each asyncTask() function for the elements.

Although I cannot confirm the efficiency of this particular version compared to other implementations, I recently utilized this approach when dealing with an asynchronous function nested within a forEach loop. This method does not rely on promises, mapping, or for-of loops:

// Recursive calculation of the n'th triangular number (also known as factorial addition)
function triangularNumber(n) {
    if (n <= 1) {
        return n
    } else {
        return n + triangularNumber(n-1)
    }
}

// Sample function that waits for each iteration of forEach() to finish
function testFunction() {
    // Example array containing values from 0 to USER_INPUT
    var USER_INPUT = 100;
    var EXAMPLE_ARRAY = Array.apply(null, {length: USER_INPUT}).map(Number.call, Number) // [ 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, n_final... ] where n_final = USER_INPUT-1

    // Actual function implementation with your specific array
    var arrayLength = EXAMPLE_ARRAY.length
    var countMax = triangularNumber(arrayLength);
    var counter = 0;
    EXAMPLE_ARRAY.forEach(function(entry, index) {
        console.log(index+1); // Display index as an example (may exhibit asynchronous behavior)

        counter += 1;
        if (triangularNumber(counter) == countMax) {

            // Execute function once forEach() is complete
            completionFunction();
        } else {
            // Example to print counting values when maximum count is not reached
            // This part would typically be excluded
            console.log("Counter index: "+counter);
            console.log("Count value: "+triangularNumber(counter));
            console.log("Count max: "+countMax);
        }
    });
}
testFunction();

function completionFunction() {
    console.log("COUNT MAX REACHED");
}

Inspect and validate a counter at the conclusion of each distinct pathway within the code, including callback functions. For instance:

const fs = require('fs');

/**
 * @description Eliminate files that are older than 1 day
 * @param {String} directory - The directory to clean
 * @return {Promise}
 */
async function purgeFiles(directory) {
  const maxAge = 24*3600000;
  const now = Date.now();
  const cutoff = now-maxAge;

  let filesPurged = 0;
  let filesProcessed = 0;
  let purgedSize = 0;

  await new Promise( (resolve, reject) => {
    fs.readdir(directory, (err, files) => {
      if (err) {
        return reject(err);
      }
      if (!files.length) {
        return resolve();
      }
      files.forEach( file => {
        const path = `${directory}/${file}`;
        fs.stat(path, (err, stats)=> {
          if (err) {
            console.log(err);
            if (++filesProcessed === files.length) resolve();
          }
          else if (stats.isFile() && stats.birthtimeMs < cutoff) {
            const ageSeconds = parseInt((now-stats.birthtimeMs)/1000);
            fs.unlink(path, error => {
              if (error) {
                console.log(`Deleting file failed: ${path} ${error}`);
              }
              else {
                ++filesPurged;
                purgedSize += stats.size;
                console.log(`Deleted file with age ${ageSeconds} seconds: ${path}`);
              }
              if (++filesProcessed === files.length) resolve();
            });
          }
          else if (++filesProcessed === files.length) resolve();
        });
      });
    });
  });

  console.log(JSON.stringify({
    directory,
    filesProcessed,
    filesPurged,
    purgedSize,
  }));
}

// !!CAUTION!! Modify this line! (intentional syntax error in ,')
const directory = ,'/tmp'; // !!CAUTION!! Changeme
purgeFiles(directory).catch(error=>console.log(error));

Having encountered the issue of using multiple promises inside a forEach loop, I found that none of the solutions available at the time were suitable for my needs. To address this, I devised a method using a check array where each promise updates its status upon completion. This approach involves a general promise that oversees the entire process and only resolves when all individual promises have completed. Here is a snippet of the code I implemented:

function WaitForEachToResolve(fields){

    var checked_fields = new Array(fields.length).fill(0);
    const reducer = (accumulator, currentValue) => accumulator + currentValue;

    return new Promise((resolve, reject) => {

      Object.keys(fields).forEach((key, index, array) => {

        SomeAsyncFunc(key)
        .then((result) => {

            // post-processing of result

            checked_fields[index] = 1;
            if (checked_fields.reduce(reducer) === checked_fields.length)
                resolve();
        })
        .catch((err) => {
            reject(err);
        });
      }
    )}
}

When it comes to handling asynchronous data processing, I prefer utilizing async-await over the traditional .then() syntax. Here is how I adapted @Ronaldo's solution to suit my needs:

let finalData = [];
var bar = new Promise(resolve => {
    foo.forEach(async (value, index) => {
        const dataToGet = await abcService.getXyzData(value);
        finalData[index].someKey = dataToGet.thatOtherKey;
        // additional processing can be done here
        if (finalData[dataToGet.length - 1].someKey) resolve();
    });
});

await Promise.all([bar]);
console.log(`finalData: ${finalData}`);

PLEASE NOTE: I made adjustments to the if condition for resolving the promise based on my specific requirements. Feel free to customize it as per your own scenario.

Async/await is being utilized within the loop, allowing for customization of logic. Your own code can be seamlessly integrated.

    let foo = new Promise((resolve, reject) => {
        snapshot.forEach(async (doc) => {
            """Implement your unique logic here using async/await
            """
            const result = await something()
            resolve(result);
        });
    });
    let test = []
    test.push(foo)
    let concepts = await Promise.all(test);
    console.log(concepts);

When it comes to comparing code, I prefer using a for loop.

performAction();
function performAction() {

        for (var i = 0; i < $('span').length;  i++) {
            console.log(i,$('span').eq(i).text() );
            if ( $('span').eq(i).text() == "Share a link to this question"  ) { //  span number 59
                return;
            }
        }

alert('This code will never be executed');

}

In case there are asynchronous (observable) method calls within the for loop, you can utilize the following approach:

await players.reduce(async (a, player) => {
  // Make sure the previous item has finished processing
  await a;
  // Process the current item
  await givePrizeToPlayer(player);
}, Promise.resolve());

For more details, refer to: https://gist.github.com/joeytwiddle/37d2085425c049629b80956d3c618971

Give this a try. It performs just as you envisioned.

let activities : string[] = ['x','y','z'];

try {
  console.log('initiated ' + activities.length);
  for (let i = 0; i < activities.length; i++) {
    await this.executeActivity(activities[i]);
  }
  console.log('completed ' + activities.length);
} catch (error) {
  console.log('Error executing activity: ', error);
}

  async executeActivity(req: string): Promise<void> {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log('activity id ' + req);
        resolve();
        //reject(new Error('error'));
      }, 3000);
    });
  }

One way I handle waiting for completion on each iteration is by utilizing a recursive function. This is particularly useful when dealing with multiple asynchronous HTTP requests that need to be executed one after the other.

const executeRequests = (requestsArray, index) => {
    (...).then(() => {
        index++
        if(requestsArray[index]){
            executeRequests(requestsArray, index);
        } else {
            // reached the end of the loop
        }
    })
}

// initiating the loop
executeRequests(requestsArray, 0);

While there are many great responses to this question, I found that they were not particularly helpful in my specific case. If you need to perform asynchronous tasks in each iteration, such as using a for of loop, the performance can be negatively impacted as each iteration will wait for the previous one to complete before proceeding.

Instead, a more efficient approach is to use a counter within a forEach loop to track the processing of all array items. Once all items have been processed, the forEach loop can be considered complete:

const array = [1,2,3,4,5,6,7];
let processedItems = 0;
array.forEach(item => {
  // do something
  if (++processedItems === array.length) {
    console.log('loop finished');
  }
});

This technique allows us to avoid the need for implementing a Promise or sacrificing performance with a for of loop.

Swap out forEach for map and implement Promise.all

await Promise.all(array.map(async () => {...}));