Immediately-Invoked Function Expression (IIFE)
If you ever happen to look at any of code generated using build tools like Webpack or any other Minification/Uglification tool, you may have encountered an exclamation mark before a function only to wonder what it exactly does ?
Well, in short, that exclamation mark converts the function into an Immediately-Invoked Function Expression (IIFE). Now what exactly is an IIFE ?
As the full-form indicates, it simply causes the function to be executed immediately. Let’s expand on that a bit.
JS 101: Functions
The Syntax for a function declaration is shown below. This function, by default, returns undefined.
// Function definition
function xyz() {
/* code */
};
// Invoke the function
xyz(); // return value is undefined
Sometimes, we wanna call a function directly after we declare it, like this
// Function definition
function xyz() {
/* code */
} (); // Paranthesis to invoke the fn
However, we get a SyntaxError (Unexpected token (). This is because whenever the parser encounters the “function” keyword, by default, it treats it as a function declaration/statement. But, adding a harmless exclamation mark before it, turns it to a Function Expression. This ! mark also makes the expression return true, because by default all IIFE’s return undefined. And !undefined = true.
Note that exclamation mark ! alone doesn’t invoke the function. Its also the paranthesis () at the end which has a higher precedence than the exclamation mark which in conjunction invokes the function instantly.
// Function executes and returns true
!function xyz() {
/* code */
} ();
Alternate ways to make your function into an IIFE
1. Wrapping within Paranthesis ()
Another way of writing the same thing without using the exclamation mark would be to wrap the function within paranthesis. Why this works is because, in javascript, paranthesis cannot contain statements. So when the parser encounters the “function” keyword, it parses it as a function expression and not as a function declaration.
// Function is wrapped within paranthesis
// Function executes and returns whatever the Fn returns
(function(){ /* code */ } ());
// OR
(function(){ /* code */ })();
2. Using Unary Operators
The above function returns whatever value the function returns. However, if you don’t care about the return values, then you can use the following Unary operators to convert your function declaration into a function expression. (P.s. You may wanna checkout Bitwise Operators too!)
!function(){ /* code */ }(); // returns true by default
~function(){ /* code */ }(); // returns -1 by default
-function(){ /* code */ }(); // returns NaN by default
+function(){ /* code */ }(); // returns NaN by default
3. Using “new” Keyword
Another Variation to execute a function instantly is new function(){}; or new function(){}() (The latter uses the ending parenthesis only for parameter passing)
Hope this clarifies your doubts just as it has mine. Cheers!