forループ内での関数作成はなぜNG？JavaScriptにおけるクロージャとスコープの落とし穴

Posted by Kousukei on 2025/08/05 07:05:28

はじめに (対象読者・この記事でわかること)

この記事は、JavaScriptを学び始めたばかりの方や、基本的な構文は理解しているが、より深い言語仕様について理解を深めたい方を対象としています。この記事を読むことで、JavaScriptのforループ内で関数を作成する際に発生する問題と、その原因であるクロージャとスコープの仕組みを理解できます。また、問題を回避するためのベストプラクティスを学び、より堅牢なコードを書くことができるようになります。

前提知識

この記事を読み進める上で、以下の知識があるとスムーズです。前提となる知識1 (例: JavaScriptの基本的な構文) 前提となる知識2 (例: 関数とスコープの基本的な概念)

問題の提起：forループ内での関数作成がもたらす予期せぬ動作

JavaScriptを学ぶ上で、forループ内で関数を作成する場面はよくあります。しかし、この実装方法には落とし穴が存在します。特に、ループ内で作成された関数が期待通りに動作しない問題は、多くの開発者が経験したことがあるかもしれません。この問題は、JavaScriptのクロージャとスコープの仕組みに起因します。本記事では、この問題の背景と原因を詳しく解説し、適切な代替案を提示します。

問題の実例と原因分析

問題の実例

まず、問題を理解するために、以下のようなコードを考えてみましょう。

const functions = [];
for (let i = 0; i < 3; i++) {
  functions.push(function() {
    console.log(i);
  });
}

functions.forEach(func => func());

このコードを実行すると、期待される出力は「0」「1」「2」ですが、実際には「3」「3」「3」と表示されます。これは、forループ内で作成された関数が、ループ変数iへの参照を保持しているためです。

原因分析：クロージャとスコープの仕組み

この問題の原因は、JavaScriptのクロージャとスコープの仕組みにあります。JavaScriptでは、関数が作成された時点でのスコープ（レキシカルスコープ）を記憶します。つまり、関数内で外部の変数にアクセスしようとすると、その関数が定義された時点での変数の値を参照します。

上記のコードでは、forループ内で作成された関数は、ループ変数iを参照しています。ループが終了すると、iの値は3になります。そのため、各関数が実行される際には、すべてiの値が3になっています。

解決策：問題を回避するためのベストプラクティス

この問題を回避するためには、いくつかの方法があります。

解決策1：即時実行関数式（IIFE）を使う

const functions = [];
for (let i = 0; i < 3; i++) {
  functions.push((function(index) {
    return function() {
      console.log(index);
    };
  })(i));
}

functions.forEach(func => func());

IIFE（Immediately Invoked Function Expression）を使うことで、各イテレーションで新しいスコープを作成し、ループ変数の値を固定します。

解決策2：forEachメソッドを使う

const functions = [];
[0, 1, 2].forEach(function(i) {
  functions.push(function() {
    console.log(i);
  });
});

functions.forEach(func => func());

配列のforEachメソッドを使うことで、各イテレーションで新しいスコープが自動的に作成されます。

解決策3：letのブロックスコープを活用する（ES6以降）

const functions = [];
for (let i = 0; i < 3; i++) {
  functions.push(function() {
    console.log(i);
  });
}

functions.forEach(func => func());

ES6以降では、letはブロックスコープをサポートしているため、ループ内でletを使うと、各イテレーションで新しい変数が作成されます。この方法が最も簡潔で推奨されます。

ハマった点やエラー解決

この問題に直面した際、多くの開発者は「なぜ同じ値が表示されるのか」と困惑します。特に、ループ内でletを使っているにもかかわらず、問題が発生する点が理解しにくいです。

また、IIFEを使った解決策では、関数のネストが深くなり、コードが読みにくくなる可能性があります。さらに、varを使った方法は、スコープの問題を引き起こす可能性があるため、非推奨です。

最適な解決策の選択

最も推奨される解決策は、letを使ったforループ内で、各イテレーションごとに新しいスコープを作成することです。ES6以降、letはブロックスコープをサポートしているため、ループ内でletを使うと、各イテレーションで新しい変数が作成されます。

const functions = [];
for (let i = 0; i < 3; i++) {
  functions.push(function() {
    console.log(i);
  });
}

functions.forEach(func => func());

このコードは、ES6以降のJavaScript環境では期待通りに動作します。しかし、古いブラウザやNode.jsの古いバージョンでは、letがサポートされていない場合があるため、その場合はIIFEを使うなどの代替策が必要です。

まとめ

本記事では、JavaScriptのforループ内で関数を作成する際の問題点と、その原因であるクロージャとスコープの仕組みを解説しました。

問題点: forループ内で作成された関数が、ループ変数への参照を保持しているため、期待通りに動作しない。
原因: JavaScriptのクロージャとスコープの仕組み。
解決策: IIFEを使う、forEachメソッドを使う、letを使う（ES6以降）。

この記事を通して、JavaScriptの言語仕様について深く理解し、より堅牢なコードを書くことができるようになったと思います。今後は、JavaScriptのその他の言語仕様についても記事にする予定です。