This is an old revision of the document!
Table of Contents
Java Script Immediately Invoked Function Expression Programming Pattern
An IIFE (Immediately Invoked Function Expression) is a common JavaScript programming pattern used to execute a JavaScript function as soon as it is defined.
The primary reason to use an IIFE is to obtain data privacy. Any variables declared within the IIFE cannot be accessed by the outside world, making it a simple way to protect variables and methods from becoming part of the global scope. This helps prevent potential name conflicts and keeps your code modular.
Basic syntax:
(function() { // code here is isolated from the outer scope })();
Basic example
You can also define parameters inside an IIFE:
(function(x, y) { // x and y are accessible here })(5, 10);
In this example, the values 5 and 10 are passed into the IIFE as the parameters x and y.
More complex example
Imagine you are developing a library that manages user interactions on a webpage. You want to keep all your functions and variables private to avoid conflicts with other scripts, but you also want to expose a public API for other developers to use.
Here's how you might structure such a library using an IIFE:
var myLibrary = (function() { // Private variables var users = []; // Private functions function addUser(user) { users.push(user); } function removeUser(user) { var index = users.indexOf(user); if (index > -1) { users.splice(index, 1); } } function logUsers() { console.log(users); } // Public API return { addUser: function(user) { addUser(user); console.log("User added:", user); }, removeUser: function(user) { removeUser(user); console.log("User removed:", user); }, printUsers: function() { logUsers(); } }; })(); // Usage of the public API myLibrary.addUser("Alice"); myLibrary.addUser("Bob"); myLibrary.printUsers(); // Outputs: ["Alice", "Bob"] myLibrary.removeUser("Alice"); myLibrary.printUsers(); // Outputs: ["Bob"]
Here IFE is used to encapsulate the entire library. It contains private variables and functions that are inaccessible from the outside, but it also defines a public API that is exposed through the returned object.
By using an IIFE in this way, you can create a well-structured, modular piece of code that is easy to maintain, while still providing a clear and concise interface for other developers to interact with.
IIFE and ES6
The introduction of ES6 brought many new features to JavaScript that offer alternatives to the Immediately-Invoked Function Expressions (IIFE) pattern. Specifically, the addition of block-scoped variables (let and const) and ES6 modules can handle many of the use cases for which IIFE was originally employed.
- Block Scope with let and const: Before ES6, using IIFE was a common way to create a new scope to avoid variable hoisting and potential conflicts. With the introduction of let and const, you can now create block-scoped variables without needing to use an IIFE.
- ES6 Modules: IIFE was also used to encapsulate functionality and create private and public interfaces, much like the module pattern. ES6 modules allow you to export and import functionality between files, making it easier to structure your code in a modular way without the need for IIFE.
However, IIFE is not completely obsolete and can still be relevant in certain scenarios:
- In environments that do not support ES6 modules: If you're working in an environment that doesn't support ES6 modules (such as older browsers or certain server-side contexts), IIFE can still be a valuable tool for encapsulating code.
- To execute a function as soon as it's defined: If you need a function to run immediately after it's defined, an IIFE is still a concise way to do that.
- To create a private scope within a single file: If you're not working with modules but still want to create a private scope within a single file, an IIFE can be useful.
So while there are new tools in ES6+ that reduce the necessity of IIFE in many cases, there are still situations where it might be the best choice.