- Home
- /
- Tutorials
- /
- JavaScript Tutorial
- /
- JavaScript IIFE
JavaScript Functions
JavaScript IIFE
A JavaScript IIFE is a function that runs immediately after it is defined.
IIFE stands for Immediately Invoked Function Expression.
It is written inside brackets and called straight away with a second pair of brackets.
Example
Example
javascript
(function () {
console.log("This runs at once");
})();The function is defined and called on the same line.
It has no name, so nothing else can call it again.
What is an IIFE?
An IIFE is a function expression that calls itself as soon as it is created.
The outer brackets turn the function into an expression, and the final () runs it.
Its main purpose is to keep variables private, so they do not leak into the surrounding code.
Syntax
Syntax
javascript
(function () {
// code to run
})();The final pair of brackets is what actually calls the function.
Keeping Variables Private
Variables declared inside an IIFE cannot be reached from outside.
Before block scope existed, this was the main way to avoid polluting the global scope.
Example
Example
javascript
(function () {
const secret = "hidden";
console.log(secret);
})();
console.log(typeof secret);The second line prints undefined, because the variable does not exist outside.
An IIFE with Parameters
You can pass values in through the calling brackets.
Example
Example
javascript
(function (name) {
console.log("Hello " + name);
})("Ada");The argument goes in the final brackets, just like any other call.
Returning a Value
An IIFE can return a value, which is often stored in a variable.
Example
Example
javascript
const config = (function () {
const version = "1.0";
return { version: version };
})();
console.log(config.version);Here, only the returned object is visible outside.
The Arrow Function Form
An IIFE can also be written with an arrow function.
Example
Example
javascript
(() => {
console.log("Arrow IIFE");
})();The structure is the same: brackets around it, then brackets to call it.
Do You Still Need One?
Block scope with let and const, and modules, now solve the same problem.
You will still meet IIFEs in older code, so it is worth recognising the shape.
Example
Example
javascript
{
const secret = "hidden";
console.log(secret);
}
console.log(typeof secret);A plain block with const keeps the variable private in modern JavaScript.
Complete Example
Complete Example
html
<!DOCTYPE html>
<html>
<head>
<title>JavaScript IIFE</title>
</head>
<body>
<h1>JavaScript IIFE</h1>
<p id="result"></p>
<script>
const app = (function () {
const name = "My App";
const version = "1.0";
return {
title: name + " v" + version
};
})();
document.getElementById("result").innerHTML = app.title;
</script>
</body>
</html>Try It Yourself
Run the above example in the Try It Editor.
Try changing the version:
Set version to "2.0" and see the title update.
Important Points
- An IIFE is a function that runs as soon as it is defined.
- The outer brackets make it an expression; the final brackets call it.
- Variables inside an IIFE stay private.
- It can take arguments and return a value.
- Block scope and modules now cover most of what IIFEs were used for.
Conclusion
A JavaScript IIFE runs once, immediately, and keeps its variables to itself.
It was the standard way to create private scope before let and modules existed.
Understanding the pattern helps you read older JavaScript with confidence.
