Building Your Learning Module...
Getting things ready for you!
Find videos you like?
Save to resource drawer for future reference!
A closure is a function that remembers variables from its outer scope, even after the outer function has finished. Think of it like a backpack - the function carries its variables wherever it goes!
Create private variables that can't be accessed directly from outside
Functions remember and maintain their own state between calls
Create specialized functions with preset configurations
When the outer function finishes, you'd expect message to disappear. But the inner function keeps it alive!
function outer() {
const message = 'Hello'; // 1. Variable created
function inner() { // 2. Inner function defined
console.log(message); // 3. Uses outer variable
}
return inner; // 4. Return inner function
}
const myFunction = outer(); // outer() finishes
myFunction(); // Output: Hello
// HOW? The inner function "closed over" message!
// It remembered it even after outer() finished ✨Inner function remembers outer function's variables
You can create private variables that can only be accessed through specific functions. The outside world can't touch them directly!
function createCounter() {
let count = 0; // Private! Can't access directly
return {
increment: function() {
count++;
return count;
},
decrement: function() {
count--;
return count;
},
getCount: function() {
return count;
}
};
}
const counter = createCounter();
console.log(counter.increment()); // 1
console.log(counter.increment()); // 2
console.log(counter.getCount()); // 2
// Can't access 'count' directly!
console.log(counter.count); // undefined ✅Use closures to protect sensitive data
Use closures to create functions with pre-configured settings. Each function remembers its own configuration!
function createMultiplier(multiplier) {
return function(number) {
return number * multiplier;
};
}
const double = createMultiplier(2);
const triple = createMultiplier(3);
const quadruple = createMultiplier(4);
console.log(double(5)); // 10
console.log(triple(5)); // 15
console.log(quadruple(5)); // 20
// Each function remembers its own multiplier!Create tax calculators for different rates
function setupButton(buttonId) {
let clickCount = 0;
const button = document.getElementById(buttonId);
button.addEventListener('click', function() {
clickCount++;
console.log('Clicked ' + clickCount + ' times');
});
}
// Each button remembers its own count!function delayedGreeting(name) {
setTimeout(function() {
// Closure! Remembers 'name'
console.log('Hello, ' + name);
}, 2000);
}
delayedGreeting('Alice');
// After 2 seconds: Hello, Alicefunction fetchData(url) {
const startTime = Date.now();
fetch(url).then(function(response) {
// Remembers startTime!
const duration = Date.now() - startTime;
console.log('Took ' + duration + 'ms');
});
}function greet(greeting, name) {
return greeting + ', ' + name;
}
function partial(fn, greeting) {
return function(name) {
return fn(greeting, name);
};
}
const sayHi = partial(greet, 'Hi');
console.log(sayHi('Alice')); // Hi, AliceUse closures to track and limit function calls
for (var i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
// Output: 3, 3, 3
// WHY? All closures share
// the same 'i' variable!All three functions reference the same i, which ends at 3
for (let i = 0; i < 3; i++) {
setTimeout(function() {
console.log(i);
}, 1000);
}
// Output: 0, 1, 2
// Perfect! Each closure has
// its own 'i' copylet creates a new variable for each iteration!