---
title: "Usage of Closure in Javascript"
description:
  "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."
canonical_url: "https://www.bigbinary.com/blog/usage-of-closure-in-javascript"
markdown_url: "https://www.bigbinary.com/blog/usage-of-closure-in-javascript.md"
---

# 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.

- Author: Neeraj Singh
- Published: March 13, 2009
- Categories: 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.

```javascript
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.

```javascript
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

```javascript
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](understanding-jquery-plugin-pattern-and-self-invoking-javascript-function)
.

## 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

```javascript
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.

```javascript
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

```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](http://www.amazon.com/Object-Oriented-JavaScript-high-quality-applications-libraries/dp/1847194141),
[this video](http://www.youtube.com/watch?v=hQVTIJBZook) and
[this article](http://ejohn.org/blog/javascript-getters-and-setters) .

## Links

- [Human page](https://www.bigbinary.com/blog/usage-of-closure-in-javascript)