Article Categories

Selected Reading

JavaScript Immediately Invoked Function Expressions (IIFE)

Javascript Web Development Object Oriented Programming

An Immediately Invoked Function Expression (IIFE) is a JavaScript function that executes immediately after it has been defined. This pattern is useful for creating isolated scope and avoiding global namespace pollution.

Syntax

(function() {
    // Code here runs immediately
})();

// Alternative syntax
(function() {
    // Code here runs immediately
}());

Basic IIFE Example

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IIFE Example</title>
</head>
<body>
    <h1>JavaScript IIFE Demo</h1>
    <div class="output"></div>
    
    <script>
        let outputDiv = document.querySelector(".output");
        
        (function() {
            outputDiv.innerHTML = "This IIFE executed immediately!";
            console.log("IIFE ran successfully");
        })();
    </script>
</body>
</html>

IIFE with Parameters

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IIFE with Parameters</title>
</head>
<body>
    <h1>IIFE with Parameters</h1>
    <div class="result"></div>
    
    <script>
        let resultDiv = document.querySelector(".result");
        
        (function(name, age) {
            resultDiv.innerHTML = `Hello ${name}, you are ${age} years old!`;
            console.log(`IIFE executed with parameters: ${name}, ${age}`);
        })("Alice", 25);
    </script>
</body>
</html>

IIFE for Variable Isolation

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>IIFE Variable Isolation</title>
</head>
<body>
    <h1>IIFE Variable Isolation</h1>
    <div class="demo"></div>
    
    <script>
        let demoDiv = document.querySelector(".demo");
        
        // Variables inside IIFE don't pollute global scope
        (function() {
            let privateVar = "I'm private!";
            let count = 42;
            
            demoDiv.innerHTML = `Private variable: ${privateVar}<br>Count: ${count}`;
            console.log("These variables are isolated within the IIFE");
        })();
        
        // These variables are not accessible here
        console.log("Trying to access privateVar from outside:");
        console.log(typeof privateVar); // undefined
    </script>
</body>
</html>

Arrow Function IIFE

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Arrow Function IIFE</title>
</head>
<body>
    <h1>Arrow Function IIFE</h1>
    <div class="arrow-demo"></div>
    
    <script>
        let arrowDemo = document.querySelector(".arrow-demo");
        
        // Arrow function IIFE
        (() => {
            let message = "Arrow function IIFE executed!";
            arrowDemo.innerHTML = message;
            console.log(message);
        })();
    </script>
</body>
</html>

Common Use Cases

IIFE is commonly used for:

Module Pattern: Creating private scope for module variables
Avoiding Global Pollution: Keeping variables out of global scope
Initialization: Running setup code immediately
Library Wrapping: Wrapping third-party libraries safely

Comparison of IIFE Syntaxes

Syntax	Description	Valid?
`(function() {})()`	Function wrapped in parentheses	Yes
`(function() {}())`	Entire expression wrapped	Yes
`(() => {})()`	Arrow function IIFE	Yes
`function() {}()`	Without parentheses	No - Syntax Error

Conclusion

IIFE is a powerful JavaScript pattern for creating isolated scope and executing code immediately. It's essential for avoiding global namespace pollution and creating modular, clean code structures.

AmitDiwan

Updated on: 2026-03-15T23:18:59+05:30

205 Views

Kickstart Your Career

Get certified by completing the course

Get Started

Previous Next