Java Script Immediately Invoked Function Expression Programming Pattern

An IIFE (Immediately Invoked Function Expression) is a common JavaScript programming pattern used to execute a JavaScript function as soon as it is defined.

The primary reason to use an IIFE is to obtain data privacy. Any variables declared within the IIFE cannot be accessed by the outside world, making it a simple way to protect variables and methods from becoming part of the global scope. This helps prevent potential name conflicts and keeps your code modular.

Basic syntax:

(function() {
  // code here is isolated from the outer scope
})();

Basic example

You can also define parameters inside an IIFE:

(function(x, y) {
  // x and y are accessible here
})(5, 10);

In this example, the values 5 and 10 are passed into the IIFE as the parameters x and y.

By using an IIFE, you can create local scopes without polluting the global scope, thus making your code more maintainable, readable, and reusable. It's especially useful when you are developing large applications or if you are using third-party libraries that might have conflicting variable names.

More complex example

Imagine you are developing a library that manages user interactions on a webpage. You want to keep all your functions and variables private to avoid conflicts with other scripts, but you also want to expose a public API for other developers to use.

Here's how you might structure such a library using an IIFE:

var myLibrary = (function() {
  // Private variables
  var users = [];
 
  // Private functions
  function addUser(user) {
    users.push(user);
  }
 
  function removeUser(user) {
    var index = users.indexOf(user);
    if (index > -1) {
      users.splice(index, 1);
    }
  }
 
  function logUsers() {
    console.log(users);
  }
 
  // Public API
  return {
    addUser: function(user) {
      addUser(user);
      console.log("User added:", user);
    },
    removeUser: function(user) {
      removeUser(user);
      console.log("User removed:", user);
    },
    printUsers: function() {
      logUsers();
    }
  };
})();
 
// Usage of the public API
myLibrary.addUser("Alice");
myLibrary.addUser("Bob");
myLibrary.printUsers(); // Outputs: ["Alice", "Bob"]
myLibrary.removeUser("Alice");
myLibrary.printUsers(); // Outputs: ["Bob"]

Here IFE is used to encapsulate the entire library. It contains private variables and functions that are inaccessible from the outside, but it also defines a public API that is exposed through the returned object.
By using an IIFE in this way, you can create a well-structured, modular piece of code that is easy to maintain, while still providing a clear and concise interface for other developers to interact with.

Named IIFE functions

Naming an IIFE function can be helpful for debugging, as the name can appear in stack traces and provide clarity about the function's purpose.

Example of a named IIFE:

(function namedIIFE() {
  console.log('This is a named IIFE');
})();

The name of the IIFE, in this case, is namedIIFE.

IIFE function name is not accessible outside the function itself, so it's primarily used for clarity within the code or debugging purposes. If you try to call namedIIFE() outside of its definition, it will result in a ReferenceError, as the name is scoped to the function itself.

IIFE and ES6

The introduction of ES6 brought many new features to JavaScript that offer alternatives to the Immediately-Invoked Function Expressions (IIFE) pattern. Specifically, the addition of block-scoped variables (let and const) and ES6 modules can handle many of the use cases for which IIFE was originally employed.

Block Scope with let and const: Before ES6, using IIFE was a common way to create a new scope to avoid variable hoisting and potential conflicts. With the introduction of let and const, you can now create block-scoped variables without needing to use an IIFE.
ES6 Modules: IIFE was also used to encapsulate functionality and create private and public interfaces, much like the module pattern. ES6 modules allow you to export and import functionality between files, making it easier to structure your code in a modular way without the need for IIFE.

However, IIFE is not completely obsolete and can still be relevant in certain scenarios:

In environments that do not support ES6 modules: If you're working in an environment that doesn't support ES6 modules (such as older browsers or certain server-side contexts), IIFE can still be a valuable tool for encapsulating code.
To execute a function as soon as it's defined: If you need a function to run immediately after it's defined, an IIFE is still a concise way to do that.
To create a private scope within a single file: If you're not working with modules but still want to create a private scope within a single file, an IIFE can be useful.

So while there are new tools in ES6+ that reduce the necessity of IIFE in many cases, there are still situations where it might be the best choice.

Med Java

Table of Contents

Java Script Immediately Invoked Function Expression Programming Pattern

Basic example

More complex example

Named IIFE functions

IIFE and ES6