【Javascript】クロージャーについて

こんにちは。
Javascriptでクロージャーという関数の仕組みがあると思うのですが、
正直、意識して使う場面があまり浮かばなくいでいます。
（よくサンプルで、カウントアップの関数が例に挙げられていますが）

実際に現場でコードを書かれている方や詳しい方。クロージャーを普段から利用されることはありますか？
また、あればどういうケースで使われることが多いか、合わせてご教示いただけますと幸いです。

m.ts10806

2021/06/17 12:34

「javascript クロージャー使い道」とかで調べて出てくる記事１０本くらいである程度イメージできませんか？

行動規範の内容に同意します

回答1件

ベストアンサー

正直、意識して使う場面があまり浮かばなくいでいます。

正直わたしも「これはクロージャー」と意識して付かってません、気がついたら書いています。javascriptは関数オブジェクトをつくって、取り回しをすることが多いので、Javascriptをこのまま学習して、使っていくと良いと思います。(ただ知識としては知っておくべきです。)

クロージャーの特徴としては、通常の関数と比較して、内部状態を持つ事が可能な関数が作れることが利点です。そして、もう一つに、内部変数への影響が、クロージャーのみに限定できることです。

このことは凄く重要なことでして、実際にはかなり頻繁に見るパターンだったりして、わりといろんな使い道があります。

私の最近業務で書いたパターンを紹介すると、たとえば、サーバーから情報を取得する関数があったとして

js
1function fetchData(id){ ... }

みたいなものがあったとしましょう。この関数が頻繁に呼ばれたとします。そうすると、サーバーに負荷がかったり、いろんな挙動が遅くなったりして問題になりました

なので、サーバーに取ってきたデータを一時的に取っておいて(キャッシュと言います)、既に取ってきたことがあるものはキャッシュから取り出し、そうでなければサーバーから取得するようにしました。このときに、クロージャーをつかっています。たとえば以下のような感じです。

js
1function createGetDataFunc(id){
2  let cache = new Map();
3  
4  return (id)=>{
5    const data = cache.get(id);
6    if(data){ 
7       return data;
8    }else{
9       const result = fetchData();
10       cache.set(id, result);
11       return result;
12    } 
13  };
14}
15
16const getData = createGetDataFunc();
17getData("id");