Closures Introduction0%
Immediately Invoked Functions (IIFE)

Closures Introduction

Beginner12 min read•Updated: Jul 11, 2026
Study Materials

Closures Introduction in JavaScript

A Closure is one of the most powerful and fundamental concepts in JavaScript. A closure is the combination of a function bundled together with references to its surrounding lexical state (the lexical environment). In simple terms: a closure gives a function access to its outer scope even after the outer function has finished executing!

1. How Closures Work Under the Hood

Normally, when a function finishes executing, its local variables are removed from the Call Stack and garbage collected.

However, if an inner function references variables from the outer function, JavaScript preserves the outer scope in memory as long as the inner function is alive:

JavaScript
function createGreeter(greeting) {
// 'greeting' is a local variable inside createGreeter
 
return function(name) {
// Inner function accesses 'greeting' from the parent scope:
console.log(`${greeting}, ${name}!`);
};
}
 
// createGreeter finishes executing and returns:
const sayHello = createGreeter("Hello");
const sayNamaste = createGreeter("Namaste");
 
// The returned functions still REMEMBER their original greeting!
sayHello("Sumit"); // "Hello, Sumit!"
sayNamaste("Aarav"); // "Namaste, Aarav!"
Output
Memory Structure:
+-------------------------------------------------------------+
| Closure Scope (Preserved in Memory): |
| greeting: "Hello" |
+-------------------------------------------------------------+
^
|
sayHello("Sumit") ---> Output: "Hello, Sumit!"

2. Practical Application: Private Variables (Data Encapsulation)

JavaScript historically did not have private class fields. Closures provided the standard way to create private, encapsulated state:

JavaScript
function createBankAccount(initialBalance) {
let balance = initialBalance; // Private variable! Not directly accessible from outside!
 
return {
deposit(amount) {
if (amount > 0) {
balance += amount;
console.log(`Deposited ₹${amount}. New balance: ₹${balance}`);
}
},
withdraw(amount) {
if (amount <= balance) {
balance -= amount;
console.log(`Withdrew ₹${amount}. New balance: ₹${balance}`);
} else {
console.log("Insufficient funds!");
}
},
getBalance() {
return balance;
}
};
}
 
const myAccount = createBankAccount(1000);
myAccount.deposit(500); // Deposited ₹500. New balance: ₹1500
console.log(myAccount.balance); // undefined! (Direct access is impossible!)
console.log(myAccount.getBalance()); // 1500 (Accessible only through closures!)

3. Function Factories

A closure allows you to create customizable function generators:

JavaScript
function createMultiplier(multiplier) {
return function(x) {
return x * multiplier;
};
}
 
const double = createMultiplier(2);
const triple = createMultiplier(3);
 
console.log(double(10)); // 20
console.log(triple(10)); // 30
Interactive Quiz

Practice Quiz

Question 1
What is a closure in JavaScript?
Question 2
Why are closures used to create "private variables" in JavaScript?
Question 3
What is the output of:
JavaScriptCode Snippet
function counter() {
let count = 0;
return () => ++count;
}
const c1 = counter();
c1();
console.log(c1());
Question 4
Do separate instances of a function factory share the same closure state?
Question 5
Can closures cause memory leaks if misused?
Next Lesson

Immediately Invoked Functions (IIFE)

Continue learning with hands-on practice, examples, and exercises in the upcoming topic.

Related Lessons

Previous LessonNext Lesson
Rest & Spread OperatorsImmediately Invoked Functions (IIFE)

Practice Quiz

Test your understanding of this lesson with 5 questions. Each question has one correct answer.

PreviousNext
PrevNext