Immediately Invoked Function Expressions
An IIFE is short for an Immediately Invoked Function Expression.
An IIFE is a function that invokes itself when defined.
What Is an IIFE?
Normally, a function runs only when it is called.
An IIFE runs automatically when the JavaScript engine reads it (compiles it).
Example
(function () {
// Code to run immediately
})();
Note: An IIFE function is defined and executed at the same time.
When is IIFE Used?
- To create a private scope
- To run setup code once
- In older JavaScript code
Avoid Polluting the Global Scope
Everything inside an IIFE is private to that function.
Variables inside an IIFE cannot be accessed from outside.
Examples
(function () {
let x = 10;
})();
// x is not accessible here
Simple IIFE
Example
(function () {
let text = "Hello! I called myself.";
})();
The function above is also called an anonymous self-invoking function (function without name).
How an IIFE Works
Function expressions can be made self-invoking.
A self-invoking function expression is invoked (started) automatically, without being called.
Function
function () {
// Code to run
};
Parentheses around the function tell JavaScript to treat the function as an expression.
Expression
(function () {
// Code to run
});
Final Syntax
(function () {
// Code to run
})();
Note: You can only self-invoke a function expression. You can not self-invoke a function declaration.
IIFE with Parameters
You can pass arguments into an IIFE.
Example
(function (name) {
let text = "Hello " + name;
})("John Doe");
IIFE with Return Value
An IIFE can return a value, which can be stored in a variable.
Example
let result = (function () {
return 5 + 5;
})();
Arrow Function IIFE
Arrow functions can also be used as IIFEs.
Example
(() => {
let text = "Hello! I called myself.";
})();
Arrow Function IIFE with Parameter
Example
((name) => {
let text = "Hello " + name;
})("John Doe");
IIFE in Modern JavaScript
Today, JavaScript modules often replace the need for IIFEs. Modules have their own scope by default.
Example
<script type="module">
let x = 10;
</script>
The variable x is scoped to the module and not global.
Named Function Expression IIFE
You can give an IIFE a name:
Example
(function greet() {
let text = "Hello! I called myself.";
})();
greet(); // ⛔ ReferenceError
But, the name greet exists only inside the function itself, not in the outer/global scope.
Why use a named IIFE?
For self-recursion functions (calling itself repeatedly):
Example
(function factorial(n) {
if (n <= 1) return 1;
return n * factorial(n - 1); // recursive call
})(5);
IIFE as a Module (Private Variables)
Example
const counter = (function () {
let value = 0;
return {
increment() { value++; },
get() { return value; }
};
})();
counter.increment();
let x = counter.get();
Note: Self Invocing Functions were heavily used before ECMAScript 6 Today, JavaScript let, const, and modules have reduced the need for them. But they can still be useful for: Running setup code that should immediately Creating private variables and private scope Avoiding global scope pollution Working with older JavaScript code that rely on them
When Not to Use IIFE
- When using modern JavaScript modules
- When simpler code is sufficient
Common Mistakes
- Forgetting the Final Parentheses Without (), the function will not run.
- Confusing IIFE with Normal Functions IIFEs cannot be called again.
- Overusing IIFEs Modern JavaScript often does not need them.
