Self-Invoking Functions
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).
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
(function () {
let hidden = 42;
})();
let result = hidden; // ⛔ Error: hidden is not defined
Simple IIFE
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.
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.
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.
Arrow Function IIFE with Parameter
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();
Try it Yourself »
Notes
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.
