Javascript Closures

Question

I'm quite still confused with the concept of closure in JavaScript. I get the point that closure is the ability of the inner function to access the variable created within its mother function after the mother function has returned. But I'm still confused why do we have to create inner function to protect the local variable if we could just create a variable inside the function?

Answer 1

We need to create an inner function so that the variables in the outer function have some existence after the outer function returns.

Consider a simple function:

function f() {
  var x = 0;
  return ++x; // x=1
} // Once the function has exited then "x" no longer exists.

Note that the variable "x" is only "active" (alive, existent) when control of the program flows from the start of the "f()" function to the end of it. But if we enclose "x" in an inner function then x will live as long as the inner function does:

function g() {
  var x = 0;
  return function() {
    // Now "x" will live for as long as this function.
    return ++x;
  }
};
var counter = g();
counter(); // => 1
counter(); // => 2
counter(); // => 3

Now when we call "g()" we get another function, and "x" is active for as long as that function is referenced by a variable.

Answer 2

Why use closure?

(function(){
    var current_page = 1;
    function previous_page() {
        current_page--;
        // update interface
    }
    function next_page() {
        current_page++;
        // update interface
    }
    // a bit of jQuery, ok?
    $('#previous').click(previous_page);
    $('#next').click(next_page);
})();

Look: we have no global variables, not even any function defined in the global space... yet, we have attached a behaviour to the click events of "#previous" and "#next" buttons for a paging feature. How would you do it without closures? How would you do it defining current_page variable inside the functions?

Answer 3

The reason you need to create the inner function with scoped variables is object oriented encapsulation. It's essentially private variables.

The variables are "closed over".

// constructor function
var myObject = function(message) {
    // private - scope is function level.  It's CLOSED OVER the the inner function (closure).
    //           not delcared as a JSON property so not visible externally
    var value = 0;
    // constructor returns JSON object with public methods
    // always constructed from the myObject var so it always hands back the same instance
    // of the public methods
    return {
        // nested functions have access to outer function variables.
        increment: function (inc) {
            value ++;
        },
        getValue: function() {
            return value;
        },
        // the inner function even has access to the outer function's args!
        getMessage: message
    }
};

Look at the return statement. It returns the public interface - some methods that have access to the private variable because they are in the inner function. It's using JavaScripts function scoped variable to create object oriented encapsulation.

After that I can it like:

var obj = myObject('Hello World');
obj.increment();
obj.increment();
console.log(obj.getValue());
console.log(obj.getMessage);
// should be undefined
console.log(obj.value);

Note at this point the consumer does not have access to the protected/encapsulated value or message.

Now, here's the kicker - the object is mutable so the caller can add methods or even replace methods. So, you would think someone could add a method that exposes the internals. But, they can't because of function scope (closure - they're closed over). Only the nested function has access to the variables of the outer function. So, if the caller adds a method to return the internal, they can't get access and it will be undefined.

The code above outputs:

2
Hello World
undefined

As a side note, I'm running the javascript with node.js

Here's a good blog post on the module pattern using closures:

http://www.yuiblog.com/blog/2007/06/12/module-pattern/

Answer 4

You just answered your question, the inner function protects it's variable. jsFiddle

(function outer(){
    var foo = 'bar';
    function inner(){
        var foo = 'OMG NO!';
    }
    alert(foo);//alerts 'bar'
})()

Answer 5

FROM MDN CLOSURES

   why to use:

A closure lets you associate some data (the environment) with a function that operates on that data. This has obvious parallels to object oriented programming, where objects allow us to associate some data (the object's properties) with one or more methods.

when not to use

It is unwise to unnecessarily create functions within other functions if closures are not needed for a particular task as it will negatively affect script performance both in terms of processing speed and memory consumption.

For instance, when creating a new object/class, methods should normally be associated to the object's prototype rather than defined into the object constructor. The reason is that whenever the constructor is called the methods would get reassigned (that is, for every object creation).

Answer 6

There are alot of right answers out there about closures, but it always seems to get really technical while many people asking might be looking for a higher level simple explanation first.

I like to think of it like a car. When you drive a car, there are many many complex processes going on, but the average person doesn't need to know about these on an average day. Think of all those complexities as "private" variables hidden away by closures which makes the gas pedal, the break, the shifter, the steering wheel, and so on a lot easier to use.

So what is the purpose of a closure? To hide away all the complex variables and such to make a script much more usable. If you had to worry about every variable in a script everytime you wanted to use any function in the script, well that could quickly get very difficult. YAY CLOSURES!

Answer 7

The point is that the variable is shared between the two functions. If you declared the variable in the inner function, then the outer function would not be able to access it, so it wouldn't be shared.

Answer 8

If you declared the variable in the inner function, then each call to the inner function would create a new variable: any modifications made by a previous call are lost.

But if the variable is declared in the outer function then multiple calls to the inner function would see the same variable and one call would see the modifications of a previous call so long as they were both scoped to the same version of the outer function.