JS Interview #8 — JavaScript Closures

Javascript Closure

In this blog, you’ll learn about JavasScript Closures. and how to use closures in your code more effectively.

The closure concept is important in functional programming and is often asked during the JavaScript coding interview

We will understand the closure by the scope and lexical scope example.

What is closure?

The closure is a function that has access to the outer function variable.

The closure can access its own scope variables, outer scope variables. and global scope variables.

The closure is created when a child function keeps the environment of the parent scope even after the parent function has already been executed.

Let’s understand closure through an example.

Example 1 — Normal Scope

var myName = 'John';

function greeting() { 
    let message = 'Hi';
    console.log(message +' '+ myName);
}

greeting() // Hi John

In the above example, The variable myName is a global variable. It is accessible from anywhere. The variable message is a local variable that is accessible only within the greeting() function.

Example 2 — Lexical scope

function main()
{
    var b = 1;
    function inner(){
        return b;
    }
    return inner;
}
var callMainFunction = main();  
  
console.log(callMainFunction()); // 1
console.log(callMainFunction()); // 1
console.log(callMainFunction()); // 1

In the above example, We can access the variable b which is defined in function main() through function inner(). here b is local variable to main() and global variable to inner()

Here closure behaves like the inner function can access the outer function variables.

Example 3 — Now understand the closure

function greeting(message) {
    return function innerGreeting(name){
         return message + ' ' + name;
    }
 }
 let sayHi = greeting('Hi');
 let sayHello = greeting('Hello');
 
 console.log(sayHi('Mighty')); // Hi Mighty
 console.log(sayHello('Mighty')); // Hello Mighty

The greeting() function takes one argument named message and returns a function that accepts a single argument called name.

The return function returns a greeting message that is a combination of the message and name variables.

Example 4 — Understand closure with a typical example

function Counter() {
    var counter = 0;

    function IncreaseCounter() {
        return counter += 1;
    };

    return IncreaseCounter;
}

var counter = Counter();
console.log(counter()); // 1
console.log(counter()); // 2
console.log(counter()); // 3
console.log(counter()); // 4

In the above example, the outer function Counter returns the reference of the inner function IncreaseCounter(). IncreaseCounter increases the outer variable counter to one. So calling the inner function multiple times will increase the counter to one each time.

When to use Closure?

The closure is useful in hiding implementation detail in JavaScript. In other words, it can be useful for the data privacy of the program.

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 definition of the increaseSum() function.

The variable is increased inside the increaseSum() function. However, the value of the variable can also be changed outside of the function. In this case, a = a + 1; changes the value of the variable outside the function.

Now, if you want the variable to be increased only inside the function, you can use a closure. For example,

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.

Because of the closure, even though sum() is already executed, increaseSum() still has access to a and can add 1 to every time x() is called.

And the variable is private to the sum() function. It means that the variable can only be accessed inside the sum() function.

Even if you declare a and use it, it does not affect the a variable inside of the sum() function.

Key Points to remember

• closure is a function that captures variables from its lexical scope.
• The closure is useful for the data privacy of the program.
• Closures allow event handlers and callbacks to capture variables. They’re used in functional programming

To understand in a much better way here is the video link