Javascript

【JavaScript】クロージャについて理解をまとめる

  /

こんにちは、ともです。

JavaScript勉強中でして、クロージャ(closure)というものに出会いました。

クロージャは他の言語でも出てきますので重要な項目だと感じています。

そこでJavaScriptにおけるクロージャについての理解をまとめておこうと思います。

クロージャとは

クロージャについてMDNによると次のように記述されています。

クロージャは、独立した (自由な) 変数を参照する関数です。言い換えるとクロージャ内で定義された関数は、自身が作成された環境を ‘覚えています’。

改訂新版JavaScript本格入門には次のように記述されています。

「ローカル変数を参照している関数内関数」のこと。

文字でみても理解しずらいのでコードをみます。

JavaScriptのクロージャ

function closure(init) {//funcA
  var counter = init;

  return function () {//funcB
    return ++counter;
  }
}

var myClosure = closure(1);
console.log(myClosure());// Out：2
console.log(myClosure());// Out：3

closureという高階関数を作成しました。この関数は関数 return function () {
return ++counter;
}を返します。

funcB内でcounterという変数を利用しています。counterは関数外のfuncAで定義されています。

つまり、funcBはfuncAの変数を参照している関数です。

この参照関係はreturnでmyClosureに格納後も維持されます。

よってmyClosure()を呼出すたびにcounterがインクリメントされます。

この参照関係が維持された状態の関数をクロージャと呼びます。

「ローカル変数を参照している関数内関数」のこと。

というJavaScript本格入門にあった上記の説明は理解し易いですね。

まとめ

クロージャという概念についてJavaScriptのコードを触りながら学びました。

関数内で関数外の変数を参照した状態を維持した関数をクロージャと呼ぶことが分かりました。他の言語でも見かけるワードですのでしっかり理解しておきたいです。

関連記事はこちら