
Earlier, I talked about the [basics of JavaScript Closure](https://veerasundar.com/blog/javascript-closures/). In this post, lets continue to explore Closure with the help of some practical examples.

Before we begin, just to recap,

> Closure encloses function and the set of variables that were in scope of the function when it was declared. The variables inside the closure kept alive as long as the function alive.

With that in mind, let's make some closures.

## 1. Maintain State between function calls

Let's say you have function `add()` and you'd like it to add all the values passed to it in several calls and return the sum. For example,

```javascript
add(5); // returns 5
add(20); // returns 25 (5+20)
add(3); // returns 28 (25 + 3)
```

Of course, you can use a global variable in order to hold the total. But keep in mind that [this dude](http://en.wikipedia.org/wiki/Tyrannosaurus) will eat you alive if you (ab)use globals.

For scenarios like this, Closure is the best candidate for maintaining state between function calls without using globals. Let's see how.

```javascript
// Using IIFE, to not to pollute global namespace.
(function(){

  var addFn = function addFn(){
    // local to closure and hold the value inbetween multiple calls.
    var total = 0;
    return function(val){
      total += val;
      return total;
    }

  };

  var add = addFn();

  console.log(add(5)); // 5
  console.log(add(20)); // 25
  console.log(add(3)); // 28

}());
```

[Run this example on JSFiddle](http://jsfiddle.net/gHZjA/).

## 2. Partial application, a.k.a Currying

Suppose you have a function that takes several arguments and you only know values for some of the arguments in the beginning. For this scenario, you can make use of [Currying](http://en.wikipedia.org/wiki/Currying) technique to pre-fill the values for known arguments and supply values for the rest of the arguments later.

Here's an example, illustrating Currying using Closure.

Assume you have a `showMessage()` function that shows given message on screen with the given type and position. It takes three arguments. So, every time you want to call this function, you need to supply these three values.

```javascript
(function(){
  function showMessage(type, position, message){
    // displays a message at position and sets it type (for CSS styling)
  }

  showMessage('error', 'top', 'Not good.');
  showMessage('info', 'top', 'You better know this.');

}());
```

What if you want to make this function call, simpler? What if you create two other methods, namely, `showError()` and `showInfo()` that prefill the message type and position and supply the actual message in a later point in time? Let's Curry them.

The Curry function is taken from [John Resig's post](http://ejohn.org/blog/partial-functions-in-javascript/) (which btw is a good read [about Currying](http://ejohn.org/blog/partial-functions-in-javascript/)).

```javascript
(function(){

  // Lets add Curry method to Function so that we can call it on any function we want.
  Function.prototype.curry = function(){
    var fn = this, args = Array.prototype.slice.call(arguments);
    return function(){
      return fn.apply(this, args.concat(Array.prototype.slice.call(arguments)));
    };
  };

  // Core method.
  function showMessage(type, position, message){
    console.log('showing [' + message + '] of type [' + type + '] at [' + position + '].' );
  }

  // Create special versions of Core method using Currying.
  var showError = showMessage.curry('error', 'top');
  var showInfo = showMessage.curry('info', 'bottom');

  // Call our special methods.
  showError('Not good.');
  showInfo('You better know this.');

}());
```
[Run this example of JSFiddle](http://jsfiddle.net/3GqcW/)

## 3. Private methods in JavaScript?

Yes, we can emulate private methods in JavaScript using Closure. Let'e see how.

```javascript

(function(){

  var makeCar = function(){

    // private variable
    var fuel = 0;

    // private method
    function burnFuel(){
      fuel-=10;
      console.log('Burned fuel [10]');
    }

    return {
      accelerate : function(){
        if(fuel > 0){
          burnFuel();
        }else{
          console.log('Out of gas. Fill now.');
        }
      },

      fillGas : function(gas){
        if(fuel <= 100){
          fuel += gas;
        }else{
          console.log('Reached capacity. Stop spilling.');
        }
      }
    }

  };

  var car = makeCar();
  car.accelerate(); // Out of gas. Fill now.
  car.fillGas(75);
  car.accelerate(); // Burned fuel [10]
  car.accelerate(); // Burned fuel [10]

}());

```

[Run this example on JSFiddle](http://jsfiddle.net/Fka3b/)

As you can see, the `makeCar()` function returns an object with two methods: `accelerate` and `fillGas`. These two methods has access to the private method `burnFuel` and private variable `fuel`. But the outer world can not directlty access these two.

So, with the help of closure you can simulate object oriented programming in JavaScript.

With that, I am concluding this post of Closure examples. Of course, these are not the *only* examples of Closures. There are lot many out there. Btw, If you have written closure for an interesting use case, feel free to share it in the comments section.
```


JavaScript Closure - examples


Closures are very important topic in JavaScript that you must understand if you want to master the language. The earlier you know about Closures, the better you will write your JavaScript code. But, from my experience, most of the JavaScript beginners either do not understand Closure or do not know that the existence of the topic at all.

So, in this post, I am trying to write down my understanding of Closures and their practical usages, in the hope that it will help some of you.

## What is a Closure?

So, what is it? As per the [definition](https://encrypted.google.com/search?hl=en&q=define%20closure "Define Closure")

> _Closure_ : A thing that closes or seals something

So, a closure is kind of a box with some contents in it.

<a
  href="http://www.flickr.com/photos/bryanalexander/3295316720/"
  title="Fenestra in a box by BryanAlexander, on Flickr"
>
  <img
    src="http://farm4.staticflickr.com/3655/3295316720_e284d62308.jpg"
    width="500"
    height="430"
    alt="Fenestra in a box"
  />
</a>

Lets say, you have a cat and you placed it inside a box along with a bunch of balls and sealed it. So, now the box acts like a closure that closes the cat and the balls. The cat still has access to the balls and it can access them whenever it pleases to do so.

## JavaScript Closure

When it comes to JavaScript, instead of cats and balls, a Closure contains a function and all the variables that were in scope when the function got declared. Instead of cat, JavaScript places the function and instead of balls, it places all the variables that were in scope to that function.

<a
  href="http://www.flickr.com/photos/94921037@N05/9499522885/"
  title="JavaScript Closure by v33ra, on Flickr"
>
  <img
    src="http://farm4.staticflickr.com/3677/9499522885_525b651880.jpg"
    width="491"
    height="166"
    alt="JavaScript Closure"
  />
</a>

The important thing to note here is that the function that is inside the closure still has access to all the variables inside the closure. As long as the function exists, the variables inside closure will not get garbage collected, letting the function access them whenever it pleases do so.

## Coding the Closure

Enough with english. Let's see some JavaScript.

Consider the below code.

```javascript
function sayHello(){
  var message = "Hello"; // 1. Define a local variable.
  console.log(message); // 2. Prints Hello, as 'message' is still in scope.
}
sayHello();
```

As you'd expect, the code will print 'Hello' on the console. Now, let's tweak the code a little bit. Instead of printing the `message`, lets return a function that will print the message.

```javascript
function sayHello(){
  var message = "Hello"; // 1. Define a local variable.
  return function(){ // 2. Return a function from sayHello.
    console.log(message); // 4. Is 'message' still in scope?
  }
}
var helloSayer = sayHello();
helloSayer(); // 3. call the inner function returned from sayHello.
```

In the above,

1. We define a variable `message` that is local to the function `sayHello` and only accessible from it.
2. We declare a function and return it thus returning from `sayHello`. As common JavaScript knowledge goes, when we return from `sayHello`, all local variables inside that function will go out of scope and garbage collected. Will it happen to `message`? Let's see.
3. We call the inner function returned from `sayHello`.
4. Surprisingly, the code will strill prints 'Hello' and we can see that the inner function has access to the variable `message` even though we returned from the function. This is because of closure.

If we recall, in JavaScript, a closure will contain the function and the set of variables that were in scope when the function got declared.

In the above code, when we declare the inner function at line #2, JavaScript creates a closure and puts this function and the variable `message` (which is accessible to the function) in it. So, when the inner function getting called after we return from `sayHello` it still has access to the variable `message`.

That explains the basics of Closure. In my next post, I'll be covering some more [examples of closure](https://veerasundar.com/blog/javascript-closure-examples/). Feel free to comment if you have any feedback.
```


#closure (2)