IIFE a function that runs as soon as it's defined. Usually it's anonymous (doesn't have a function name), but it also can be named.

You can run functions instantly after they are constructed by using an immediately-invoked function expression. IIFEs are incredibly helpful since they can be used to easily separate variable declarations while not contaminating the global object.

To execute functions instantly, as soon as they are constructed, use an Immediately-invoked Function Expression (IIFE, for friends).

IIFEs are a great tool for isolating variable declarations because they don't contaminate the global object.

The syntax that designates an IIFE is as follows:

(function() {
  /* */
})()

IIFEs may also be defined using arrow functions:

(() => {
  /* */
})()

In order to execute a function, we basically declare it inside parentheses and add the () sign: (/* function */). ().

Our function is actually classified as an expression internally because of those encircling parentheses. If we hadn't specified a name, the function declaration would not be valid:

Function expressions don't need a name, although function declarations do.

There is no difference if you place the calling parentheses inside the expression parenthesis; this is merely a matter of preference:

(function() {
  /* */
}())

(() => {
  /* */
}())

Explanation

So, this is how it functions. Recall the distinction between function expressions (var a = function()) and function statements (function a ())? Thus, IIFE is an expression of a function. We enclose our function declaration in parenthesis to turn it into an expression. Since JS doesn't permit statements in parenthesis, we do it to explicitly inform the parser that it is an expression rather than a statement.

The two () braces that follow the function indicate how to call the function that was just declared.

I'm done now. The rest are specifics.

• It is not necessary for the IIFE function to be anonymous. This one will function flawlessly and aid in locating your function in a stacktrace when debugging:

(function myIIFEFunc() {
  console.log("Hi, I'm IIFE!");
})();
// outputs "Hi, I'm IIFE!"

• It can take some parameters:

(function myIIFEFunc(param1) {
  console.log("Hi, I'm IIFE, " + param1);
})("John");
// outputs "Hi, I'm IIFE, John"

The function's param1 is supplied the value "Yuri" in this case.

• It can return a value:

var result = (function myIIFEFunc(param1) {
  console.log("Hi, I'm IIFE, " + param1);
  return 1;
})("John");
// outputs "Hi, I'm IIFE, John"
// result variable will contain 1

The most typical technique to define IIFE is to enclose the function declaration in parenthesis, but you are not required to do so. You can substitute any of the following forms instead:

• ~function(){console.log("hi I'm IIFE")}()
• !function(){console.log("hi I'm IIFE")}()
• +function(){console.log("hi I'm IIFE")}()
• -function(){console.log("hi I'm IIFE")}()
• (function(){console.log("hi I'm IIFE")}());
• var i = function(){console.log("hi I'm IIFE")}();
• true && function(){ console.log("hi I'm IIFE") }();
• 0, function(){ console.log("hi I'm IIFE") }();
• new function(){ console.log("hi I'm IIFE") }
• new function(){ console.log("hi I'm IIFE") }()

Please refrain from using any of these forms to impress your coworkers, but be aware that you might come across them in someone's code.

Applications and usefulness

If you declare variables and functions inside an IIFE, they are hidden from the outside world, allowing you to:

• Use the IIFE to isolate specific sections of the code and hide implementation details.
• By giving parameters to the IIFE for frequently used global objects (such as windows, documents, jQuery, etc.), you may specify the input interface of your code. You can then utilise a local scope to refer to these global objects inside the IIFE.
• When using closures in loops, use it in closures.
• IIFE serves as the foundation for the module pattern in ES5 code, preventing global scope pollution and providing the module interface to the outside world.