title: Why to put async await inside an array map callback?
body: <p>My question related to example i saw (attached below).
  The example loads images and then show them on the screen.
  As far as i understand the author target was that all the images will be loaded at the same time, but i can't understand how the async await mechanism helps him to achieve this goal?
  The problematic lne is:</p>
  <blockquote>
  <p>imgArr.map(async img =&gt; await createImage(img));</p>
  </blockquote>
  <p>Code:</p>
  <pre><code>  const wait = function (seconds) {
       return new Promise(function (resolve) {
         setTimeout(resolve, seconds * 1000);
    });
  };
  
   const imgContainer = document.querySelector('.images');
  
  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 loadAll = async function (imgArr) {
    try {
      const imgs = imgArr.map(async img =&gt; await createImage(img));
      const imgsEl = await Promise.all(imgs);
      console.log(imgsEl);
      imgsEl.forEach(img =&gt; img.classList.add('parallel'));
    } catch (err) {
      console.error(err);
    }
  };
  loadAll(['img/img-1.jpg', 'img/img-2.jpg', 'img/img-3.jpg'])
  </code></pre>
  <p>;</p>
  <p>Doesn't  <strong>imgArr.map(async img =&gt; await createImage(img));</strong> is exactly the same as:</p>
  <pre><code>for (img of imgArr)
  {
      await createImage(img);
  }
  </code></pre>