JavaScriptでクロージャー

クロージャーってなに？

「関数宣言の中に別の関数宣言を書けること（入れ子の関数宣言）」や「ローカル変数を参照している関数内変数」と言われます。
これだけだとどういうことかわかりませんね・・・
自分自身理解できなかったので、自分が納得したことを踏まえてクロージャーについて説明していきます。

クロージャーを書くために理解しておきたいこと

1. JavaScriptでは現在の関数の外側で定義された変数を参照できる

function func() {
  var name = 'taro';
  function greeting() {
    return 'My name is ' + name;
  }
  return greeting();
}

func();  // My name is taro

2. 関数は、その外側の関数がリターンした後になっても、まだ外側の関数内で定義された変数を参照できる

function func() {
  var lastName = 'suzuki';
  function greeting(firstName) {
    return 'My name is ' + lastName + ' ' + firstName;
  }
  return greeting;
}

var f = func();
f('taro');    // My name is suzuki taro
f('hanako');  // My name is suzuki hanako

3. クロージャは外側の変数を更新できる

function box() {
  var val = undefined;
  return {
    set: function(newVal){
      val = newVal;
    },
    get: function(){
      return val;
    },
    type: function(){
      return typeof val;
    }
  };
}

var b = box();
b.type();    // undefined
b.set(10);
b.get();     // 10
b.type();    // "number"

カウントアップをしていくクロージャ

よくあるサンプルを書いていきます

function counter() {
  var count = 0;
  return function() {
    return ++count;
  }
}

var count = counter();
count();  // 1
count();  // 2

クロージャの使い所

ここまでで一応簡単なコードを書くことができるようになったかと思います。
しかし、実際クロージャってどんなところで使うかわからない・・・
そこで私なりに考えたクロージャのメリット
・クロージャ内の変数をクロージャ外からアクセス出来ない
・クロージャ内の変数を保持することができる

これらを踏まえて以下の様なコードがあるとします。

function createClicked() {
  var isClicked = false;
  return function() {
    if (isClicked) {
      return 'すでにClickしています';
    }
    isClicked = true;
    return 'Clickしました';
  }
}

var click = createClicked();
click();  // Clickしました
click();  // すでにClickしています

一回しかクリックできないようにするコードです
二重に処理させないようにするためにとかといった場面で有効かもですね・・・