About me

I am a full stack .net developer with 5 years of experience in front-end and back-end technologies like HTML, CSS, Jquery, Angular, Typescript, Bootstrap, C#, MSSQL and Mongodb. I have done Btech Computer engineering from Sigma Institute of Engineering & Technology that comes under GTU (Gujarat Technological University). I have worked on web applications, Web APIs, Windows Forms, Web Forms, Tray applications and corporate websites. Programming is my hobby and I have starting writing blog to provide a platform for those who want to grow their careers as a fullstack .NET developers.

JavaScript Closures

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:

Output of the code in browser's console
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
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
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 😊.