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).
(function () {
// Code to run immediately
})();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.
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
});The function is wrapped in parentheses to turn it into an expression .
Final Syntax
(function () {
// Code to run
})();The final () executes the function immediately.
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(); // ⛔ ReferenceErrorBut, the name greet exists only inside the function itself, not in the outer/global scope.
Why use a named IIFE?
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();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.