Mariya Baig

Immediately Invoked Function Expression (IIFE)

What is IIFE?

An Immediately Invoked Function Expression (IIFE) is a JavaScript design pattern where a function is defined and executed immediately after it’s declared. It’s typically wrapped within parentheses to denote a function expression and followed by an additional pair of parentheses to invoke it immediately.

Function Expression

In JavaScript, we treat functions as first-class objects, meaning they can be manipulated and used just like any other data type, such as numbers or strings. This flexibility allows us to do a lot of cool things with functions, like returning them from other functions or passing them as arguments to other functions (which we call callbacks).

One neat feature is that we can also assign a function to a variable. Let’s look at an example:

const myFunction = function greeting() {
 return "Hello"
}

//myFunction holds the named greeting() function. But we can also write the same function without giving it a name
//it is the same function without giving it a name

const myFunction = function () {
 return "Hello"
}

Compare these function expressions to a function declaration:

function greeting() {
 return "Hello!"
}

With a function declaration, we just define the function without assigning it to a variable.

While it’s not always necessary, it’s common to see function expressions assigned to variables. The important thing to remember is that a function expression is just a function written as part of another expression’s syntax. Easy, right?

To make an Immediately Invoked Function Expression (IIFE), you first make a function declaration

functionName() { // Your code goes here }

Then, to turn it into an IIFE, you follow these steps:

  • Wrap parentheses around the function to create a function expression.
(functionName() { 
// Your code goes here 
})
  • Add another set of parentheses immediately after to invoke the function right away.

So, it looks like this:

(functionName() { 
// Your code goes here 
})();

That’s it! You’ve created an IIFE.

  • The function is enclosed within parentheses (functionName() { … }).
  • It’s followed by another pair of parentheses () to immediately invoke the function.
  • The entire expression (functionName() { … })() creates a function and immediately executes it.

Named IIFE

(function named() {
    console.log(`I'm named IIFE`)
})();

Unnamed IIFE

((name) => {
    console.log(` Hello ${name}`)
})('Coder');

If two IIFE are used, it’s a good practice to end each with a semicolon to avoid potential issues.

What is the need of IIFE?

Now, you might be wondering, “Why do I need to create a function just to run it right away?” Well, IIFE offers several benefits:

Avoiding Global Scope Pollution:

One of the primary motivations behind using IIFEs is to prevent global scope pollution. When variables are declared inside an IIFE, they are not added to the global scope. This helps in avoiding naming conflicts with other scripts and libraries, thus promoting a cleaner and more maintainable codebase.

It helps to keep our code tidy by preventing variables and functions from cluttering up the global space.

Encapsulation:

IIFEs facilitate encapsulation by allowing variables to be declared within their scope. These variables are not accessible from the outside, providing a level of privacy and preventing unintended modifications. This encapsulation is crucial for building modular and reusable code components.

Privacy : It gives us a way to create variables that aren’t accessible from outside the function

Isolation:

IIFEs aid in isolating code by creating a separate scope for their execution. Variables declared inside an IIFE do not interfere with variables in the outer scope, and vice versa. This isolation ensures that the code behaves predictably and reduces the risk of unintended side effects.

It keeps our code safe from outside interference, so we don’t accidentally break things by changing stuff we shouldn’t.

Module Pattern:

The module pattern is a common design pattern in JavaScript, and IIFEs are often used in its implementation. By leveraging IIFEs, developers can create modules with private and public methods within the same scope. This allows for better organization and encapsulation of functionality, making the code more modular and easier to manage.

It’s a neat trick for creating modules – chunks of code that can be reused without worrying about messing up other parts of our program.

Avoiding Hoisting Issues:

Another advantage of using IIFEs is that they help in avoiding hoisting issues that can occur with function declarations. By using a function expression within an IIFE, you ensure that the function is defined and invoked in the correct order, thus preventing potential bugs and inconsistencies.

mariya