Immediately Invoked Function Expression (IIFE)

iife_example.js

var elems = $('a');


// WITHOUT THE IIFE
//
// In the following example, the alert text "I am i", will always
// print '3' because that's the last value for i (after the loop
// finishes). If we want to retain the value of i when we bind
// the click handler, we can use an IIFE to save the value of i
// in the IIFE's execution context
for(var i=0; i<elems.length; i++) {
  $(elems[i]).on('click', function(e){
    e.preventDefault();
    alert( 'I am link #' + i );
  });
}

// WITH THE IIFE
//
// Now, with the IIFE on line 25, the value of i
// is retained in the IIFE's execution context. So
// the console.log("I am link #:" + index) will print
// the correct index value for each link when clicked.
for(var i=0; i<elems.length; i++) {
  (function(index) {
    $(elems[index]).on('click', function(e){
      e.preventDefault();
      alert( 'I am link #' + index );
    });
  })(i);
}

// Here's a link to a JS Fiddle that demonstrates the IIFE:
// http://jsfiddle.net/SaTW6/

// For more IIFE knowledge, checkout this link:
// http://benalman.com/news/2010/11/immediately-invoked-function-expression/