IIFE example parsing in JavaScript

In JavaScript,IIFE（Immediately Invoked Function Expression, call function expressions immediately) is a design pattern used to create a function that is executed immediately after definition.

The syntax of IIFE is usually as follows:

(function () {
  // Function body})();

or:

(function () {
  // Function body}());

Both forms can achieve the same effect, the main difference lies in the preferences of personal coding styles.

IIFE parsing and execution

1. Why do brackets need?

Functions in JavaScript are divided into two forms:

• Function declaration(Function Declaration):functionThe keyword starts with the function name after it.
• Function expressions（Function Expression）：functionKeywords appear in the context of the expression (such as assignment operations, brackets, etc.).

If you write directly:

function () {
  ('IIFE');
}();

A syntax error will be thrownSyntaxError: Unexpected token '(', because the JavaScript parser treats it as a function declaration, but the function declaration requires a name.

To solve this problem, we can wrap the entire function in brackets and make it into a function expression:

(function () {
  ('IIFE');
})();

Parentheses tell the parser that this is not a function declaration, but an expression, and then it is called directly.

2. IIFE execution process

• function () { ... }It becomes a function expression after being wrapped in brackets.
• Following()Indicates that this function is called immediately.
• IIFE is executed immediately upon parsing, without additional calls.

The role of IIFE

Avoid global variable pollutionIIFE can create a separate scope that encapsulates variables and logic to prevent them from leaking to the global scope.

(function () {
  var a = 10;
  (a); // 10
})();
(a); // Report an error：a is not defined

Modular codeBefore ES6 modularization became popular, IIFE was a common way to simulate modularity.

var module = (function () {
  var privateVar = 'This is private';
  return {
    publicMethod: function () {
      (privateVar);
    },
  };
})();
(); // Output：This is private

Initialization logic

IIFE is often used to execute initialization logic once when scripts are loaded.

(function () {
  ('Initializing application...');
  // Execute the initialization code})();

Avoid conflicts with other codes

When multiple scripts are run at the same time, IIFE can effectively isolate the variables of each script to avoid conflicts.

Other forms of IIFE

IIFE with parameters

(function (name) {
  ('Hello, ' + name);
})('World'); // Output：Hello, World

IIFE with return value

var result = (function () {
  return 42;
})();
(result); // Output：42

Arrow function IIFE

In modern JavaScript, you can use arrow functions to write IIFE:

(() => {
  ('This is an arrow function IIFE');
})();

Summarize

IIFE is an important design pattern in JavaScript, suitable for logic that isolates scope, avoids global variable pollution, and executes it once. After ES6, withlet、constand modularization, the use of IIFE has been reduced, but it is still a model worth understanding.

This is the end of this article about IIFE analysis in JavaScript. For more related IIFE content in js, please search for my previous articles or continue browsing the related articles below. I hope everyone will support me in the future!