Closure in javascript

Today, we gonna learn about the one of the most interesting part of javascript, that is closure . In this post, I will show you what is the purpose of closure as well as how to use them. Be ready?

Before wee start diving in closure, we need to know how the variable is defined in javascript first

Global variables & local variables

In javascript, global variables are variables which can be accessed by other functions. Those functions can read, modify that variable.

Example of global variable

var counter = 0;
function count() {
  counter++;
  return counter;
}
console.log(count()); //1
console.log(count()); //2 
console.log(count()); //3 

In the above example, since the count function still be able to read and modify counter even counter is defined outside the count function. For that reason, we call counter is the a variable. And this is an interesting feature of javascript, help us to access whatever we want.

But global variable causes the problem. The more freedom we have, the more chaos we got. count function needs to access counter the keep the increment. but what happens if we change counter without invoking count function:

var counter = 0;
function count() {
  counter++;
  return counter;
}
console.log(count()); //1
var counter = 10;
console.log(count()); //11 -- Wrong
console.log(count()); //12 -- Wrong

So now we know the global variable is devil, we need to avoid using it as much as possible. One solution for this is instead of defined counter as a global variable, we will define it as a local variable which only accessible via count function. Something like this:

function count() {
  var counter=0;
  counter++;
  return counter;
}
console.log(count()); //1
console.log(typeof counter);//Undefined
console.log(count()); //1 -- Wrong
console.log(count()); //1 -- Wrong

With this way, counter is defined inside count method, so it’s can’t modify by outside. In line 7, we’re trying to access counter variable but no success because counter is local variable and it can be accessible only via count function. But we still got the problem that counter is reset to 0 every time count function is invoked and how can we share the value foe counter across multiple invocations. How can we solve these problems? This time we can gain the benefit from closure.

What is closure

In some words, closure is a kind of child function is nested in parent function, that parent function holds a variable which accessible by child function but can’t be accessed outside. The special point here is parent function is self-invoke function and it returns its child function. Something like this

Example of closure:

var count=(function(){
  var counter=0;
  return function(){
    counter++;
    return counter;
  }
})();
console.log(count()); //1
var counter = 10;
console.log(count()); //2 -- Still correct
console.log(count()); //3 -- Still correct

The idea behind closure is nested function, child function can access the variable which is defined in the parent function. Parent function is self-invoke function and it returns child function immediately. But the point is after parent function return child function, the child function still is able to access parent function even parent function is terminated. And this is the heart of closure .

With closure , we give a javascript function ability to define a private variable, which is kept inside the function and can’t be accessible by outside.

Finally words

Hope that with this post, you gain more knowledge about closure as well as how the variable is defined in javascript. With this knowledge, you have an easy way to “convert” a global variable to a local variable.