IIFE is mainly used in JavaScript to avoid global variable pollution, create independent scope capture variable values, and perform one-time initialization tasks. 1. It prevents variables from being exposed to the global by providing a private scope, reducing naming conflicts; 2. Use closure features to create independent scopes for each iteration in the loop, correctly capturing the current variable value; 3. Used to execute initialization logic that only needs to be once, such as configuration loading. Although the ES6 module system reduces its frequency of use, IIFE is still of practical value in specific scenarios.

IIFE (Immediately Invoked Function Expression) in JavaScript is a common way of writing. Its main function is to execute it immediately while defining a function. This pattern was very popular in early JavaScript development, especially in modularization and avoiding global variable pollution.

Let’s take a look at the common uses and usage scenarios of IIFE.

1. Avoid global variable pollution

JavaScript Before there is no module system, all variables declared in the global scope become properties of window object (in the browser environment). If multiple scripts define variables at will, it is easy to cause naming conflicts.

IIFE provides a private scope in which variables defined within this scope are not exposed to the global environment. For example:

 (function () {
  var name = "Alice";
  console.log(name); // Alice
})();

console.log(name); // Error: name is not defined

This can protect variables from being accessed externally and prevent conflicts with other codes.

A common practice is to place the logic that needs to be encapsulated inside IIFE, exposing only the necessary interfaces, such as returning an object or function.

2. Create independent scopes to capture variable values

In early JavaScript (ES5 and before), variables declared by var have no block-level scope, which can easily lead to problems in loops. for example:

 for (var i = 0; i < 3; i ) {
  setTimeout(function () {
    console.log(i); // Output three times 3
  }, 100);
}

This problem can be solved by IIFE, because it creates a new scope for each loop:

 for (var i = 0; i < 3; i ) {
  (function (i) {
    setTimeout(function () {
      console.log(i); // Output 0, 1, 2
    }, 100);
  })(i);
}

This trick takes advantage of the closure and IIFE independent scope features to ensure that each setTimeout captures the i value of the current loop.

3. Initialize one-time tasks

Some codes only need to be executed once, such as initializing configuration, setting default values, or loading resources. Use IIFE to clearly express the intention of "this code only runs once".

for example:

 var config = (function () {
  var defaultConfig = { theme: "dark", debug: false };
  // It is possible to get the actual configuration from the server and merge the return Object.freeze(defaultConfig);
})();

The benefits of doing this are:

• The configuration generation logic is encapsulated
• The result is calculated only once
• The return value can be safely referenced elsewhere

Tips: Several ways to write IIFE

The essence of IIFE is a function expression that is executed immediately after definition. Common writing methods include:

• (function () {})();
• (function () {}())
• !function () {}();
• function () {}();

Although the last two can also work, their readability is slightly poor. Generally, the first two writing methods are recommended.

Basically that's it. Although the frequency of use has decreased after the popularity of ES6 module systems, IIFE is still useful in certain specific scenarios, especially where control scope and execution timing is required.

The above is the detailed content of Purpose and Usage of Javascript IIFE (Immediately Invoked Function Expression). For more information, please follow other related articles on the PHP Chinese website!