Usage of Closure in Javascript

In this article you are going to see what you can do with the power of Closure in Javascript. This not an article about what Closure is. This is an article about what Closure can do. I see a lot of people asking the question what's the big deal with Closure. They want more real world cases where Closure will make sense.

Example 1: Getting digit name

The goal is to read from an array and display the result. The first implementation is to put everything in Global namespace.

var names = ["zero", "one", "two", "three", "four", "five"];

var digit_name = function (n) {
  return names[n];
};

alert(digit_name(3)); // 'three'

Above solution works. However creating a global variable names is not a good thing. You should create as less global variables as possible.

Moving to a function

Next step is to move the code to a function. In this case we will not have any global variable.

var digit_name = function (n) {
  var names = ["zero", "one", "two", "three", "four", "five"];
  return names[n];
};
alert(digit_name(3));

The above solution is very slow. Every single time the function is called the whole array is loaded. This solution works and most of the developers will settle with this one. However Closure can provide a better solution.

Better solution with Closure

var digit_name = (function () {
  var names = ["zero", "one", "two", "three", "four", "five"];

  return function (n) {
    return names[n];
  };
})();
alert(digit_name(3));

Note that after declaring, the function is also getting invoked. This is a case of self invoking function. You can find out more about self invoking function here .

Example 2: Getters and Setters

Developers deal with getters and setters all the time. However creating a good getter and setter could be a little tricky. Here is one implementation

function Field(val) {
  var value = val;

  this.getValue = function () {
    return value;
  };

  this.setValue = function (val) {
    value = val;
  };
}

var field = new Field("test");
field.value;
// => undefined
field.setValue("test2");
field.getValue();
// => "test2"

Above solution works and it's nicely done.

Let's look at another implementation.

var getValue, setValue;
(function () {
  var secret = 0;
  getValue = function () {
    return secret;
  };
  setValue = function (v) {
    secret = v;
  };
})();

setValue("foo");
getValue(); // foo

Example 3: Building an iterator using Javascript

function custome_iterator(x) {
  var i = 0;
  return function () {
    return x[i++];
  };
}

var next = setup(["one", "two", "three", "four"]);

next();
next();
next();

This is a simple case of serially iterating through the items provided but the logic of deciding next element can be complex and it can be private.

Closure is a big topic and a lot of people have written a lot about it. Just search for Closure and you will get tons of links. I refer to this article time to time to see what pattern to use to make best usage of Javascript Closure.

This article was inspired by this book, this video and this article .