I have an array of images, and what I am trying to do is manipulate all of those images with an image processing library using an asynchronous function.

My code works fine because every image in the array have a field called index, which represents it position in the array.

 // Adapt every image in the album to its dimensions
    await Promise.all(
      album.map(async (image) => {
        const adaptedImage = await adaptImageToAlbum(image);
        // Add the photo to the final album
        finalAlbum[image.index] = adaptedImage;
      })
    );

The thing is that if, instead, I use this code

 // Adapt every image in the album to its dimensions
    await Promise.all(
      album.map(async (image) => {
        const adaptedImage = await adaptImageToAlbum(image);
        // Add the photo to the final album
        finalAlbum.push(adaptedImage);
      })
    );

the finalAlbum is not sorted. Is there any other way to do that without using the first method I shared? I mean, do it sequentialy. And other thing, talking about performance, would it be better to do it as I did?

I have an array of images, and what I am trying to do is manipulate all of those images with an image processing library using an asynchronous function.

My code works fine because every image in the array have a field called index, which represents it position in the array.

 // Adapt every image in the album to its dimensions
    await Promise.all(
      album.map(async (image) => {
        const adaptedImage = await adaptImageToAlbum(image);
        // Add the photo to the final album
        finalAlbum[image.index] = adaptedImage;
      })
    );

The thing is that if, instead, I use this code

 // Adapt every image in the album to its dimensions
    await Promise.all(
      album.map(async (image) => {
        const adaptedImage = await adaptImageToAlbum(image);
        // Add the photo to the final album
        finalAlbum.push(adaptedImage);
      })
    );

the finalAlbum is not sorted. Is there any other way to do that without using the first method I shared? I mean, do it sequentialy. And other thing, talking about performance, would it be better to do it as I did?

• javascript
• reactjs
• react-native

Share Improve this question Follow asked Aug 3, 2020 at 19:45 Victor MolinaVictor Molina 2,66133 gold badges2828 silver badges6060 bronze badges 4

• 3 Have you tried this await Promise.all(album.map((image) => adaptImageToAlbum(image))); ? – Hassan Imam Commented Aug 3, 2020 at 19:48
• When you say sequentially, do you mean one at a time, or do you mean in sequential order? – Soc Commented Aug 3, 2020 at 19:50
• I agree with @HassanImam you should try that. The map will return an array with the result of the promise(s). See if that's your desired value. – mmason33 Commented Aug 3, 2020 at 19:53
• Does it matter if the images are processed sequentially? Or do you just want the array sorted? If the latter, after the await Promise.all, run finalAlbum.sort((a,b) => a.index - b.index). – Heretic Monkey Commented Aug 3, 2020 at 19:59

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

You can sort the array before processing the items

const finalAlbum = await Promise.all(
  album
    .sort((a, b) => a.index - b.index)
    .map((image) => adaptImageToAlbum(image));
);

As of performance it depends on the number of items you're processing.
In general it's better to avoid premature optimizations, as long as you don't have a performance issue, I would advise keeping the code clear and simple.

I would use BlueBird Promise.each, through which the iteration will be performed sequentially, awaiting for any promises in the process:

const BlueBird = require("bluebird");

await BlueBird.each(album, async function(image) {
  const adaptedImage = await await adaptImageToAlbum(image);
  finalAlbum.push(adaptedImage);
})

To illustrate this directly, the following code fills the array in a random order:

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

async function test(album) {
  let finalAlbum = [];
await Promise.all(
  album.map(async (image) => {
    const adaptedImage = await new Promise((resolve) => {
      setTimeout(() => {
        resolve(image);
      }, Math.random() * 100);
    });
    finalAlbum.push(adaptedImage);
  })
)
console.log(finalAlbum);  //random order
}

Whereas with Bluebird it will always keep the original order:

const BlueBird = require("bluebird");

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

async function test2(album) {
  let finalAlbum = [];
  await BlueBird.each(album, async function(image) {
      const adaptedImage = await new Promise((resolve) => {
        setTimeout(() => {
          resolve(image);
        }, Math.random() * 100);
      });
      finalAlbum.push(adaptedImage);
    }
  )
  console.log(finalAlbum); // [1,2,3,4,5], keeps array order
}

You can use for loop for doing it sequentially.

  for await (const image of album) {
    const adaptedImage = await adaptImageToAlbum(image);
    finalAlbum.push(adaptedImage);
}