JavaScript Fundamentals

IIFE (Immediately Invoked Function Expressions)

Functions that execute immediately - protect your scope and avoid global pollution

Find videos you like?

Save to resource drawer for future reference!

What is an IIFE?

IIFE stands for "Immediately Invoked Function Expression". It's a function that runs as soon as it's defined. Think of it like a function that calls itself automatically!

Simple Analogy

It's like a self-destructing message - the function creates a private space, does its work, and disappears, leaving no trace in the global scope!

Basic IIFE Syntax

Two ways to write an IIFE

The Pattern

Wrap the function in parentheses and add () to invoke it immediately!

// Method 1: Recommended
(function() {
  console.log('I run immediately!');
})();

// Method 2: Alternative
(function() {
  console.log('This also works!');
}());

// Both do the same thing!
// Output: I run immediately!
// Output: This also works!

Regular Function vs IIFE

See the difference between normal functions and IIFEs

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Private Scope - The Main Benefit

Keep variables private and avoid global pollution

Why Use IIFEs?

Variables inside an IIFE are private - they don't pollute the global scope and can't be accessed from outside!

❌ Without IIFE

var name = 'Alice';
var age = 25;

console.log(name); // Alice
console.log(age);  // 25

// Global scope polluted!
// Anyone can access these ❌

✅ With IIFE

(function() {
  var name = 'Alice';
  var age = 25;
  
  console.log(name); // Alice
  console.log(age);  // 25
})();

// Try to access outside:
console.log(name); // undefined
console.log(age);  // undefined

// Private! ✅

IIFE Prevents Global Pollution

Variables stay private inside the IIFE

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

IIFE with Parameters

Pass values into your IIFE

Pass Data In

You can pass arguments to IIFEs just like regular functions!

// IIFE with parameters
(function(name, age) {
  console.log('Name: ' + name);
  console.log('Age: ' + age);
})('Alice', 25);

// Output:
// Name: Alice
// Age: 25

// Pass any data you need!

Real-World: Configuration IIFE

Pass configuration objects to IIFEs

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

IIFEs Can Return Values

Create modules with public APIs

The Module Pattern

IIFEs can return objects with methods - this is the classic Module Pattern!

var counter = (function() {
  var count = 0; // Private!
  
  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    },
    getCount: function() {
      return count;
    }
  };
})();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount());  // 2
console.log(counter.decrement()); // 1

// Can't access count directly!
console.log(counter.count); // undefined

Real-World: Calculator Module

Create a calculator with private state using IIFE

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Modern IIFE with Arrow Functions

ES6 syntax for IIFEs

Cleaner Syntax

You can use arrow functions for shorter IIFE syntax!

// Traditional IIFE
(function() {
  console.log('Old style');
})();

// Arrow function IIFE
(() => {
  console.log('Modern style');
})();

// With parameters
((name) => {
  console.log('Hello, ' + name);
})('Alice');

// Output:
// Old style
// Modern style
// Hello, Alice

Real-World: Async IIFE

Use async/await inside an IIFE

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Common Use Cases

When to use IIFEs

1. Avoid Global Pollution

(function() {
  var temp = 'temporary';
  // Use temp here
})();
// temp doesn't exist outside

2. Create Modules

var module = (function() {
  var private = 'secret';
  return {
    public: 'exposed'
  };
})();

3. Initialize Code

(function() {
  // Setup code
  console.log('App initialized');
  // Runs immediately!
})();

4. Async Operations

(async () => {
  await fetchData();
  console.log('Done!');
})();

Best Practices

Do This ✅

• Use IIFEs to avoid global pollution
• Create private variables with IIFEs
• Use for one-time initialization
• Prefer arrow function IIFEs (modern)
• Return objects for module pattern

Avoid This ❌

• Overusing IIFEs (ES6 modules better)
• Complex logic in IIFEs (hard to debug)
• Nesting IIFEs too deeply
• Using when let/const blocks work
• Forgetting the wrapping parentheses

Modern Alternative

With ES6 modules and block-scoped variables (let/const), IIFEs are less common today. However, they're still useful for one-time setup code, async operations, and understanding JavaScript scope!

Previous Topic

Higher-Order Functions

Functions that take or return other functions for advanced composition.

Next Topic

Arrays

Creating, accessing, and manipulating lists of data with JavaScript arrays.

Ask a Question

Have a question about IIFE? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Fundamentals

IIFE (Immediately Invoked Function Expressions)

Functions that execute immediately - protect your scope and avoid global pollution

Find videos you like?

Save to resource drawer for future reference!

What is an IIFE?

IIFE stands for "Immediately Invoked Function Expression". It's a function that runs as soon as it's defined. Think of it like a function that calls itself automatically!

Simple Analogy

It's like a self-destructing message - the function creates a private space, does its work, and disappears, leaving no trace in the global scope!

Basic IIFE Syntax

Two ways to write an IIFE

The Pattern

Wrap the function in parentheses and add () to invoke it immediately!

