JavaScirpt クロージャとプライベート変数

JavaScriptでのクロージャの実装サンプル

クロージャとは

クロージャとは、レキシカルスコープ（参照可能な外部の関数スコープ）を参照している状態のこと

ソースコード

ON・OFFを切り替えるスイッチ

<body>
    <button id="btn" type="button">
        button
    </button>

    <script>
        const fnFactory = function() {
            et flg = true;

            const fn = function () {
                flg = !flg;
                alert(flg);
            }

            return fn;
        }

        const fn = fnFactory();

        const btn = document.getElementById('btn');
        btn.addEventListener('click', function() {
            fn();
        });
    </script>
</body>
</html>

fnFactoryの中で宣言されたflg変数はfn関数からのみ参照される
プライベートな変数として宣言されるので、他から変更されることがない

const fnFactory = function() {
    let flg = true;

    const fn = function () {
        flg = !flg;
        alert(flg);
    }

    return fn;
}

const fn = fnFactory();

数値を加算するカウンター 1ずつ加算する関数なら、下記のように書ける

const fnFactory = function() {
    let n = 0;

    function count() {
        alert(n);
        n++;
    }

    return count;
}

const fn = fnFactory();

JSFiddle

Sample 2

Reference

クロージャ