Explain about IIFEs in JavaScript

In this article, you will learn about JavaScript immediately invoked function expressions (IIFE). A JavaScript immediately Invoked Function Expression is a function defined as an expression and executed immediately after creation. The following shows the syntax of defining an immediately invoked function expression.

Syntax:

(function(){
    // Function Body goes here
})();

IIFEs can also be used with arrow functions as shown below.

(() => {
    // Function Body goes here
})()

Now that we understand what exactly is an IIFE let us try and understand some of the situations where we might need to use IIFE or Self executing functions.

Common Use Cases of IIFEs

1. Avoiding the pollution of global execution context:

An immediately invoked anonymous function may be used for the initialization code. There are variables needed to set up the environment which afterwards is no longer used and should not clutter the namespace. If you know about execution contexts in javascript then you must be aware of the concept of global scope. Any variable or function that is present in the global scope is accessible anywhere in the whole program. But sometimes we need to make sure that those variables are not accessible only to the specific parts of the program. 

For Example: Consider that you are writing a library and for the functional part you are going to use variable names that are easy to understand and match with the context you need to use them for. But in a library, you would not want to force any other developer to use some different name just because you are using some variable name in the library code. You want to ensure that any existing (or new) code doesn’t accidentally interfere with other variables or override functions and methods. The way to ensure that such accidents don’t happen is to wrap all of your code inside an IIFE. This is why a lot of libraries write their source code in IIFE style. 

Example:

HTML

<script>

    let firstVariable = "Hello";
    (() => {
        // Some initiation code
        let secondVariable = "Geeks";
    })();

    // The secondVariable will
    // be discarded after the function is executed
    console.log("First Variable:", firstVariable)
    console.log("Second Variable:", secondVariable)
</script>

Output:

First Variable: Hello
Uncaught ReferenceError: secondVariable is not defined

2. To make variables private:

IIFEs are also useful for establishing private methods for accessible functions while still exposing some properties for later use.

Example:

HTML

const User = (() => {

    let userName = "Geek";
    let userSecret = "Likes using IIFE";
    return {
        getName: () => userName,
        getSecret: () => userSecret
    }
})();

console.log(User.getName()); // returns "Geek"
console.log(User.getSecret()); // returns "Likes using IIFE"
console.log(User.userName); // returns undefined

Output: In the above example, we can easily access get methods that are returned from the functions to us but we can not access any properties that are defined inside the function. Many javascript libraries follow a similar pattern.

Geek
Likes using IIFE
undefined

Conclusion: An IIFE may not see being used a lot in regular coding projects but it is one of those things that exist and has practical use cases in the real world. You might find yourself creating projects which might be used by other developers and concepts like IIFE will definitely come in handy. You might also find a few open-source projects that extensively use concepts like closures, IIFE, function currying, composition, and many more. These concepts are the heart of functional programming and javascript so knowing such topics will definitely help you in your journey of learning JavaScript.