Closures are a fundamental concept in JavaScript that enables powerful features like data privacy, state persistence, and functional programming. This blog will demystify closures with examples and practical use cases.
When are closures created?
Closures are created when a function (inner function) is defined inside another function (outer function). The inner function has access to the outer function's lexical scope (variables) even after the outer function is executed.
Lexical Scope in Javascript
Lexical scope means a function’s scope is determined by where it is written in the code, not where it is executed. This allows inner functions to access variables from their outer functions even if the outer function has already finished executing.
Usage
Closures are used for creating Private variables and persistent States (Cache, Memoisation etc.).
Closures with Examples
A Simple counter
function Outer() {
let count = 0;
return function inner() {
count++;
return count;
};
}
let Counter = Outer();
Counter();
Counter();
Counter();
Building a cache leveraging closure
function ObjectCache() {
let Obj = {};
return function ObjectUpdate(key, value) {
if (!Obj[key]) {
Obj[key] = value;
return Obj;
} else {
return new Error("Duplicate Key");
}
};
}
let cache = ObjectCache();
cache("a", "b");
cache("a", "c");
cache("alpha", "romeo");
Real World Examples
Event Listeners - Click Counter
function attachListener(element) {
let count = 0;
element.addEventListener('click', () => {
count++;
console.log(`Clicked ${count} times`);
});
}
A Better Counter
const CounterModule = (() => {
let count = 0;
return {
increment: () => ++count,
reset: () => (count = 0),
decrement: () => --count
};
})();
CounterModule.increment();
CounterModule.increment();
CounterModule.decrement();
CounterModule.reset();
That’s all, folks! I hope you found this short blog on closures helpful. If you enjoyed this, check out more articles on my website, https://nandan.dev/
Feel free to comment, email me at connect@nandan.dev, or connect with me on Twitter, Instagram, or GitHub. Don’t forget to subscribe to my newsletter for regular updates on JavaScript topics!
Twitter | Instagram | Github | Website
