How to use promise in forEach loop of array to populate an object

In JavaScript, if you want to use Promise to populate an object within an array's forEach loop, you typically need to consider the asynchronous nature of Promise. Since forEach does not wait for Promise to resolve, directly using Promise to populate an object in the forEach loop may lead to issues with execution order and data integrity.

A better approach is to use Promise.all in conjunction with the map function, ensuring all Promise instances resolve before proceeding. Here is an example demonstrating how to implement this:

javascript
// Example user ID array
const userIds = [1, 2, 3, 4];

// Simulate an asynchronous function to fetch user information
function fetchUserById(id) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve({ userId: id, name: `User${id}`, email: `user${id}@example.com` });
        }, 1000);
    });
}

// Use Promise.all and map to populate the user details object
function fetchUserDetails(userIds) {
    const promises = userIds.map(id => fetchUserById(id).then(data => ({ [id]: data }))); 
    
    return Promise.all(promises).then(results => {
        return results.reduce((acc, result) => {
            return { ...acc, ...result };  // Merge each result into a single object
        }, {});
    });
}

fetchUserDetails(userIds).then(userDetails => {
    console.log('Fetched user details:', userDetails);
});

In this example:

1. We first create a Promise for each user ID to fetch the details.
2. Use the map function to map each ID to a Promise.
3. Upon resolution of each Promise, it returns an object where the key is the user ID and the value is the user details.
4. Promise.all waits for all Promises to resolve, then we merge all objects into a single object.

This approach ensures that all user information is correctly and completely retrieved before proceeding, avoiding issues caused by asynchronous execution.