An Immediately Invoked Function Expression (IIFE) is a design pattern in JavaScript that involves defining and executing a function immediately after its creation. This pattern is often used to create a new scope for variables, which helps avoid polluting the global namespace and encapsulates code.

Syntax

The syntax for an IIFE involves wrapping the function definition in parentheses and then adding an extra pair of parentheses to invoke it immediately:

(function() {
  // Code to be executed
})();

Key Characteristics

1. Function Expression: The function must be defined as a function expression, not a function declaration. This is because only function expressions can be immediately invoked.

2. Self-Invocation: After defining the function, it is executed immediately by adding () at the end.

3. Encapsulation: Variables defined within the IIFE are not accessible from the outside scope, thus avoiding potential conflicts with other code.

Examples

1. Basic IIFE

   (function() {
     const message = 'Hello, World!';
     console.log(message);
   })();
   

   • In this example, the IIFE prints 'Hello, World!' to the console. The variable message is scoped within the IIFE and cannot be accessed outside.

2. Passing Parameters

   (function(name) {
     console.log(`Hello, ${name}!`);
   })('Alice');
   

   • Here, the IIFE takes a parameter name and immediately logs a greeting message using that parameter.

3. Creating a Module

   IIFEs are often used to create modules by encapsulating code and exposing only the necessary parts.

   const myModule = (function() {
     const privateVar = 'I am private';
   
     return {
       publicMethod: function() {
         console.log('This is a public method.');
       }
     };
   })();
   
   myModule.publicMethod(); // 'This is a public method.'
   console.log(myModule.privateVar); // undefined
   

   • In this example, privateVar is not accessible from outside the IIFE, but publicMethod is exposed and can be called on myModule.

4. Avoiding Global Namespace Pollution

   (function() {
     var localVariable = 'I am local';
     console.log(localVariable);
   })();
   
   console.log(localVariable); // ReferenceError: localVariable is not defined
   

   • The localVariable is confined to the IIFE and does not interfere with variables in the global scope.

Use Cases

1. Avoiding Global Variable Conflicts: By using IIFEs, you can create a local scope for variables, thus preventing conflicts with other scripts or libraries that might use the same variable names.

2. Modular Code: IIFEs are useful for encapsulating code and creating modules where you can expose only the necessary parts of the code while keeping other parts private.

3. Initialization: IIFEs can be used for code that needs to run once and only once, such as setting up initial values or configurations.

Evolution

With the introduction of ES6, many use cases for IIFEs have been replaced by block-scoped constructs like let, const, and modules (using import and export statements). However, understanding IIFEs is still valuable, especially for understanding older code and concepts.

Key Points

• Immediate Execution: IIFEs are executed as soon as they are defined.
• Encapsulation: They create a new scope to protect variables from the global namespace.
• Function Expression: They must be defined as function expressions, not declarations.
• Legacy Use: While modern JavaScript offers alternatives like modules, IIFEs are still useful for understanding scope and encapsulation.