JavaScript - IIFE
// 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
page revision: 1, last edited: 14 Nov 2016 22:20