JavaScriptでクロージャについてふんわりと説明してみる

クロージャとは

クロージャは、組み合わされた（囲まれた）関数と、その周囲の状態（レキシカル環境）への参照の組み合わせです。言い換えれば、クロージャは内側の関数から外側の関数スコープへのアクセスを提供します。JavaScript では、関数が作成されるたびにクロージャが作成されます。

引用元：https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures

...ムズカシイ。

実例で見てみる

closureSample.js

'use strict'

function outerFunction(param){
    // ローカルスコープのvalue変数
    let value = param;

    return function innerFunction(){
        // outerFunctionで定義された変数をインクリメントして返す
        return ++ value;
    }
}

const increFunc = outerFunction(5);

// increFuncを呼び出すたびにvalue変数がインクリメントされていく
console.log("1回目", increFunc());
console.log("2回目", increFunc());
console.log("3回目", increFunc());

// value変数を更新しようとしても、宣言されていないというエラーになる
value = 10;

ソースコードを見てみると、value変数に関して

• innnerFunctionからアクセスできる
• outerFunctionの外からはアクセスできない

ということがわかります。

ふんわりと説明してみます

引用元の表現を上記のソースコードをもとに
innerFunction = 組み合わされた（囲まれた）関数
outerFunction = その周囲の状態（レキシカル環境）
とすると、 クロージャとは、outerFunction内で宣言したvalue変数を外部からはアクセスできないが、innerFunctionからはアクセスできるようにすることです 。

なにがいいの

変数へのアクセス権を限定することで、重要な意味を持つ変数を誤って変更してしまうことを防止したり、特定の関数からしか参照されないような変数を余計なスコープで公開して煩雑になることを防止できるといった利点があります。

以上、ふんわりでした。