JavaScript - IIFE

javascript

// JavaScript - IIFE (Immediately-Invoked Function Expression)
(
  function(a) {
    console.log(a);
  }
)(5);

If a function is wrapped inside a pair of parentheses, we have a function 
expression.  When a function expression is trailed by another pair of 
parentheses, that function expression is executed immediately, and whatever 
inside the second pair of parentheses is passed as arguments to the function.

Benefits of using IIFE:

1. One of the most advantageous side effects of Immediately-Invoked Function 
   Expressions is that, because this unnamed, or anonymous, function expression 
   is invoked immediately, without using an identifier, a closure can be used 
   without polluting the current scope.
2. Keep your code inside of a local scope
3. Reduce scope lookups.  A small performance benefit of using IIFE’s is the 
   ability to pass commonly used global objects (window, document, jQuery, etc) 
   to an IIFE’s anonymous function, and then reference these global objects 
   within the IIFE via a local scope.  This is better than having to traverse 
   up the call stack and see which variables are visible via closure, and if no 
   matching variable is found, go to the global objects.   JavaScript first 
   looks for a property in the local scope, and then it goes all the way up the 
   chain, last stopping at the global scope. Being able to place global objects 
   in the local scope provides faster internal lookup speeds and performance.

// Anonymous function that has three arguments
function(window, document, $) {
  // You can now reference the window, document, and jQuery in a local scope
}(window, document, window.jQuery); 
// The global window, document, and jQuery objects are passed into the anonymous 
// function

// Different forms of IIFE:

Either of the following two patterns can be used to immediately invoke a 
function expression, utilizing the function's execution context to create 
"privacy."

(function(){ /* code */ }()); // Crockford recommends this one
(function(){ /* code */ })(); // But this one works just as well

Because the point of the parens or coercing operators is to disambiguate
between function expressions and function declarations, they can be
omitted when the parser already expects an expression (but please see the
"important note" below).

var i = function(){ return 10; }();
true && function(){ /* code */ }();
0, function(){ /* code */ }();

If you don't care about the return value, or the possibility of making
your code slightly harder to read, you can save a byte by just prefixing
the function with a unary operator.

!function(){ /* code */ }();
~function(){ /* code */ }();
-function(){ /* code */ }();
+function(){ /* code */ }();

Here's another variation, from @kuvos - I'm not sure of the performance
implications, if any, of using the `new` keyword, but it works.
http://twitter.com/kuvos/status/18209252090847232

new function(){ /* code */ }
new function(){ /* code */ }() // Only need parens if passing arguments
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution-ShareAlike 3.0 License