What is an immediately invoked function expression (IIFE)?

An Immediately Invoked Function Expression (IIFE) is a JavaScript function that runs as soon as it is defined. It is a design pattern used to create a private scope, ensuring that variables declared inside the function do not "leak" out into the global scope and conflict with other scripts.

IIFEs can also have parameters.

An IIFE is composed of two main parts:

1
The Grouping Operator (): This wraps an anonymous function, turning it from a declaration into an expression.
2
The Invocation (): This immediately executes the function.

Why do we use IIFEs?

1
Avoiding Global Scope Pollution: In older versions of JavaScript (before let and const), any variable declared with var inside a script was added to the global window object. IIFEs were the primary way to 'trap' variables so they wouldn't conflict with other scripts.
2
Creating Private Variables: Because the function creates its own Execution Context, variables defined inside the IIFE cannot be accessed from the outside.
3
Initialization Logic: If you have code that only needs to run once when the page loads (like setting up event listeners or fetching initial data), an IIFE keeps that setup logic separate from the rest of your app.

Are IIFEs still relevant?

1
With the introduction of ES Modules (import/export) and block-scoping (let/const), the need for IIFEs has decreased, but they are still used in specific scenarios
2
Top-level await: Wrapping code to use await in environments that don't support it at the top level.
3
Minification: Minifiers often wrap code in IIFEs to safely rename variables to single letters without breaking global logic.
4
Module Patterns: In libraries where you want to expose only a specific API while keeping helper functions hidden.

Difficulty: 5/10

Topics: Scope & Closures, Module Pattern, Legacy Migration

Scenario Questions

0-2 years experience

1
Imagine you're writing a quick utility script that needs to run on a legacy page alongside several other third-party scripts. How would you structure your code to ensure your temporary variables don't accidentally overwrite or get overwritten by other scripts on the global window object?
2
We have a legacy for loop using var that attaches click handlers to a list of buttons, but every button alerts the index of the last element. Without changing var to let, how would you use a self-executing function to capture the correct index for each button?
3
You need to initialize a third-party analytics SDK as soon as the script loads, but you want to keep the setup configuration hidden from the rest of the application. How would you execute this setup block immediately without leaving any trace in the global scope?

2-5 years experience

1
You're refactoring an older jQuery-based codebase and you see a lot of files wrapped in '(function($) { ... })(jQuery);'. Why did the original developers wrap the code this way, and what bugs might we introduce if we blindly strip these wrappers out during our modern ES module migration?
2
Suppose you're building a lightweight state manager for a widget that needs to run in a highly restricted environment where you can't use ES modules or build tools. How would you design a self-contained module that exposes a public API but keeps its internal state completely private and inaccessible from the console?
3
We have a script where we want to use await at the top level, but we are targeting an older environment that doesn't support top-level await. How would you structure your entry point to run this async initialization logic immediately on load?

5-8 years experience

1
Your team is migrating a massive legacy monolithic frontend (which heavily relies on IIFEs for namespacing and modularity) to a modern monorepo using ES modules and Vite. How would you orchestrate this migration to ensure we don't break global state dependencies during the transition period?
2
When designing a library that needs to be consumed via a simple script tag (as a global), as a CommonJS module, and as an ES module, how do build tools like Rollup or Webpack utilize IIFEs in their output formats, and what are the performance implications of these wrappers on bundle size and parsing time?

8+ years experience

1
We are building a micro-frontend platform where untrusted third-party widgets need to run on the same page. While we'd love to use iframes, performance constraints forbid it. How would you evaluate using IIFEs combined with 'with' statements or Proxy objects to create a lightweight execution sandbox, and what are the security limitations of this approach?
2
You've inherited a 10-year-old enterprise application where modules are loaded dynamically via custom IIFE-based script injectors. The business wants to modernize to a federated module architecture without a complete rewrite. How would you design a bridge layer that allows legacy IIFE modules to interoperate with modern Webpack Module Federation remotes?

Follow-up Questions

❓How does the JavaScript engine parse an IIFE differently when it starts with a grouping operator versus a unary operator like void or exclamation mark?
❓If we replace an IIFE with a simple block scope using let or const, what happens to the private variables inside?
❓How do modern bundlers like Webpack or Rollup handle tree-shaking when code is wrapped in an IIFE?