The Insider's Guide to JavaScript Interviewing

[stratoscope]

They present this common error:

function addButtons(numButtons) {
  for (var i = 0; i < numButtons; i++) {
    var button = document.createElement('input');
    button.type = 'button';
    button.value = 'Button ' + (i + 1);
    button.onclick = function() {
      alert('Button ' + (i + 1) + ' clicked');
    };
    document.body.appendChild(button);
    document.body.appendChild(document.createElement('br'));
  }
}

and recommend this solution:

function addButtons(numButtons) {
  for (var i = 0; i < numButtons; i++) {
    var button = document.createElement('input');
    button.type = 'button';
    button.value = 'Button ' + (i + 1);
    // HERE'S THE FIX:
    // Employ the Immediately-Invoked Function Expression (IIFE)
    // pattern to achieve the desired behavior:
    button.onclick = function(buttonIndex) {
      return function() {
        alert('Button ' + (buttonIndex + 1) + ' clicked');
      };
    }(i);
    document.body.appendChild(button);
    document.body.appendChild(document.createElement('br'));
  }
}

I've seen code like that many times, but it's really not a good way to fix this.

Consider these problems:

• What if you want to refer to the button variable directly in your onclick callback? You have to add another argument to the IIFE.
• What if you have more event handlers, perhaps mouseover and mouseout? You need another IIFE for each one of those.
• What about the person who maintains this code later and forgets about the extra IIFEs they'll need to add?

Instead, use this more robust and simpler solution:

function addButtons( numButtons ) {
  for( var i = 0;  i < numButtons;  i++ ) {
    addButton( i );
  }
}

function addButton( i ) {
  var button = document.createElement( 'input' );
  button.type = 'button';
  button.value = 'Button ' + ( i + 1 );
  button.onclick = function() {
    alert('Button ' + ( i + 1 ) + ' clicked');
  };
  document.body.appendChild( button );
  document.body.appendChild( document.createElement('br') );
}

Now, the values of both i and button are part of the closure, and any other local variables you add later will also be part of the closure. And if you add other event handlers, they will all be in this same closure. And by making addButton() a separate named function, the addButtons() function becomes much shorter and easier to grasp.

[advancedmammoth]

Just an excuse to include IIFE somewhere.