Estoy aprendiendo del curso de Jonas Schmedtmann JS. Al final de la sección de la función asíncrona, simplemente no entiendo algunas cosas. Aquí están las tres funciones:

 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']);

Mediante la función loadAll , cuando registro la variable imgs, me da una serie de promesas. Jonas dijo que se debe a la función asíncrona, siempre devuelve una promesa. Pero, si elimino las palabras clave de espera asíncrona, como esta "const imgs = imgArr.map(img => createImage(img));", también devuelve una promesa.

Sin embargo, en la función loadNPause cuando registro la variable img, no es una promesa, sino un objeto img.

¿Puedes decirme por qué es eso? En ambas funciones, se devuelve una promesa de la función createImage , en loadNPause me devuelve un objeto img, pero en la función loadAll , cuando se pasa por la matriz, createImage devuelve una promesa.