クロージャーについて

Question

let increment=(function(){
  let count=0;
  return function(){
    count+=1;
    console.log(count);
  }
})();

increment();　//1
increment();　//2
increment();　//3

クロージャーについて学んでいるのですが
上記のコードにおいて
①即時関数にするのはなぜか
②return文にするのはなぜか
③let count=0で初期化されない（countの値が保持される）のはなぜか
教えて下さい

Comments

[oikashinoa]

過去のクロージャーに関する質問を見た方が良いですよ

Answer 1

即時関数にしなくてもいけますけど、使われもしない関数名が残るのが嫌で即時関数にするのでしょう。

インタープリタの気持ちになって処理を追ってみましょう。
まず、最初のfunctionで即時関数を作ります。
この時点では let count=0; は実行されません。
変数increment に代入するときの処理の最後の部分が (); になっていて即時関数を呼び出しています。
この呼び出しによって let count=0; を実行して変数countが0になり、その変数countを参照する内側の即時関数functionを作って return し、その即時関数が外部変数countを抱えた・閉じ込めた・クローズしたクロージャーとなって変数incrementに代入されます。

次に、increment() でクロージャー（内側のfunction) を呼び出すと count+=1; を実行して、外部変数countが 1 に変わり、return count; で 1 が帰ります。
更に、increment() でクロージャー（内側のfunction) を呼び出すと count+=1; を実行して、外部変数countが 2 に変わり、return count; で 2 が帰ります。
更に、increment() でクロージャー（内側のfunction) を呼び出すと count+=1; を実行して、外部変数countが 3 に変わり、return count; で 3 が帰ります。

---

即時関数を名前付き関数にしてみました。
こうすることで、make_increment() を何度も呼び出せます。
make_increment() を呼び出すごとに 変数 count 領域と do_increment 関数オブジェクト が作られます。

function make_increment () {  // 関数定義により関数オブジェクトが作られる
  let count;                  // 関数を呼び出すと変数領域が作られる

  function do_increment () {  // 関数定義により関数オブジェクトが作られる
    count += 1;               // do_increment() を呼び出したときに +1 される
    console.log(count);
  }

  count = 0;                  // make_increment() を呼び出したときに代入する
  return do_increment         // 変数countを抱えた do_increment関数オブジェクトを返す
}

let increment = make_increment();  // make_increment関数を呼び出して do_increment 関数を作り increment変数に代入
increment();  //1
increment();  //2
increment();  //3

let increment2 = make_increment();  // increment とは別の count変数と do_increment関数を作る
increment2(); //1
increment2(); //2

increment();  //4 : 別の変数であることの確認

Comments

[AkitoshiManabe]

初心者マークの方への回答としては難しい表現かもしれませんね。
ただ、私がクロージャを完全に理解したのは shiracamus さんが回答されたように、コードを追いかけたときだったように思います（var 宣言しかできなかった時代の古い話ですけど）。

[Loreley]

回答ありがとうございます。つまり、
即時関数にすることによってlet　count =0が実行される→returnがあることによって内側の関数がクロージャになる（let count=0が参照できなくなる）→increacement()を呼び出すことでreturn文の関数が実行されるという解釈であってますか?
returnをとると1,1,1になってしまいます

[shiracamus]

> let count=0が参照できなくなる

いえ、外側の count を参照します。
変数宣言と変数代入処理を分けて考えてください。
countに0を代入するのは、外側の関数を呼んだ時です。
内側の関数を呼んだときは0の代入が行われません。increment() ではcount+=1;してcountの値を返すだけです。

あとで図を書いてみますね。

[shiracamus]

名前付き関数にしたソースコードを追記してみました。
ひとまず、これで処理を追ってみていただけませんか？
count変数が呼び出す毎に作られるのも面白い結果だと思います。

[shiracamus]

図を追記しました。

[AkitoshiManabe]

shiracamus さん、わかりやすいｗ
Loreley さん、この図を参考にコードを追ってみましょう。
エンクロージャを即時関数ではなく、make_increment とした例です。

[Loreley]

わかりやすい図をありがとうございます。
increacement（）を呼び出すときは⑦と⑧だけが行われているということですね。make increacementの返り値を
do increacementにすることでlet increacementの内容がdo increacementという関数に置き換わっていて、increacementを呼び出すたびに
外側のスコープの
let count=0の値も増えていくわけですね。

[shiracamus]

はい。そういうことです。

[Loreley]

お二人とも本当にありがとうございます。
なんとか理解できました。ベストアンサーは
図を載せてくださったshiracamusさんにしようと思います

Answer 2

ご質問に示された「クロージャー」は、以下のコードと同義です。
（「①の回答」に繋がります）

var count=0;

var increment=function(){
  count+=1;
  console.log(count);
  return count;
}

①即時関数にするのはなぜか

他のコードから変数 count に触れさせない目的があり、即時関数のスコープに閉じ込めます。
（「③の回答」に繋がります）

②return文にするのはなぜか

increment()として利用できるように、即時関数のスコープで宣言した関数を呼ぶためです。

③let count=0で初期化されない（countの値が保持される）のはなぜか

即時関数が実行されるとき（increment宣言時）にcount は初期化され、
即時関数のスコープ内で値を保持します。

---

追記)
クロージャは let 宣言が登場する以前（簡単に内容を書き換えられてしまう var しか使えなかった時代）に、如何にして書き換えられないようにするか？といったトリックです。
上記の通り、スコープを変えることで達成しています。

let が使えるモダンな環境では、使うことも無くなったように思いますが、古いコードを読むためにも知っておくべき内容となります。理解のポイントはスコープの違いとなります。

---

コメントを受けて追記）
Wikipedia クロージャ

即時関数は「関数宣言+実行構文（引数を受け付ける括弧）」で、無名である必要はありません。

// ご質問のコードを named関数 にした例
let increment=(function enclosure(){
  let count=0;
  return function closure(){
    count+=1;
    console.log(count);
  }
})();

即時関数の実行は enclosureの実行ですので、その返却値（内部で関数宣言されたclosure）が、increment に代入されます（この代入で closure への参照となる）。

（この時点で即時関数の役割が消える、let count=0が参照されなくなる）

即時関数の役割は、enclosure内で宣言された変数とclosure関数の保持になります（メモリ上には残る）。
また、count は、直接参照されなくなりますが、closureを介して間接的に利用はできます。

内側の関数をクロージャにするために return文を使っているのですか?

increment に closure を参照させ、increment() を実行できるようにするための return です。
WikiPediaの説明のように、Javascript では 「関数の中で宣言される関数」はクロージャになりうるものです。

ちなみに、return を外すと、「Uncaught TypeError: increment is not a function」になりませんか？

さいごに
shiracamus さんの回答にもあるように、「コードを追いかけること」も大事になります。

Comments

[Loreley]

回答ありがとうございます。
即時関数にすることでlet count=0になる。→return文の関数が変数increacementに代入される（この時点で即時関数の役割が消える、let count=0が参照されなくなる）→increacement()を呼び出すことでcountの値を保持したまま関数が実行される
ということでしょうか。
また、内側の関数をクロージャにするために
return文を使っているのですか?

[Loreley]

今確認しましたがsyntaxerrorになってました。混乱させてすいません

Answer 3

最初の function は一度だけ実行されて、count はその時 0 となります。increment には、二つ目の function が保存されて、increment() とコールすると、二つ目の　function が実行され、クロージャーで参照した　count がインクリメントされます。