Why returns the map function an array of promises instead of just img object? (Jonas Schmedtmann)

Question

I'm learning from Jonas Schmedtmann JS course. At the end of the async function section, I just don't understand some things. Here are the three function:

const createImage = function (imgPath) {
  return new Promise(function (resolve, reject) {
    const img = document.createElement('img');
    img.src = imgPath;

    img.addEventListener('load', function () {
      imgContainer.append(img);
      resolve(img);
    });

    img.addEventListener('error', function () {
      reject(new Error('Image not found'));
    });
  });
};

const loadNPause = async function () {
  try {
    // Load image 1
    let img = await createImage('img/img-1.jpg');
    console.log(img);
    console.log('Image 1 loaded');
    await wait(2);
    img.style.display = 'none';

    // Load image 1
    img = await createImage('img/img-2.jpg');
    console.log('Image 2 loaded');
    await wait(2);
    img.style.display = 'none';
  } catch (err) {
    console.error(err);
  }
};

const loadAll = async function (imgArr) {
  try {
    const imgs = imgArr.map(async img => await createImage(img));
    console.log(imgs);
    const imgsEl = await Promise.all(imgs);
    console.log(imgsEl);
    imgsEl.forEach(img => img.classList.add('parallel'));
  } catch (err) {
    console.error(err);
  }
};
loadAll(['img/img-1.jpg', 'img/img-2.jpg', 'img/img-3.jpg']);

By the loadAll function, when I log the imgs variable, it gives me an array of promises. Jonas said that is because of async function, it returns always a promise. But, if I delete the async await keywords, like this "const imgs = imgArr.map(img => createImage(img));", it returns also a promise.

However, in the loadNPause function when I log the img variable, it is not a promise, but an img object.

Can you tell me why is that? In both function is returned a promise from the createImage function, in loadNPause gives me back an img Object, but in loadAll function when go through the array, then the createImage returns a promises.

`Array.map` does not consider async functions nor await their completion… — deceze, Dec 03 '21 at 12:31
_"But, if I delete the async await keywords, like this "const imgs = imgArr.map(img => createImage(img));", it returns also a promise"_ - that's because `createImage(img)` returns a promise; if it didn't you wouldn't have used the `await` keyword. _"However, in the loadNPause function when I log the img variable, it is not a promise, but an img object"_ - that's because when you `await` a promise, it returns the value with which that promise is resolved. But if you return the `image` from the `loadNPause` function, you will again see a promise because it is an `async` function. — Yousaf, Dec 03 '21 at 12:32
In `loadNPause` you do `await createImage('img/img-1.jpg');`, getting the image from the awaited promise. In `const imgs = imgArr.map(img => createImage(img));`, there is no `await`. — Bergi, Dec 03 '21 at 12:33
@Yousaf : thank you! It's clear, when I delete the await keyword from "createImage" by loadNPause, then I will get a promise...but what functionality has the `async` `await` keywords in the `map` function? I mean I will get all the three promises also without the `async await` keywords and then with the `Promise.all` I'll get the images it's self. Can you tell me why is necessary the `async` and the `await` keyword in the map function? Thanks — venndi, Dec 03 '21 at 13:00
@venndi it is unnecessary to use the `await` keyword in the `map` method. I would write it as: `await Promise.all(imgArr.map(img => createImage(img)))`. Array of promises returned by `imgArr.map(...)` is passed to `Promise.all` and you await the `Promise.all`. — Yousaf, Dec 03 '21 at 13:11

Why returns the map function an array of promises instead of just img object? (Jonas Schmedtmann)

0 Answers0