If you have read the previous blogs in this series you should now have some basic understanding of scopes in Javascript. In this blog, we will be learning about closures in javascript, and knowing scopes will make it a little easier to understand closures. When I first started to learn about closures a month ago, I did not know how to use them or how they help us. In this blog, I will try to explain what closures are and how to use them.
What is closure?
The definition is something like this
The ability to reference a specific instance of the local binding in an enclosing scope is called closure.
The first time I read this, it went over my head but after working with some examples, the definition started to make sense! So, let's try to understand closures with an example.
function Counter(){
let count = 1;
function incrementCount(){
return count = count + 1;
}
function decrementCount(){
return count = count - 1;
}
function showCount(){
return count;
}
return {
incrementCount,
decrementCount,
showCount
}
}
//Execute this line by line in your browser console to see exact outputs
let myCount = Counter();
let yourCount = Counter();
myCount.incrementCount(); // 2
myCount.incrementCount(); // 3
myCount.decrementCount(); //2
console.log(`This is the myCount : ${myCounter.showCount()}`); // 2
console.log(`This is the yourCount : ${yourCounter.showCount()}`); // 0
Now let's try to understand the above program along with the definition. First of all, I have defined a count variable inside the Counter function. After this, I have defined three different functions/methods named: incrementCount, decrementCount, and showCount. Now, we are returning those three functions so that we can use them outside our function. You can have another function inside the Counter function but unless that function is returned, it cannot be used outside the Counter function. The user cannot access the count variable and change it to something else unless the user has access to the source code.
This functionality is similar to the private and public methods in Java. In our example, the count variable is private and cannot be accessed outside the Counter function. All three functions inside the Counter function are public, hence, can be accessed outside the Counter function.
Coming to the definition, let's get to know which is the local binding and the enclosing scope. In the above example, the local binding is everything inside the Counter function. The specific instance is the count variable in the Counter function. All three functions inside create three different enclosing scopes. Now, if we redefine the definition, it will be something like this
The ability to reference variables in the outer function's scope(
local binding) from the inner functions(enclosing scopes).
Every time, we define a function, a closure is created. How does closure help though? In the above example, we can see that I am creating two new variables myCount, yourCount, and assigning it to the Counter function. By doing this, we have two references to the same function! How Is this useful? you may ask.
Well, let's look at the next line of our code! After, defining two variables, I have incremented the myCount value twice and decremented it once. Then, I have displayed the value of myCount which is 2. Similarly, when I displayed the value of yourCount, I still get the value as 1.
This shows that changing the myCount value will not affect the yourCount value in any way because we have invoked the Counter function twice which means we have two different execution contexts which gives two count variables along with two sets of Counter methods, one for the myCount instance and another for yourCount instance. With this, you can have as many counters as you want just by defining the Counter function once!
Conclusion
Closures are a very important part of javascript, understanding them will help you enjoy javascript and appreciate the language more. Now that you enjoy javascript, try answering this question and post your answers in the comment section!
Is
console.log()a function?