JavaScript Closures: How to Create and Use Closures in JavaScript

Closures are an important concept in JavaScript that allow you to create functions with private variables and partial application. In this article, we'll explore what closures are, how to create them, and how to use them in your code.

What are Closures?

A closure is a function that has access to variables in its outer (enclosing) function's scope chain. This means that a closure can access variables in its own scope, as well as variables in the scope of its outer function. Closures are created every time a function is created, at function creation time.

Creating Closures

To create a closure, you need to define a function inside another function. Here's an example:

                        
function outerFunction() {

  const outerVariable = "I'm in the outer function!";



  function innerFunction() {

    console.log(outerVariable);

  }



  return innerFunction;

}



const inner = outerFunction();

inner(); // logs "I'm in the outer function!"

                        
                    

In this example, outerFunction returns innerFunction, which is then assigned to the inner variable. When inner is called, it logs the value of outerVariable, which is defined in the scope of outerFunction.

Using Closures for Data Privacy

One of the most common use cases for closures is to create private variables in JavaScript. Private variables are variables that are only accessible within the scope of a function. Here's an example:

                        
function counter() {

  let count = 0;



  return {

    increment() {

      count++;

    },



    decrement() {

      count--;

    },



    getCount() {

      return count;

    }

  };

}



const myCounter = counter();

myCounter.increment();

myCounter.increment();

console.log(myCounter.getCount()); // logs 2

                        
                    

In this example, counter returns an object with three methods: increment, decrement, and getCount. The count variable is defined in the scope of counter, so it's not accessible outside of the object returned by counter. This creates a private variable that can only be modified by calling the increment and decrement methods.

Using Closures for Partial Application

Another use case for closures is partial application. Partial application is a technique where you create a new function by pre-filling some of the arguments of an existing function. Here's an example:

                        
function multiply(a, b) {

  return a * b;

}



const double = multiply.bind(null, 2);

console.log(double(5)); // logs 10

                        
                    

In this example, we're using the bind method to create a new function called double that multiplies its argument by 2. The first argument to bind is the this value, which we're setting to null since we don't need it in this case. The second argument is the value we want to pre-fill for the a parameter.

Conclusion

Closures are a powerful feature of JavaScript that allow you to create functions with private variables and partial application. They're created every time a function is created, at function creation time. In this article, we've explored what closures are, how to create them, and how to use them in your code. I hope you find this article helpful for your JavaScript course.