Hello coders 👋, This is going to be our 8th question of the front-end interview questions series you can access all the questions by clicking here

IIFE (Immediately Invoked Function Expression)

IIFE (Immediately invoked Fuction Expression) is a fuction that calls (invokes) as soon as it is defined. you don’t have to call the function explicitly. You have to wrap the function inside parentheses and add another parentheses at the end (...)() to create an IIFE. You can create IIFE either by using anonymous function or named function. There are no diffrences between named and anonymous IFFEs, both work the same way. We can pass arugments too as shown in the example.

It is a design pattern which is also known as a Self-Executing Anonymous Function.

Syntax

// Syntax
(function () {
  // logic goes here...
})();

// Anonymous IIFE
(function () {
  console.log("I will invoke automatically. you don't have to do anything");
})();

// Named IIFE
(function greet(name) {
  console.log(`Hello ${name}`);
})("shahzaib");

// You may encounter this syntax also
(function () {
  // logic goes here...
}());

Private Scope

IIFE plays a crucial role in encapsulating code and variables within a private scope. This isolation ensures that variables declared within an IIFE are not accessible from the global scope or other parts of your code. This feature is essential for maintaining data privacy and preventing variable conflicts.

const counter = (function () {
  let count = 0;

  return function () {
    count += 1;

    return count;
  };
})();

console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3

In the above example, an IIFE is used to immediately run a function. This function runs and set count to 0 and returns an anonymous function that is stored in the counter variable.

Note that the function that is being returned forms a closure (meaning you can accesses variable of parent function) . This allows counter, which points to the returned inner function, to maintain a private, yet mutable state that cannot be accessed outside the function. As such, we can call the function to increase the value of count.

How IIFE Helps

  • Encapsulation We see in the above example how IIFE helped us to encapsulate the counter variable by creating a private scope. Encapsulation is crucial in larger applications and when working with multiple libraries.
  • Avoiding Global Pollution By encapsulating code within IIFE, you avoid polluting the global object. It keeps your code modular and self-contained.
  • Immediate Execution IIFE executes code immediately after declaration. This behaviour is beneficial when you need to perform initialization tasks, configure settings
  • Data Privacy IIFE allows you to create closures, which help maintain data privacy. You can hide variables and functions inside an IIFE, exposing only what’s necessary. This concept is fundamental to the Module Pattern, a widely-used design pattern in JavaScript as we saw above in the counter example.

If you find this helpful please share with your network ✅.

Happy Coding 🙌 !