クロージャでカウンターをつくる

単純にカウンターをつくろうとすると、カウント用にグローバル変数をつくり、それを操作していく形になると思います。

var count = 0;

countUp(); // -> 1
countUp(); // -> 2
countUp(); // -> 3

function countUp() {
    return ++count;
}

これで問題なく動きます。

が。

countの値がどこからでも変更できてしまうという問題点があります。
そんなときに役立つのがクロージャという概念です。

で、クロージャをつかって書き換えると、

var countUp = getCountUp();

countUp(); // -> 1
countUp(); // -> 2
countUp(); // -> 3

function getCountUp() {
    var count = 0;

    function countUp() {
        return ++count;
    }

    return countUp;
}

なんということでしょう。

countの値がローカル変数になりました。
getCountUpの外からは見えなくなりましたし、countUpを実行する以外では変更できないようになっております。これで安心安全ですね。

ちょいとばかし解説

なぜこのような挙動になるのか。
それはJavaScriptでは 他の関数から参照されている可能性のある変数の値が保持される からなのです。
getCountUp内のcountの値はcountUpから参照されているので保持されているのです。

なので、

var countUpA = getCountUp(),
    countUpB = getCountUp(),
    countUpC = getCountUp();

countUpA(); // -> 1
countUpB(); // -> 1
countUpC(); // -> 1

countUpA(); // -> 2
countUpB(); // -> 2
countUpC(); // -> 2

function getCountUp() {
    var count = 0;

    function countUp() {
        return ++count;
    }

    return countUp;
}

という感じでcountUpをたくさんつくっても、それぞれが己のcountを参照するのでcountの値がバッティングしません。非常に便利ですね。

DEMO

今回は以上です。