JavaScriptのforループ内でイベント登録

JavaScriptのforループ内でイベント登録をしようとして、ハマった。 もう何十回もハマっている気がするけど、ハマるものはハマる。

var buttons = document.getElementsByTagName('button');
for (var i=0; i<buttons.length; i++) {
  $('#foo').on('click', function () {
    exec(buttons[i], options);  // not work
  });
}

forループ内でスコープが消えたものを後から実行しようとしても駄目。 上記の例では buttons[i] の中身が見れなくなってまう。 色々な書き方の対策があるけど、以下のように即時関数で丸めてしまうのが楽だ。

var buttons = document.getElementsByTagName('button');
for (var i=0; i<buttons.length; i++) {
  (function() {
    $('#foo').on('click', function () {
      exec(buttons[i], options);  // work
    });
  }());
}

日本のサイトだとクロージャの引数にデータを渡す書き方をよく見かけていたのだけど、イベントだけを回すようにしてfor全体を即時関数でまとめるほうが、引数を考える必要がないぶん楽な実装かも知れない。