中級

forループのvarをletに変えないとコールバックが同じ値を指す

varはブロックスコープを持たないため、ループ内で生成した関数はすべて同じ変数を共有します。ループが終わったあとに関数を呼び出すと、全て最後の値を参照します。letはループの繰り返しごとに新しい束縛を作るため、この問題が起きません。

なぜエラーが出ないのか

出力: 3 3 3

（エラーなし）

JavaScriptは何も報告しません。文法として正しいためです

出力: 3 3 3

実際の挙動 — 期待した結果と食い違っている箇所

見つけ方

エラーが出ないので、出力を目で確かめるか、コードを目で追うしかありません。この種の誤りが最も発見が遅れます

このエラーが出る典型パターン

 1  function makeGetters() {
 2    const getters = [];
 3    for (var   i = 0; i < 3; i++) {
             ^
 4      getters.push(function() { return i; });
 5    }
 6    return getters;
 7  }
 8  const getters = makeGetters();
 9  console.log(getters[0](), getters[1](), getters[2]());

 1  function makeMultipliers() {
 2    const fns = [];
 3    for (var   i = 1; i <= 3; i++) {
             ^
 4      fns.push((x) => x * i);
 5    }
 6    return fns;
 7  }
 8  const fns = makeMultipliers();
 9  console.log(fns[0](10), fns[1](10), fns[2](10));

 1  function makeLabelers(labels) {
 2    const fns = [];
 3    for (var   i = 0; i < labels.length; i++) {
             ^
 4      fns.push(() => labels[i]);
 5    }
 6    return fns;
 7  }
 8  const fns = makeLabelers(["a", "b", "c"]);
 9  console.log(fns[0](), fns[1](), fns[2]());

 1  function makeCounters() {
 2    const fns = [];
 3    for (var   i = 0; i < 4; i++) {
             ^
 4      fns.push(() => i * i);
 5    }
 6    return fns;
 7  }
 8  const fns = makeCounters();
 9  console.log(fns[0](), fns[1](), fns[2]());

 1  function makeAdders(nums) {
 2    const fns = [];
 3    for (var   i = 0; i < nums.length; i++) {
             ^
 4      fns.push(() => nums[i] + 1);
 5    }
 6    return fns;
 7  }
 8  const fns = makeAdders([5, 10, 15]);
 9  console.log(fns[0](), fns[1](), fns[2]());

よくある誤解

「ループの中で作った関数はその時点のiの値を覚えている」という思い込みは、varを使う限り成り立ちません。関数が実際に呼ばれる時点でのiの値（多くの場合ループ終了後の値）を参照します。

実務での勘所

letを使うとループの繰り返しごとに独立した変数が作られるのは、ES2015の仕様でfor文が特別に扱われているためです。厳密には、for (let i = ...)は繰り返しのたびに新しいiの束縛を作り、前の周回の値を引き継いでコピーする、という仕組みが仕様に明記されています。letが無かった時代は、即時実行関数(IIFE)でループの中身を包み、各周回ごとに新しい関数スコープを作ることでこの問題を回避していました。letの登場で、この技巧的な書き方をしなくても同じ効果が得られるようになりました。

演習をはじめる

関連するエラー

• メソッドを変数に代入・受け渡しするとthisが失われるオブジェクトのメソッドを変数に代入したり、別の関数に渡して呼び出したりすると、呼び出し時にレシーバーの情報が失われ、thisがオブジェクトを指さなくなります。
• ['1','2','3'].map(parseInt)が[1, NaN, NaN]になる理由Array.prototype.mapはコールバックに(要素, インデックス, 配列)の3引数を渡します。