クロージャの具体例 | クロージャの仕組み | JavaScript 超完全入門 基本から発展までのすべて

スポンサーリンク
スポンサーリンク

クロージャの基本的な考え方

クロージャは、JavaScriptにおいて非常に強力なツールであり、関数の中で定義された他の関数が、外部スコープにある変数にアクセスできるようになる仕組みです。クロージャの利用により、関数のスコープ外でも特定の変数を保持し続けることが可能となり、さまざまな場面で役立ちます。

カウンターを作成するクロージャ

クロージャの具体的な応用例として、カウンターの作成を見てみましょう。この例では、カウンターの値を保持し、呼び出すたびに値を増加させる仕組みを実現します。

カウンターの例

function createCounter() {
    let count = 0;
    return function() {
        count++;
        return count;
    };
}

const counter1 = createCounter();
console.log(counter1());  // 1
console.log(counter1());  // 2

const counter2 = createCounter();
console.log(counter2());  // 1
console.log(counter1());  // 3

この例では、createCounter関数内にcountというローカル変数が定義されており、クロージャによって外部からアクセス可能です。counter1とcounter2はそれぞれ独立したカウンターを持ち、互いに干渉しません。

プライベート変数としてのクロージャ

クロージャを使って、プライベート変数のように特定の変数を外部から直接アクセスできないようにすることも可能です。外部関数のスコープにある変数は、内部関数を介してのみアクセス可能となります。

プライベート変数の例

function createSecret() {
    let secret = "秘密のメッセージ";
    
    return function() {
        return secret;
    };
}

const getSecret = createSecret();
console.log(getSecret());  // "秘密のメッセージ"

この例では、secretという変数が外部から直接アクセスできませんが、getSecret関数を通じてのみ値を取得することができます。これにより、データのカプセル化が実現されます。

イベントハンドラーとクロージャ

クロージャは、イベントハンドラー内でも役立ちます。以下の例では、複数のボタンをクリックするたびに、それぞれのボタンに対応した番号が表示される仕組みをクロージャを使って実現しています。

イベントハンドラーでのクロージャの例

for (let i = 1; i <= 3; i++) {
    document.getElementById("button" + i).addEventListener("click", function() {
        alert("Button " + i + " clicked");
    });
}

この例では、forループ内でiという変数がクロージャとして保持され、ボタンがクリックされるたびに対応する番号が表示されます。クロージャが変数iを保持することで、各ボタンに固有の動作を持たせることができます。

クロージャとメモリの効率性

クロージャは強力なツールですが、過度に使用するとメモリに影響を与える可能性もあります。クロージャはスコープ内の変数を保持し続けるため、特定の変数が不要になった際にはメモリが解放されず、意図しないメモリリークを引き起こすことがあります。そのため、クロージャを適切に使用し、不要になったクロージャは適宜メモリから解放されるよう工夫することが重要です。

まとめ

クロージャは、JavaScriptにおいて非常に強力で柔軟な仕組みであり、関数のスコープ外で変数を保持し続けることができます。クロージャを活用することで、カウンターやプライベート変数、イベントハンドラーの実装が容易になり、より効率的なコードを作成できます。ただし、メモリの効率にも注意しながら適切に使用することが重要です。

スポンサーリンク