下記コード(全11行)の出力結果が納得いきません！

Question

下記コード(全11行)の出力結果が納得いきません！

const psvar = [];
for (var i = 0; i < 5; i++) {
  psvar.push(new Promise(resolve => {
    setTimeout(() => {
      resolve(i);
    }, 0);
  }));
}
Promise.all(psvar).then(results => {
  console.log(results); // [ 5, 5, 5, 5, 5 ]
});

なぜ出力結果が[ 0, 1, 2, 3, 4 ]ではなく[ 5, 5, 5, 5, 5 ]となるのでしょうか。
ご存知の方がいらっしゃればご教示願いたいです。

追伸

index変数iをvarではなくletで宣言するだけで、
出力結果が期待通り[ 0, 1, 2, 3, 4 ]となりました。

これも、なぜなのでしょうか。
JavaScriptは難しすぎます><

const pslet = [];
for (let i = 0; i < 5; i++) {
  pslet.push(new Promise(resolve => {
    setTimeout(() => {
      resolve(i);
    }, 0);
  }));
}
Promise.all(pslet).then(results => {
  console.log(results); // [ 0, 1, 2, 3, 4 ]
});

↓編集により追記しました

setTimeoutを外部で宣言すると、
index変数iの宣言がvarでも
期待通りの出力[ 0, 1, 2, 3, 4 ]になることを発見しました。
これも、なぜなのでしょうか。

const ps = [];
const getPromise = (i) => {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(i);
    }, 0);
  });
};
for (var i = 0; i < 5; i++) {
  ps.push(getPromise(i));
}
Promise.all(ps).then(results => {
  console.log(results); // [ 0, 1, 2, 3, 4 ]
});

const psvar = [];
const doSetTimeout = (func, i) => {
  setTimeout(() => {
    func(i);
  }, 0);
};
for (var i = 0; i < 5; i++) {
  psvar.push(new Promise(resolve => {
    doSetTimeout(resolve, i);
  }));
}
Promise.all(psvar).then(results => {
  console.log(results); // [ 0, 1, 2, 3, 4 ]
});

Answer 1

var と let

var は関数スコープなので、変数 i のスコープを共有し、setTimeout で登録されたタイマー関数呼び出し時に i の値は5です。
let はブロックスコープなので、変数 i のスコープを共有しません。

別解

さておき、クロージャを無駄に生産して、メモリを圧迫するのは考えものです。

const ps = [];
for (let i = 0; i < 5; i++) {
  ps.push(new Promise(resolve => setTimeout(resolve, 0, i)));
}
Promise.all(ps).then(console.log.bind(console));

スコープを極限まで狭くした(Garbage Collectionに優しい)場合。

(function () {
  function createPromise (i) {
    return new Promise(resolve => setTimeout(resolve, 0, i));
  }

  {
    const ps = [];

    for (let i = 0; i < 5; i++) {
      ps.push(createPromise(i));
    }

    Promise.all(ps).then(console.log.bind(console));
  }
}());

Re: yuzunoha123 さん

Answer 2

ループ変数をvarで宣言した場合、それは関数の先頭で宣言したのと同じ、単なる変数となります。なので、非同期実行の過程で変数を読めば、ループが終わりきったあとの5が得られる、という結果になります。

これに対して、ループ変数をletで宣言すると、かなり特殊な動作となります。以前に別な質問に回答したときに調べたのですが、このletはループ1回毎に別の変数として扱われることとなります。なので、次のループが回ってもPromise内のiはそのままで、ループ内で生成したときの値が保存される、というような形になっています。