JavaScript IIFE (Immediately Invoked Function Expressions)

An IIFE (Immediately Invoked Function Expression) is a JavaScript function that runs as soon as it’s defined. By wrapping your code in an IIFE, you prevent global-scope pollution and variable name conflicts—essential for writing modular, maintainable scripts

In this guide, you’ll learn what an IIFE is, how it works, and when you should use it. We’ll also cover common patterns, modern alternatives, and answer frequently asked questions.

---

Why Use an IIFE?

In JavaScript, variables declared with var are function-scoped, and before the introduction of let and const, this often led to variable collisions in the global scope.

IIFEs solve this problem by:

• Encapsulating variables to avoid polluting the global namespace
• Creating private scopes for logic that doesn’t need to be reused
• Supporting modular programming before ES6 modules existed
• Allowing immediate execution of setup code

---

A Common Problem: Variable Name Conflicts

Imagine you write the following code:

function showMessage() {
    var text = "Hello World";
    console.log(text);
}
showMessage();
console.log(text); // ReferenceError: text is not defined

While this works, the function needs to be named and called separately. What if you only need the logic once?

---

Enter IIFE: A Cleaner Alternative

An IIFE lets you write and run a function immediately, like this:

(function () {
    var text = "Hello World";
    console.log(text);
})();
console.log(text); // ReferenceError: text is not defined

Here’s what’s happening:

• The function is wrapped in parentheses to turn it into an expression.
• It’s invoked immediately with () at the end.
• The variable text remains scoped to the function block.

---

Syntax Variations of IIFE

There are a few different ways to write IIFEs:

(function () {
    // Your code here
})();

(function () {
    // Your code here
})();

(() => {
    // ES6 arrow function IIFE
})();

I prefer the first syntax — it’s clean, readable, and widely used.

---

Real-World Use Cases for IIFE

• Initializing scripts that run once
• Wrapping jQuery plugins to avoid $ conflicts
• Creating private variables in legacy JavaScript
• Avoiding global scope pollution in older codebases

---

IIFE vs ES6 Modules

Today, ES6 Modules (import/export) offer better modularity and scope isolation. However, IIFEs are still useful for:

• In-browser scripts without build tools
• Older JavaScript environments
• Quick utilities in vanilla JS

---

Frequently Asked Questions

What does IIFE stand for?

IIFE stands for Immediately Invoked Function Expression.

Why use an IIFE instead of a normal function?

IIFEs run as soon as they are defined and help keep variables out of the global scope.

Can you use arrow functions with IIFE?

Yes! Here’s an example:

(() => {
    console.log("Arrow function IIFE");
})();

Are IIFEs still used in modern JavaScript?

While less common due to ES6 modules, they are still useful in specific cases — especially when working with legacy code or inline scripts.

---

Summary

IIFEs are a powerful technique for isolating scope, avoiding variable collisions, and executing code immediately. Whether you’re maintaining an older project or writing modern JS without modules, IIFEs still have a place in your toolkit.

Start using IIFEs where appropriate and see how they help keep your code clean and safe.