Skip to main content

Javascript 104 : Closures

Closures is an easy way of implementing encapsulation in Javascript. 

Suppose you need to implement the calculation of a certain employee's increment scheme. Lets simplify it by saying that the annual increment depends on a certain performance index calculated out of a certain function. 

Look at the following code and try to understand what is going on.  

Output:

I have included a fun function called "calculatePerformanceIndex". You can completely disregard it if you want to. But if you are still confused about what are functions, you should stop now and go to the previous post in which I have explained what functions are. 

"calculatePerformanceIndex" is a function to calculate the performance based on efficiency, discipline and latency. This function is completely made up by me. So don't take it serious. What you should take serious is that it returns a value and this function has been called on line 9 and initialized the "performanceIndex" variable with it. 

The important thing to note here is that the "performanceIndex" variable is a "global" variable. Which means it belongs to the "window" object and it is accessible by everyone. 

Now lets implement another function to calculate the employee increment, based on the "performanceIndex". Take a look at the following code
Output:

The function at line 13 takes the performance index and current salary as input arguments and return the modified salary. 

So according to that, for a hypothetical employee who gets a 120K salary from a department with a performance index obtained at line 9,  has been output to the console at line 19 and 20. 

I understand the code looks a bit complicated. But go through it carefully and really understand what is going on. 

The biggest problem here is that, since the "performanceIndex" is a global variable, any other function can modify the the value of "performanceIndex". 

In this example, the performance index is calculated per department and all the employees in that particular department gets the increment based on that. So this value must not be open. It must be enclosed somehow and used in a controlled manner. 

So here is a better way of doing it. 
Output:
The code is now a lot more simpler and the variable "performanceIndex" is no longer global. 

Study the function at line 16 carefully. 
It is the "calculatePerformanceIndex" function but not as simple as before. 
"performanceIndex" variable is now at its local scope and only the anonymous function which will be returned by the "calculatePerformanceIndex" function has access to it. 

Note that the sole purpose of line 18 is to round the value to 3 decimal places. 

See how the "getIncrementedSalary" variable at line 7 is being assigned with the anonymous function returned by the "calculatePerformanceIndex" function. 

And also notice how I use that variable as a function at line 10. This variable is now assigned with the function returned at line 20. You can see that function has one input argument and a return avalue. 

Now you can use this multiple times to come up with the other employee salaries of the same department. 
Output:

Notice that you don't have to worry about that if some other function has accidentally modified the "performanceIndex" value while you calculate the salaries for the employees in this department. 


Comments

Popular posts from this blog

Javascript 101 : var, let and const

Let's understand variable types "var", "let" and "const" in Javascript.  Basically there are 3 ways to create variables in java script using 3 keywords as follows.  There differences are as follows,  01. The "variable01" which was created with "var" keyword, does not have a blocked scope. which means, you have to be careful when using it. A variable declared inside an "if" block can be changed outside the block.  02. The "variable02" which was created with "let" keyword, has blocked scope. A variable with "let" keyword declared inside an "if" block is not available outside the block. 03. The "variable03" which was created with "const" keyword, is a constant. Which means you have to initialize it once you declare it, and that value cannot be modified later in the programs. There will be an error if you try to do so.  Now lets explore