Everything you need to know about Closures ( Javascript fundamental part-2)

Do you know how the given code will behave and execute? what will be the output of the above function? If no, then no worry after going through this article you will not only able to answer it but will aggravate your understanding of Javascript (JS) skills.

But before proceeding, make sure you know about Execution context. you can refer this :

Javascript From Scratch -1 (Execution Context & Execution Stack)

Just a quick recap, When JS starts to execute your code, it create an execution context in which all variables are reference with undefined and function have their reference from memory. For larger code, these executions context are managed using stack which means once a particular function is executed then it is removed from stack and pumped into garbage collections. that means you can no longer use those variables anymore.

enough background, let’s start with Closures:

From MDN, definition of Closure is :

A closure is the combination of a function bundled together (enclosed) with references to its surrounding state (the lexical environment). In other words, a closure gives you access to an outer function’s scope from an inner function. In JavaScript, closures are created every time a function is created, at function creation time.

In simple sense, closures store the variable’s state even if the function block is executed already and (its context ) dumped into garbage. In normal condition, if particular function is executed once and tried to call again the function will reinitialise all the variable and one cannot fetch its previous call value. but closures allow this function to store this variables in memory so that they can be used in future.

for eg. example is taken from MDN.

function makeFunc() {
  var name = 'Mozilla';
  function displayName() {
    alert(name);
  }
  return displayName;
}

var myFunc = makeFunc();
myFunc();

Let’s understand the above code. reference of makeFunc is stored in a variable called myFunc and then we can use the reference to call the function later i.e. myFunc(). for the first time, when makeFunc is called then JS will create its own execution context where name is initialised with ‘Mozilla’ and there is another function nested inside the makeFunc called displayName which is returned later.

Now, displayname will create its own execution context and all the context are stored in execution stack (FIFO manner ). in the first call the displayName function will be not be called only its context will be created.

Finally, when we execute the last line, then the displayName will be executed where alert(name) will be executed. But, wait how do displayName get the value name? the name is declared in the outer function and no variable called name is declared inside the displayName. then how this inner function will get the name variable. this is the magic of closures!!!

Note: Lexical scope- this scope lets the inner function to access the variable declared outside this function

Thus, closure create a lexical scope where these function can store the value and use this in future.

Now, lets get back to the first question asked. What will be the output? How it will be executed?

it will be executed with help of closures. when users click then this EventListener will be called and create a variable called clear. now the inner function will be executed where we are clearing the timeout created by the setTimeout for 2 sec. after 2 sec the console will be executed and it will print hit api. But what will happen if user clicks again, it will simply go thru the process again and print the output. But what if user clicks within 2secs then will it console anything? the answer is no. why?

because within 2 secs, the inner function will clear previous timer ( closures will let the previous timer reference stored ) and create a new timeout and it will console after 2 secs.

Conclusion

Closures create lexical scope through which the inner function access the outer function variable and store for future use, so that for subsequent call they can access these variables.