What is the benefit of storing an IIFE in a variable?

Question

What is the benefit of storing an IIFE in a variable?

When it comes to using IIFE in JavaScript and AngularJS, I have come across two common structures:

Structure 1:

//IIFE Immediately Invoked Function Expression
(function () {


}());

However, there is another structure where the IIFE is assigned to a variable as seen below:

Structure 2:

//IIFE Immediately Invoked Function Expression assigned to doStuff variable
var doStuff = (function () {


}());

PLEASE NOTE: This inquiry is not about what an IIFE is, but rather focuses on why one would use a return variable within an IIFE and how it relates to Angular practices.

In Angular, Structure 1 works perfectly fine. However, in many native JavaScript examples, Structure 2 is preferred. The assumption is that anything encapsulated within doStuff will be accessible and callable through it. Yet, the exact reasoning behind this distinction between the two methods remains unclear. Any help in understanding when to use each method would be greatly appreciated.

javascript angularjs

Answer 1

Answer №1

The rationale behind Method #2 is that the IIFE contains code that returns something, typically an object or a function. This returned value is what gets assigned. For example:

//IIFE Immediately Invoked Function Expression assigned to doStuff variable
var doStuff = (function () {
    var privateInformationForDoStuff = 0;

    function doStuff() {
        console.log(++privateInformationForDoStuff);
    }

    return doStuff;
}());

In this scenario, the variable becomes a reference to a function that increments a number each time it's called. The IIFE ensures that the privateInformationForDoStuff remains immutable and exclusive to the doStuff function.

This approach, known as the "revealing module pattern", was commonly used to construct objects with encapsulated functions and private data within the module:

var MyApp = (function() {
    var privateModuleInformation;
    var morePrivateModuleInformation;
    // ...

    function doThis() {
        // ...
    }

    function doThat() {
        // ...
    }

    function doTheOther() {
        // ...
    }

    return {
        doThis: doThis,
        doThat: doThat,
        doTheOther: doTheOther
    };
})();

In contemporary settings, utilizing an actual module is preferred, although this wasn't always a feasible option in the past.

Answer 2

The rationale behind Method #2 is that the IIFE contains code that returns something, typically an object or a function. This returned value is what gets assigned. For example:

//IIFE Immediately Invoked Function Expression assigned to doStuff variable
var doStuff = (function () {
    var privateInformationForDoStuff = 0;

    function doStuff() {
        console.log(++privateInformationForDoStuff);
    }

    return doStuff;
}());

In this scenario, the variable becomes a reference to a function that increments a number each time it's called. The IIFE ensures that the privateInformationForDoStuff remains immutable and exclusive to the doStuff function.

This approach, known as the "revealing module pattern", was commonly used to construct objects with encapsulated functions and private data within the module:

var MyApp = (function() {
    var privateModuleInformation;
    var morePrivateModuleInformation;
    // ...

    function doThis() {
        // ...
    }

    function doThat() {
        // ...
    }

    function doTheOther() {
        // ...
    }

    return {
        doThis: doThis,
        doThat: doThat,
        doTheOther: doTheOther
    };
})();

In contemporary settings, utilizing an actual module is preferred, although this wasn't always a feasible option in the past.

What is the benefit of storing an IIFE in a variable?

Answer №1

Similar questions

The UTF-8 encoded string in Node.js displays a mysterious black question mark

Calculating the function using data in a Vue component

Efficient Local Database with Javascript

Tips for managing variables to display or hide in various components using Angular

Building a dynamic web application using JDBC Template, AngularJS, and RESTful APIs

Find and Scroll Dropdown Menu with Bootstrap Framework

Utilizing AngularJS to locate duplicates during input validation using ng-repeat and placing ng-form within a nested form

Understanding how the context of an Angular2 component interacts within a jQuery timepicker method

Unlimited digest loop in Angular.js caused by nested ng-repeat and filter

Guide to utilizing the THREE.OBJExporter

Load Vue dynamically to implement reCAPTCHA script

What is the best way to incorporate two separate events in AngularJS for a DOM element based on whether the user is accessing the site

Encountering an issue while updating information following the migration to vue-chartjs 4

Error Message: Undefined Constructor for Firebase Google Authentication

Changing variables from a different file in node.js: a guide

Is it possible for React Server Side rendering to be re-rendered on the client side?

When a div tag containing PHP is empty, it should either be hidden or show specific text based on your requirements

Using Javascript to Swap the Content of an Element

Optimize your mobile experience by creating a notification menu that is scrollable and fixed in position

I am in need of a datepicker for my project that will display the END date as the current date and set the START date as 7 days before the END date