さぁ!検索しよう!

クロージャ

クロージャとは、自身(関数)を囲む関数に定義されている変数を参照できる関数をいいます。文章だけではわかりにくいので、下記をご覧ください。

var hoge = function() {
  var value = 1;

  function hogeInner() {
    value++;
  }
  hogeInner();
  console.log(value); // 2
}
hoge();

上述の定義に当てはめると、

自身(hogeInner())を囲む関数(hoge())に宣言されている変数(var value = 1;)を参照し続ける関数(hogeInner())をいいます。

となります。

おわかりいただけただろうか。関数の中の関数、上述でいえばhogeInner()がクロージャです。

クロージャの特徴は、自身の外側の関数に宣言されている変数を参照し続けることです。

なので上記のコードの、hogeInner();を再び実行し、console.log(value);とすると、3が出力されます。

初回の出力結果である2を引き継ぎ、それをインクリメントしているのです。

このようにして内側の関数は外側の関数の変数を参照し続けます。これがクロージャなのです。

使いどころ

クロージャは、下記のようなカウントする処理に適しています。

See the Pen dYOWEY by marumarumanual (@marumarumanual) on CodePen.