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.