What are Closures?
Output: Now run the application and have a look at the browser console window. You will see that for both the function call it will print the same value 1 as shown in the below image.
We are getting the same value for both calls. This is because it will create a separate state for the count variable for each function call. That is, for the first function call it maintains one state and for the second function call, it maintains a different state for the count variable.
Technically this is current. Because when a function or method runs, it creates running memory for all the variables (example count) inside the stack. And once the function call ends, the memory released from the stack. For better understanding, please have a look at the below image. The following things happen in order for each time the function Counter is called.
But sometimes we want the function and variable should stay in the memory. For example, every time we call the function Counter, the value of the count variable to be incremented. In other words, we want the count variable to be remembered.
One of the ways you might be thinking let’s go and declare the count variable globally as shown in the below example. So, every time the Counter function executed, the count variable value gets incremented.
Output: This will give the output as expected as shown in the below image.
What is the problem with the above approach?
Let us understand the problem with the above approach where we declared the count variable globally. One of the rules of good programming is that modules, functions, methods, should be self-contained. But if you declare the variable globally, then you may face some problems. For example, the global variables can be accessed by any function. If we have another function, then that function also accesses the count variable and changes the values. We cannot restrict this as the count variable is global.
For a better understanding, please have a look at the below example. Here, the count variable is accessed by both the Counter and MyCounter functions. As our requirement is only to increment the count value by using the Counter function, but here we are also able to increment the value by using the MyCounter function which results in inconsistent output.
A Closure is nothing but a function inside a function. In other words, one function enclosed another function and this is the reason why it is named Closure.
Now, you can create a different object of the Counter function and can call the Increment function as shown in the below image. For the first object (i.e. counter1) we call the increment method two times, so you will get the output as 1 and 2. Again we create another object (i.e. counter2), for this object, it will create a different instance altogether and as you can see we call the Increment method two times, so again you will see the count value as 1 and then 2 as expected.
The OOPs Concepts:
Object-oriented programming provides four concepts. They are as follows:
- Abstraction: Show what is necessary
- Encapsulation: Hide the complexity
- Inheritance: Parent-Child relationship
- Polymorphism: Depending on the situation the object behaves differently
How the above Principles are Implemented using Closures?
In this case, when anybody sets or gets the value of FirstName, it internally set or gets the value from _FirstName property. Same for _LastName and _EmployeeCode. When anybody calls the AddEmployee method, internally the _AddEmployee method is invoked. Now, you can create an object of Employee and can set the values of FirstName, LastName, EmployeeCode, and can invoke the AddEmployee method as shown in the below image.
The complete code of the above-discussed example is given below.
Nice explanation of closures,looks like es-06 classes,actually doing the same job because es-06 class is only funkction sintatic suggar.