IIFE in JavaScript (Immediately Invoked Function Expression)

Introduction

In this tutorial, you will learn the concept of an Immediately Invoked Function in JavaScript.

an IIFE (Immediately Invoked Function Expression) is a function that runs immediately after it is defined.

What is IIFE?

An IIFE is a function that is wrapped inside parentheses and executed immediately.

Example:


(function () {
   // code here
})();

Explanation:

1. () around the function → converts it into an expression

2. () at the end → invokes the function immediately

Example of IIFE


(function() {
   console.log("Hello World!");
})();

IIFE with Parameters

Now, you will pass a parameter into the invoke function.

Example:


(function(name) {
   console.log("Hello " + name);
})("John");

Output:

Hello John

Why Use IIFE?

Developers use IIFE for several reasons.

1. Avoid Global Variables


(function() {
   var message = "Private variable";
   console.log(message);
})();

Note: The variable message cannot be accessed outside the function.

2. Create Private Scope

IIFE helps protect variables from the global scope.

Example:


var counter = (function() {
   var count = 0;
   return function() {
      count++;
      return count;
   };
})();
console.log(counter());
console.log(counter());

Output:

1
2

Types of IIFE

There are many types of IIFE.

1. Anonymous IIFE

Example:


(function(){
   console.log("Anonymous IIFE");
})();

2. Arrow Function IIFE

Example:


(() => {
   console.log("Arrow IIFE");
})();

IIFE vs Normal Function

Feature Normal Function IIFE
Execution Called manually Runs immediately
Global scope pollution Possible Prevented
Use case General logic Encapsulation

Advantages of IIFE

There are many advantages of IIFE

1. It avoids global scope pollution.

2. It creates private variables.

3. It executes code instantly.

4. It is useful for initialization code.

Disadvantages of IIFE

1. It is harder to debug sometimes.

2. It is less useful with modern ES6 modules.

Real Life Example of IIFE in JavaScript

1. Avoiding Global Variable Conflicts

Suppose you have a website that uses multiple JavaScript files. If all scripts create global variables, they may overwrite each other, causing bugs.

When you use an IIFE, variables stay inside a private scope.

Example:


(function () {
  let message = "Welcome to our website!";
  console.log(message);
})();

Note: the message cannot be accessed outside the function, preventing global scope pollution.

Real Scenario:

A developer adds a script for a navbar feature. Another script also uses the same variable name.
Using IIFE ensures that both scripts do not conflict with each other.

2. Running Setup Code Immediately

Sometimes we want code to run only once when the page loads.

Example:


(function () {
  console.log("Website analytics initialized");
})();

Real Scenario:

When a page loads, an analytics script runs immediately to track page visits without leaving unnecessary variables in the global scope.

Interview Questions

Q 1: What does IIFE stand for in JavaScript?
Ans: IIFE stands for Immediately Invoked Function Expression. It is a function that runs immediately after it is defined.
Example: 
(function () {
console.log("Hello Developer!");
})();
Q 2: Why are parentheses used in an IIFE?
Ans: Parentheses convert a function declaration into a function expression, allowing it to be executed immediately.
Example: 
(function () {
 console.log("This runs immediately");
})();
Without parentheses, JavaScript treats it as a normal function declaration.
Q 3: What will be the output?
let result = (function () {
 let x = 5;
 return x * 2;
})();
console.log(result);
Ans: 10
Q 4: What is the syntax of an IIFE?
Ans: Basic syntax: 
(function () {
 // code here
})();
Arrow function version: 
(() => {
 console.log("IIFE using arrow function");
})();
Q 5: Can an IIFE return a value?
Ans: Yes, an IIFE can return a value.
Example: 
let sum = (function () {
 return 5 + 3;
})();

Conclusion

Immediately Invoked Function Expression (IIFE) allows functions to execute immediately after they are defined. It is commonly used to avoid global variable pollution, create private scopes, and execute setup code instantly.

In simple words, IIFE helps keep JavaScript code clean, organized, and safe from unwanted variable collisions.

Advanced JavaScript Patterns