【JavaScript入門】クロージャ関数で変数の値を保持する方法

クロージャで変数を保持するための基本原則

JavaScriptのクロージャ関数内で変数の値を保持したい場合は、関数が呼び出されるたびに変数を空の状態で再初期化しないことが重要です。

例えば、以下のように毎回オブジェクトを空にしてしまうと、前回保存した値がすべて失われてしまいます。

webLinks = {};

なぜ値が消えてしまうのか？

この書き方だと、関数を実行するたびに webLinks が新しい空のオブジェクトとして作り直されます。つまり、以前格納したデータは参照できなくなります。

値を永続的に保持したいなら、変数を外側の関数（クロージャ）のスコープ内で一度だけ定義し、返却される内部関数からその変数へアクセスできる構造にするのが正解です。

解決策：外側のスコープで変数を定義する

以下のコードでは、webLinks を外側の関数内で宣言しているため、内部関数が何度呼ばれても値が蓄積され続けます。

var webLink = function (containerId) {
    var link1 = "https://www.qries.com",
    link2 = "https://www.tutorialspoint.com";
    // 外側のスコープで1度だけ初期化
    var webLinks = {};
    return function(id) {
        webLinks[id] = "My " + id;
        document.write(webLinks[id]);
    }
})();

コードのポイント解説

• 初期化は1回だけ： webLinks は即時実行関数（IIFE）の中で一度だけ生成され、以降は再初期化されません。
• クロージャによる参照保持： 返却された内部関数は、外側の変数 webLinks への参照を保持し続けます。これがクロージャの仕組みです。
• 状態の蓄積： 内部関数を呼び出すたびに webLinks[id] に新しい値が追加され、過去のデータも失われずに残ります。

まとめ

クロージャを使えば、関数実行後も変数の状態をメモリ上に保持できます。「毎回空に初期化してしまう」というミスを避け、変数を外側の関数スコープに置くことで、データを安全かつ永続的に管理できるようになります。