javascriptのスコープ

Question

let setUp = () => {
  let count = 0;
  return () => {
    return count += 1;
  }
};
console.log(setUp()); //1
console.log(setUp()); //1
console.log(setUp()); //1
let next = setUp();
console.log(next()); //1
console.log(next()); //2
console.log(next()); //3

上記のようなコードがあったとします。
なぜ変数nextに入れるとcountに値が保存されるのでしょうか？
next()を呼び出すごとにcountの値が更新される理由がわかりません。おそらくスコープが関係しているとは思うのですが…
初歩的な質問で申し訳ありません。回答よろしくお願い致します。

Comments

[Lhankor_Mhy]

console.log(setUp()); //1

当方の環境では、1 ではなく関数が返って来ました。おそらくコードの転記ミスかと思いますので、ご確認ください。

Answer 1

関数を呼び出すと、その関数のローカル変数が新たに作り出されると言うことは分かりますでしょうか？

前半は、console.logを呼び出す毎回、setupを呼んでいるので、毎回countという変数が新たに生成され、初期値0で+1されて1が帰ります。

後半は、nextへの代入の時点でsetupが呼ばれているのでこのときにcountが生成され、以降はその1つのcountが毎回使われるので、+1される度に値が増えていきます。

Answer 2

「JavaScript クロージャ」で検索してわかりやすい記事を探すとかどうでしょう。

---

【JavaScriptでクロージャー - Qiita】
https://qiita.com/asaori/items/144e792404c70fc3540a

【【JavaScript入門】クロージャって一体何？使い方まで徹底解説 | 侍エンジニア塾ブログ | プログラミング入門者向け学習情報サイト】
https://www.sejuku.net/blog/25026

【クロージャ - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Closures

【関数を理解すればクロージャは難しくない！｜もっこりJavaScript｜ANALOGIC（アナロジック）】
http://analogic.jp/closure/

【JavaScriptのクロージャは内部でどう機能するのか | POSTD】
https://postd.cc/how-do-javascript-closures-work-under-the-hood/

Answer 3

クロージャ

大抵は「クロージャ」という言葉で説明されますが、「なぜその動作になるのか」をクロージャで説明するのは難しいと思います。
私は「スコープチェーン」と「ガベージコレクション」から原理を理解しました。

スコープチェーン

• 関数 - JavaScript | MDN
• javascript スコープチェーン - Google 検索

ガベージコレクション

• JavaScript - JavaScriptのクロージャが値を保持する仕組み｜teratail

Re: kirokira さん

Comments

[miyabi_pudding]

横槍失礼します。
リンク先での、ガベレージコレクションのご説明、大変にわかりやすかったです。
私もよくわからないで使ってたため、
メモリの無駄遣いな書き方をしてしまっていたと反省しました。

[kirokira]

ありがとうございました！どういった仕組みなのか理解することが出来ました！

Answer 4

スコープと高階関数についてはご理解されているご様子ですから、それほど難しく考える必要はないと思います。

  console.log( setUp() === setUp() );   //false
  let next = setUp();
  console.log( next === next );         //true

見ているものが違うものなのか、同じものなのか、の違いです。