Immediately Invoked Function Expressions (IIFE) in JavaScript
Last Updated :
11 Mar, 2024
Immediately Invoked Function Expressions (IIFE) are JavaScript functions that are executed immediately after they are defined. They are typically used to create a local scope for variables to prevent them from polluting the global scope.
Syntax:
(function (){
// Function Logic Here.
})();
Immediately Invoked Function Expressions (IIFE) Examples
Example: Here's a basic example of an IIFE .
JavaScript
(function() {
// IIFE code block
var localVar = 'This is a local variable';
console.log(localVar); // Output: This is a local variable
})();
OutputThis is a local variable
Explanation: The function is wrapped in parentheses (function() { ... })
, followed by ()
to immediately invoke it.
Example 2: Here's another example of an IIFE that stores and display result.
JavaScript
var result = (function() {
var x = 10;
var y = 20;
return x + y;
})();
console.log(result); // Output: 30
Explanation: The IIFE is immediately invoked and returns the sum of x
and y
. The result of the IIFE, which is 30
, is assigned to the variable result
.
IIFEs are commonly used to create private scope in JavaScript, allowing variables and functions to be encapsulated and inaccessible from outside the function.
Example: Here's an example demonstrating how an IIFE can be used to create private variables:
JavaScript
var counter = (function() {
var count = 0;
return {
increment: function() {
count++;
},
decrement: function() {
count--;
},
getCount: function() {
return count;
}
};
})();
// Increment the counter
counter.increment();
counter.increment();
counter.increment();
console.log(counter.getCount()); // Output: 3
// Trying to access the private count variable directly
console.log(counter.count); // Output: undefined (cannot access private variable)
Explanation: Here, count
is a private variable scoped to the IIFE, inaccessible from outside. The returned object exposes methods (increment
, decrement
, and getCount
) that allow controlled manipulation and access to the private count
variable.
Use Cases Of IIFE
Similar Reads
How to prevent overriding using Immediately Invoked Function Expression in JavaScript ? Overriding is basically when you define multiple functions or variables that have the same name, the last one defined will override all the previously defined ones and every time when you invoke a function, the last defined one will get executed. Overriding usually happens when you have multiple jav
2 min read
Explain invoking function in JavaScript In this article, we will learn about invoking the function in Javascript, along with understanding its implementation through examples. Function Invoking is a process to execute the code inside the function when some argument is passed to invoke it. You can invoke a function multiple times by declar
2 min read
JavaScript Function Expression A function expression is a way to define a function as part of an expression making it versatile for assigning to variables, passing as arguments, or invoking immediately.Function expressions can be named or anonymous.They are not hoisted, meaning they are accessible only after their definition.Freq
3 min read
JavaScript function* expression The function* is an inbuilt keyword in JavaScript which is used to define a generator function inside an expression. Syntax: function* [name]([param1[, param2[, ..., paramN]]]) { statements}Parameters: This function accepts the following parameter as mentioned above and described below: name: This p
2 min read
JavaScript async function expression An async function expression is used to define an async function inside an expression in JavaScript. The async function is declared using the async keyword or the arrow syntax. Syntax: async function function_name (param1, param2, ..., paramN) { // Statements}Parameters: function_name: This paramete
2 min read