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?