// Method 1: Recommended
(function() {
  console.log('I run immediately!');
})();

// Method 2: Alternative
(function() {
  console.log('This also works!');
}());

// Both do the same thing!
// Output: I run immediately!
// Output: This also works!

Regular Function vs IIFE

See the difference between normal functions and IIFEs

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Private Scope - The Main Benefit

Keep variables private and avoid global pollution

Why Use IIFEs?

Variables inside an IIFE are private - they don't pollute the global scope and can't be accessed from outside!

❌ Without IIFE

var name = 'Alice';
var age = 25;

console.log(name); // Alice
console.log(age);  // 25

// Global scope polluted!
// Anyone can access these ❌

✅ With IIFE

(function() {
  var name = 'Alice';
  var age = 25;
  
  console.log(name); // Alice
  console.log(age);  // 25
})();

// Try to access outside:
console.log(name); // undefined
console.log(age);  // undefined

// Private! ✅

IIFE Prevents Global Pollution

Variables stay private inside the IIFE

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

IIFE with Parameters

Pass values into your IIFE

Pass Data In

You can pass arguments to IIFEs just like regular functions!

// IIFE with parameters
(function(name, age) {
  console.log('Name: ' + name);
  console.log('Age: ' + age);
})('Alice', 25);

// Output:
// Name: Alice
// Age: 25

// Pass any data you need!

Real-World: Configuration IIFE

Pass configuration objects to IIFEs

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

IIFEs Can Return Values

Create modules with public APIs

The Module Pattern

IIFEs can return objects with methods - this is the classic Module Pattern!

var counter = (function() {
  var count = 0; // Private!
  
  return {
    increment: function() {
      count++;
      return count;
    },
    decrement: function() {
      count--;
      return count;
    },
    getCount: function() {
      return count;
    }
  };
})();

console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount());  // 2
console.log(counter.decrement()); // 1

// Can't access count directly!
console.log(counter.count); // undefined

Real-World: Calculator Module

Create a calculator with private state using IIFE

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Modern IIFE with Arrow Functions

ES6 syntax for IIFEs

Cleaner Syntax

You can use arrow functions for shorter IIFE syntax!

// Traditional IIFE
(function() {
  console.log('Old style');
})();

// Arrow function IIFE
(() => {
  console.log('Modern style');
})();

// With parameters
((name) => {
  console.log('Hello, ' + name);
})('Alice');

// Output:
// Old style
// Modern style
// Hello, Alice

Real-World: Async IIFE

Use async/await inside an IIFE

javascript

code

DarkEditable

Console Output

Click "Run Code" to see output here...

Common Use Cases

When to use IIFEs

1. Avoid Global Pollution

(function() {
  var temp = 'temporary';
  // Use temp here
})();
// temp doesn't exist outside

2. Create Modules

var module = (function() {
  var private = 'secret';
  return {
    public: 'exposed'
  };
})();

3. Initialize Code

(function() {
  // Setup code
  console.log('App initialized');
  // Runs immediately!
})();

4. Async Operations

(async () => {
  await fetchData();
  console.log('Done!');
})();

Best Practices

Do This ✅

• Use IIFEs to avoid global pollution
• Create private variables with IIFEs
• Use for one-time initialization
• Prefer arrow function IIFEs (modern)
• Return objects for module pattern

Avoid This ❌

• Overusing IIFEs (ES6 modules better)
• Complex logic in IIFEs (hard to debug)
• Nesting IIFEs too deeply
• Using when let/const blocks work
• Forgetting the wrapping parentheses

Modern Alternative

With ES6 modules and block-scoped variables (let/const), IIFEs are less common today. However, they're still useful for one-time setup code, async operations, and understanding JavaScript scope!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Higher-Order Functions

Arrays

JavaScript Code Editor

Building Your Learning Module...

IIFE (Immediately Invoked Function Expressions)

What is an IIFE?

Simple Analogy

The Pattern

Regular Function vs IIFE

Why Use IIFEs?

❌ Without IIFE

✅ With IIFE

IIFE Prevents Global Pollution

Pass Data In

Real-World: Configuration IIFE

The Module Pattern

Real-World: Calculator Module

Cleaner Syntax

Real-World: Async IIFE

1. Avoid Global Pollution

2. Create Modules

3. Initialize Code

4. Async Operations

Best Practices

Do This ✅

Avoid This ❌

Modern Alternative

Higher-Order Functions

Arrays

JavaScript Code Editor

IIFE (Immediately Invoked Function Expressions)

What is an IIFE?

Simple Analogy

The Pattern

Regular Function vs IIFE

Why Use IIFEs?

❌ Without IIFE

✅ With IIFE

IIFE Prevents Global Pollution

Pass Data In

Real-World: Configuration IIFE

The Module Pattern

Real-World: Calculator Module

Cleaner Syntax

Real-World: Async IIFE

1. Avoid Global Pollution

2. Create Modules

3. Initialize Code

4. Async Operations

Best Practices

Do This ✅

Avoid This ❌

Modern Alternative