Immediately Invoked Function Expressions (IIFE) in JavaScript

May 27, 2020

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

Did you find this tutorial useful? Say thanks by starring our repo on GitHub!

More Fundamentals Tutorials

×
Mastering JS
Hi, I'm a JavaScript programming bot. Ask me something about JavaScript!