JavaScript Closures

In this tutorial, you will learn about JavaScript closures with the assistance of examples.

Before you learn about closures, you need to comprehend two concepts:

• Nested Function
• Returning a function

---

What is a closure?

A closure is a component in JavaScript where an inward function approaches the external (enclosing) function’s variables — a scope chain.

The closure has three scope chains:

• it approaches its own scope — variables characterized between its curly brackets

• it approaches the external function’s variables

• it approaches the global variables

To the unenlightened, this definition may seem like simply a ton of jargon!

---

JavaScript Nested Function

In JavaScript, a function can likewise contain another function. This is known as a nested function. For instance,

// nested function example

// outer function
function greet(name) {

    // inner function
    function displayName() {
        console.log('Hi' + ' ' + name);
    }

    // calling inner function
    displayName();
}

// calling outer function
greet('Salman'); // Hi Salman

In the above program, the greet() function contains the displayName() function inside of it.

---

Returning a Function

In JavaScript, you can likewise return a function inside a function. For instance,

function greet(name) {
    function displayName() {
        console.log('Hi' + ' ' + name);
    }

    // returning a function
    return displayName;
}

const g1 = greet('Salman');
console.log(g1); // returns the function definition
g1(); // calling the function

Output

function displayName() {
      console.log('Hi' + ' ' + name);
  }
Hi Salman

In the above program, the greet() function is returning the displayName work definition.

Here, the returned function definition is assigned to the g1 variable. At the point when you print g1 using console.log(g1), you will get the function definition.

To call the function stored in the g1 variable, we use g1() with parentheses.

---

JavaScript Closures

In JavaScript, closure gives access to the external extent of a function from inside the inward function, even after the external function has closed. For instance,

// javascript closure example

// outer function
function greet() {

    // variable defined outside the inner function
    let name = 'Salman';

    // inner function
    function displayName() {

        // accessing name variable
        return 'Hi' + ' ' + name;
      
    }

    return displayName;
}

const g1 = greet();
console.log(g1); // returns the function definition
console.log(g1()); // returns the value

Output

function displayName() {
      // accessing name variable
      return 'Hi' + ' ' + name;
  }
Hi Salman

In the above example, when the greet() function is called, it returns the function definition of displayName.

Here, g1 is a reference to the displayName() function.

When g1() is called, it still has access to the greet() function.

When we run console.log(g1), it returns the function definition.

The concept of closure exists for other programming languages like Python, Swift, Ruby, and so forth

Let’s have a look at another example.

// closure example

function calculate(x) {
    function multiply(y) {
        return x * y;
    }
    return multiply;
}

const multiply3 = calculate(3);
const multiply4 = calculate(4);

console.log(multiply3); // returns calculate function definition
console.log(multiply3()); // NaN

console.log(multiply3(6)); // 18
console.log(multiply4(2)); // 8

In the above program, the calculate() function takes a single argument x and returns the function definition of the multiply() function. The multiply() function takes a single argument y and returns x * y.

Both multiply3 and multiply4 are closures.

The calculate() function is called passing a parameter x. When multiply3 and multiply4 are called, the multipy() function has access to the passed x argument of the outer calculate() function.

---

Data Privacy

JavaScript closure helps in the data privacy of the program. For instance,

let a = 0;
function sum() {
    function increaseSum() {

        // the value of a is increased by 1
        return a = a + 1;
    }
    return increaseSum;
}

const x = sum();
console.log(x()); // 1
console.log(x()); // 2
console.log(x()); // 3
a = a + 1;
console.log(a); // 4

In the above example, the sum() function returns the function meaning of the increaseSum() function.

The a variable is expanded inside the increaseSum() function. Be that as it may, the value of the a variable can likewise be changed outside of the function. For this situation, a = a + 1; changes the value of the variable external the function.

Presently, on the off chance that you need the a variable to be expanded distinctly inside the function, you can use a closure. For instance,

function sum() {
    let a = 0;
    function increaseSum() {

        // the value of a is increased by 1
        return a = a + 1;
    }
    return increaseSum;
}

let x = sum();
let a = 5;
console.log(x()); // 1
console.log(x()); // 2
console.log(a); // 5

In the above example, the sum() function sets the value of a to 0 and returns the increaseSum() function.

In view of the closure, despite though sum() is now executed, increaseSum() actually approaches an and can add 1 to each time x() is called.

What’s more, the a variable is private to the sum() function. It implies that the a variable can only be accessed within the sum() function.

Even of whether you declare a and use it, it doesn’t influence the a variable within the sum() function.

Note: Generally, closures are used for data privacy.

---

Thanks for reading! We hope you found this tutorial helpful and we would love to hear your feedback in the Comments section below. And show us what you’ve learned by sharing your photos and creative projects with us.

Javascript Miscellaneous