0

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.

venndi
  • 161
  • 9
  • `Array.map` does not consider async functions nor await their completion… – deceze Dec 03 '21 at 12:31
  • 2
    _"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
  • 1
    @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

0 Answers0