Closure
JavaScript Closure is a combination of functions that gives access to the outer function variables and parameters. Closures help to associate data to a function that has some data operations.
Use Case 1: To access private variables of a function
The closure is used to access the private variables of a function. Here, is an example to understand this better.
Consider the below function named Car, which takes parameter modelName, and sets the model attribute of the Car.
function Car (modelName) {
this.model = modelName;
}
The model attribute of the car can be accessed by making objects as shown below:
var mycar = new Car("Land Rover");
document.write(mycar.model);
You can copy this code and run it in the browser's console. It will display the car model. Hence, the model variable is accessible outside the function.
What if we convert the attribute to a variable. Changing this.model to var model will give us undefined as shown below:
function Car (modelName) {
var model = modelName;
}
var mycar = new Car("Land Rover");
document.write(mycar.model);
The output of both the above code snippets in the console is shown in the below image:
 |
| The output of the code in browser's console |
Here, the name variable can be made accessible outside the Car function using a closure function as shown in the below code:
function Car (modelName) {
var model = modelName;
this.getModelName = function() {
return model;
}
}
var mycar = new Car("Land Rover");
document.write(mycar.getModelName());
The output for the above code would be as shown in the below image:
 |
| Example of closure function |
Just as in other object-oriented programming languages, we can define private variables, and then they can be accessed using the closure functions.
Use Case 2: To associate different private variables while maintaining the state
Closures functions are also useful in associating variables separately while maintaining the particular value of the private variables.
Consider the below example that categorizes colors as shown below:
function CategorizeColor (color) {
return function(category) {
return color + " is " + category;
}
}
var redColor = CategorizeColor("red");
var magentaColor = CategorizeColor("Magenta");
Now, red can be defined as a primary color and magenta can be defined as a secondary color as shown below:
redColor("primary color");
magentaColor("secondary color");
This will give the below output:
 |
| Console output for the example |
In this way we can associate any number of variables using closure functions. This is generally used when we don't have all the values while the function call. We later add the required variables to the function using closure functions.
I Hope, you understood what are the closure functions. For any queries, you can write to me at [email protected]. To get notified for the releases, subscribe through email. If you found this article useful, please share it. Thank you 😊.