Immediately Invoked Function Expressions (IIFE) in JavaScript
An immediately invoked function expression (IIFE for short) is a JavaScript design pattern that declares an anonymous function and immediately executes it.
// Prints "Hello, World!"
(function() {
console.log('Hello, World!');
})();You can also use arrow functions with the IIFE pattern:
// Prints "Hello, World!"
(() => {
console.log('Hello, World!');
})();The parenthesis around function() { ... } are mandatory: without those
parenthesis, you would get a syntax error. That's because the parenthesis
tell the JavaScript language parser to treat the function definition as
an expression.
Why IIFEs?
IIFEs are useful because they can define local variables that aren't accessible outside the IIFE. For example, IIFEs are often used to execute JavaScript in the browser without polluting global scope.
<script>
// Execute some code immediately without defining `answer` as a
// global variable.
(function() {
var answer = 42;
})();
typeof answer; // 'undefined'
</script>You may also see IIFEs for cases where you want some temporary
variables for one calculation that you don't want to expose to
other calculations. For example, suppose you want to compute
the total cost of a shopping cart, but don't want the salesTax
variable to leak to the surrounding scope:
const subtotal = 40;
const total = (function() {
const salesTax = product.salesTaxRate * subtotal;
return subtotal + salesTax;
})();With Unary Operators
You can omit the parenthesis around IIFEs if you use the IIFE with
a unary operator, like the void operator.
// Prints 'Hello, World'
void function() { console.log('Hello, World'); }();You're unlikely to see the void pattern in production, but this
pattern is useful with async functions
because await is a unary operator. So you can await on an
async IIFE:
const answer = await async function() {
return 42;
}();
answer; // 42