Understanding Closure in Javascript
Closure in JavaScript is a powerful concept that allows developers to create functions with persistent data, while also keeping that data hidden from the global scope. In this blog, we will explore what closure is, how it works, and some common use cases for it.
What is Closure in JavaScript?
Closure in JavaScript is a function that has access to variables in its outer scope, even after the outer function has returned. When a function is executed, a new execution context is created, and this context has access to the variables and functions defined within its scope. When a function returns, its execution context is destroyed, and all of its variables and functions are lost. However, when a function returns a new function, the inner function retains access to the variables and functions of the outer function, even after the outer function has returned.
How does Closure work?
To understand how closure works, let's look at an example. Suppose we have a function called outerFunction that returns an inner function called innerFunction:
function outerFunction() {
let outerVariable = 'Hello, ';
function innerFunction(name) {
console.log(outerVariable + name);
}
return innerFunction;
}
let innerFunc = outerFunction();
innerFunc('John');
In this example, outerFunction creates a variable called outerVariable and a function called innerFunction. The innerFunction has access to the outerVariable, even though it was defined in a separate scope. When outerFunction returns innerFunction, the value of outerVariable is retained in memory, and innerFunction can access it even after outerFunction has returned.
When we call outerFunction and assign the returned value to innerFunc, we are creating a closure. innerFunc is now a reference to innerFunction, and it has access to the outerVariable variable. When we call innerFunc('John'), it logs "Hello, John" to the console, even though outerFunction has already returned.
Why is Closure useful?
Closure is useful for a number of reasons. Here are a few common use cases:
- Private variables and functions
Using closure, we can create private variables and functions that are hidden from the global scope. This is useful for creating reusable code that is less likely to cause naming conflicts or other issues. For example:
function createCounter() {
let count = 0;
return {
increment: function() {
count++;
console.log(count);
},
decrement: function() {
count--;
console.log(count);
}
}
}
let counter = createCounter();
counter.increment(); // logs 1
counter.increment(); // logs 2
counter.decrement(); // logs 1
In this example, createCounter creates a private variable called count and returns an object with two methods, increment and decrement, that have access to the count variable. We can create multiple counters that are completely independent of each other.
- Caching and Memoization
Closure can also be used for caching and memoization. Memoization is a technique for optimizing expensive function calls by caching the results of those calls and returning the cached results if the function is called again with the same arguments. For example:
function expensiveOperation(n) {
// Simulate a computationally expensive operation
console.log("Performing expensive operation for:", n);
return n * 2;
}
function memoize(func) {
const cache = new Map();
return function (n) {
if (cache.has(n)) {
console.log("Returning memoized result for:", n);
return cache.get(n);
} else {
const result = func(n);
cache.set(n, result);
return result;
}
};
}
const memoizedOperation = memoize(expensiveOperation);
console.log(memoizedOperation(5)); // Performing expensive operation for: 5, Returning memoized result for: 5, 10
console.log(memoizedOperation(5)); // Returning memoized result for: 5, 10
console.log(memoizedOperation(10)); // Performing expensive operation for: 10, Returning memoized result for: 10, 20
console.log(memoizedOperation(10)); // Returning memoized result for: 10, 20
In this example, we have a function expensiveOperation that simulates a computationally expensive operation. We then define a memoize function that takes a function as an argument and returns a memoized version of that function. The memoized function uses a closure to store the results of previously computed operations in a cache (implemented as a Map in this example).
When we call the memoizedOperation function with an argument, it first checks if the result for that argument is already available in the cache. If it is, it returns the cached result, otherwise it computes the result using the original expensiveOperation, stores it in the cache, and then returns the result. This way, subsequent calls to the memoized function with the same argument can directly return the cached result, avoiding redundant computations and improving performance.
Happy Learning!! Happy Coding!!
Comments