JavaScript Closure

INTRO

Closure is one the important concept in Javascript. It will helps in many conditions. I know you many people are already discuss this topic. But today I want to explain this concept in my view. I hope you like it.

Definition
A closure is the combination of a function bundled together (enclosed) with references to its surrounding state.
A closure gives you access to an outer function's scope from an inner function.

Closure is a function that references variables in the outer scope from its inner scope. The closure preserves the outer scope inside its inner scope.

Simply closure is a function having access to the parent scope, even after the parent function has closed. Closure is the combination of a function and its local scope of the outer function. Its contains two functions. One is outer function and another one is inner function. The inner function can access its own outer function variable value and it can modify that value. The outer function stores the modified value. And the process was repeated. Closure is created when a function is returned from another. Here we are returning inner function from outer function.

USAGE

Closure has it's own state i.e the function it self remember the previous value what we are stored in the variables. So that we can access and modify that value, no need to access and modify the global variables every time. It improves the code flexibility and readability and avoid type errors in code.

If you want define one variable and it should be access by particular function i.e no need to access by the another functions in programme. Then Closure is very helpful compared to define variable in global state.

EXAMPLE

Let’s discuss one simple example

I want to call one function with one random number as parameter. Every time I call that function, it should add with previously passed values and returns total summation.

Note: It should not access by any other functions because it's their personal.

Without Closure and Global State

let count = 0

function counter(num){
      count += num
      return count
}

function public(){
   return count
}

console.log(counter(10))     //output : 10
console.log(public())        //output : 10
console.log(counter(5))      //output : 15
console.log(public())        //output : 15
console.log(counter(7))      //output : 22
console.log(public())        //output : 22

In the above example count value should be accessible to only counter function but it also accessible by public function.

Without Closure and Local State

function counter(num){
    let count = 0
    count += num
    return count
}

console.log(counter(10))     //output : 10
console.log(counter(5))      //output : 5
console.log(counter(7))      //output : 7

In the above example, every time when we call counter function. The count value is becoming 0 and returns passed value only.

With Closure

function counter (){
    let count = 0
    return function (num) {
        count += num
        return count
    }
}

const inner = counter()
console.log(inner(10))       //output : 10
console.log(inner(5))        //output : 15
console.log(inner(7))        //output : 22

Here count is block level variable, It can access by only counter function not any other functions, it maintains it's own state here irrespective of any other functoins.