Closure: This is the final destination

Photo by Juan Rumimpunu on Unsplash

A closure is a combination of a function bundled together with reference to its lexical environment. With the help of closure, an inner function can remember the reference (not value) of its outer variable.

for ex:

function outer(){
   var star = 10;
   function inner(){
     console.log(star);
   }
   return inner;
}

or you can write like this

function outer(){
   var star = 10;
   return function inner(){
     console.log(star);
   }
}

So here the function outer is returning the function inner and function inner remembers the reference of variable star.

So if we execute this function

var earth = outer() // outer returns the function inner 
earth() // 10, as it remebers the refernce of variable star

TRICKY INTERVIEW QUESTION

Write a function to add two numbers passed as argument. So that
Add(10,12) //22
or
Add(10)(12) //22 
or
var total = add(10)
total(12) // 22

Can you guess the code??

function add(num1, num2){
   if(num2 !== undefined){
       return num1+num2;
   }else{
       return function addAgain(num2){
            return num1+num2;
            }
   }
}

Famous setTimeout Question

Guess the output ?
for (var i = 0; i < 3; i++) 
{  setTimeout(function() {    
   console.log(i)}, 3000);
}

So if you’re thinking the output will be 0,1,2 after 3 seconds then you are wrong my friend. The output will be

3
3
3

Why So? because once the event loop sees setTimeout then it put the setTimeout out of the call stack and continues the execution. So once setTimeout finishes its timer then it comes back but till that time the i value is increased to 3, and since it remembers the reference of i and i value is 3 now, so it prints 3 three times.

The next question is how to fix it. ie How to print 0,1,2 after three seconds. So there are two approaches to this

1. Using let instead of var because let has block scope, so it creates a new reference of i every time it executes

function additt(){
    for (let i = 0; i < 3; i++) 
    {     
      setTimeout(function() {    
      console.log(i)}, 3000);
   }
}

2. Pass the value of i as an argument

function additt2(){
    for (var i = 0; i < 3; i++) 
    {  
       setTimeout(function(i) {    
       console.log(i)}(i), 3000);
    }
}

Advantage and Disadvantage of closure

Advantages

1. Used in Data hiding — closure can be used to make the variable private so that no other function can access the variable for example :

function increment(){
   var counter = 0;
   return function incrementCounter(){
       counter++;
   }
}

In the above example, only function incrementCounter can increase the value of the counter, if we try to access variable counter from outside incrementCounter it will give a reference error. So in this way, we can make our variables private.

2. Used in higher-order functions like Once and Memoization.

3. Used in currying

Disadvantage

1. Overconsumption of memory: The variables which form closure with inner function are not collected by the Garbage collector. It's because every time you execute a closure function it should remember its outer variable.

Photo by Artem Sapegin on Unsplash

That’s all for Closure. You can check www.codewithhimanshu.com for more blogs.