Javascript promise. Why does resolve return different values when it's called in different places?

Question

const image = document.querySelector('.images');

const createImage = (imgPath, seconds) => {
  return new Promise(function (resolve, reject) {
    if (imgPath) {
      const img = document.createElement('img');
      setTimeout(() => {
        img.src = imgPath;
        image.append(img);
        resolve(img);
      }, 1000 * seconds);
    } else reject('ERROR. REJECTED');
  });
};

let currentImage;

createImage('./img/img-1.jpg', 1)
  .then(img => {
    console.log(img);
    // img.style.display = 'none';
    console.log('1 successful');
    // img.style.display = 'none';
    return createImage('./img/img-2.jpg', 2);
  })
  .then(img => {
    console.log(img);
    img.style.display = 'none';
    console.log('2 successful');
    return createImage('./img/img-3.jpg', 3);
  })
  .then(img => {
    img.style.display = 'none';
    console.log('3 successful');
    return img;
  });

I'm trying to display first picture then hide it to display a second picture after 2 seconds later. Then, hide the second picture to display a third picture.

When I use resolve(imp) inside of setTimeout function, it returns <img src="./img/img-1.jpg>. When resolve(img) is placed outside of setTimeout, it returns just <img>. Why are each case return values different? because in JS, we can still use values that was called inside of function even after they are executed and disappeared.

  setTimeout(() => {
    img.src = imgPath;
    image.append(img);
  }, 1000 * seconds);
  resolve(img);

Answer 1

The root cause of the difference is: do you add the src first and then log, or do you log first and then set the src. In both cases, the browser will log the element as it appears at the time of the log statement (at least in chrome -- different browsers may log slightly differently). If the element has an src, the log reflects that. If the element has no src yet, the log has no src.

This can be demonstrated without involving promises at all:

const img = document.createElement('img');
console.log(img);
img.src = 'example';

const img = document.createElement('img');
img.src = 'example';
console.log(img);

So adding the promises back in: if you resolve the promise before you've added an src, code execution moves to the .then callback and logs it out, with no src. A second later, the src gets added, too late to be included in the log. If instead, you wait until the src has been added and then resolve the promise, then the code in the .then callback can log out the src.