質問: JavaScriptのクロージャはどういった場合に利用するのでしょうか。どんな場合にメリットがあるのか教えて頂けないでしょうか。具体的なコードを示して頂けるとありがたいです。
回答: 例えば押すと「何番目のボタンが押されました」と表示されるボタンを10個作るとします for(var i=1;i<=10;i++){ button=document.createElement("button") button.textContent=i button.addEvenyListener("click",function(){alert(i+"番目のボタンが押されました")}) document.body.appendChild(button) } この例は間違いです全てのボタンのイベントハンドラ内のiが属するスコープはforのiと同じなので、 どのボタンを押しても「11番目のボタンが押されました」と表示されてしまいます 適切に動作させるためにはスコープをハンドラ内に留めないといけません こういう時はletが便利です for(let i=1;i<=10;i++){ button=document.createElement("button") button.textContent=i button.addEvenyListener("click",function(){alert(i+"番目のボタンが押されました")}) document.body.appendChild(button) } しかしletは古い環境では使えないので、その他の解決策の1つとしてクロージャがあります for(var i=1;i<=10;i++){ button=document.createElement("button") button.textContent=i button.addEvenyListener("click",(function(i){ return function(){alert(i+"番目のボタンが押されました")} })(i)) document.body.appendChild(button) } これは (function(i){ return function(){alert(i+"番目のボタンが押されました")} })(i) でその時のiの値を固定しています クロージャは要は変数を保持した関数なのです これによりグローバル変数の汚染を防げます ----補足---- メモリの話がありますがそんなのは微々たるものです ボタンを何万個も作ったり何日間も起動し続けるアプリケーションを作るので無ければ心配はいりません