1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

クロージャーを用いたプライベート変数の書き方

Posted at

やりたいこと

increment関数を数回呼び、1ずつインクリメントされるような動作を実現したい。

問題点

このコードだと、numがインクリメントされるが、numという変数がどこでも初期化可能なため、書き換えられると、うまくいかない。

let num = 0;

function increment() {
  num += 1;
  console.log(num);
}

increment();
increment();
increment();

num = 0;
increment();

スクリーンショット 2024-04-24 21.22.23.png

解決策

クロージャーを使ってprivateな変数を定義すれば解決する。

  1. incrementFactoryという関数の中で、numを宣言し、increment関数を作成する。
  2. incrementFactoryで、作成したincrement関数を返り値とする。
  3. incrementFactory関数を呼び出し、実行。

incrementFactoryは一度しか呼ばれていないため、numも一度しか初期化されない。
途中でnum=0としているが、これに影響されずにインクリメントできている。
尚、修飾子なしで宣言できる理由についてはよくわかっていない。


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

const increment = incrementFactory();

increment();
increment();
increment();
num = 0;
increment();

スクリーンショット 2024-04-24 21.28.14.png

参考

【JS】ガチで学びたい人のためのJavaScriptメカニズム
https://www.udemy.com/course/javascript-essence/?couponCode=ST6MT42324

1
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
1
2

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?