A function can see variables at it’s own level and all it’s ancestors.
ie. see the following (n.b. none of the inner functions are closures)

$(document).ready(function() {
    scopeChains();
});

var _global = true;
function scopeChains() {

    var _inner1 = true;
    logVars('in scopeChains', _inner1); // _inner2 and _inner3 are out of scope
    function inner1() {

        var _inner2 = true;
        logVars('in inner1', _inner1, _inner2); // _inner3 is out of scope
        function inner2() {

            var _inner3 = true;
            logVars('in inner2', _inner1, _inner2, _inner3);
        }
        inner2();
    }
    inner1();
}

function logVars(sFunctionName, inner1Var, inner2Var, inner3Var) {
    logLine('***** ' + sFunctionName + ' *****');
    logLine('_global = ' + _global);
    logLine('_inner1 = ' + (typeof (inner1Var) == 'undefined' ? 'undefined' : inner1Var));
    logLine('_inner2 = ' + (typeof (inner2Var) == 'undefined' ? 'undefined' : inner2Var));
    logLine('_inner3 = ' + (typeof (inner3Var) == 'undefined' ? 'undefined' : inner3Var));
    logLine('*****************************');
}

function logLine(sContent) {
    $('#txtArea').val($('#txtArea').val()
                            + sContent + '\r\n');
}

Outputted
***** in scopeChains *****
_global = true
_inner1 = true
_inner2 = undefined
_inner3 = undefined
*****************************
***** in inner1 *****
_global = true
_inner1 = true
_inner2 = true
_inner3 = undefined
*****************************
***** in inner2 *****
_global = true
_inner1 = true
_inner2 = true
_inner3 = true
*****************************

Breaking the Chain

How does an inner function break the chain?

1. By making itself global (omitting var)

   var n;
   function f() {
     var b = 'b';
     n = function() {
       return b;
     };
   }
   // note, what about if we omit 'n='
   

2. By having F return it to global space

   function f() {
     var b = 'b';
     return function() {
       return b;
     };
   }
   

The concept of captured Variables

The root of the chain is what holds all instances.
I’m going to call it an instance stream, each broken chain has it’s own set of instances.

function closureFunction(theVal) {
    return function() {
        // chain is broken, therefore
        // theVal is from a new instance stream
        log(theVal++);
    }
};

$(document).ready(function() {

    var arrFunctions = [];

    arrFunctions[0] = closureFunction(10);
    arrFunctions[1] = closureFunction(20);
    arrFunctions[2] = closureFunction(30);

    for (i = 0; i < 3; i++) {
        log('index = ' + i.toString());
        arrFunctions[i]();
        arrFunctions[i]();
    }

});

function log(sContent) {
    $('#txtArea').val($('#txtArea').val()
                            + sContent + '\r\n');
}

Outputted:
index = 0
10
11
index = 1
20
21
index = 2
30
31

To get parameter into closure space

an argument to outer function essentially becomes a local variable,
thereby we can pass an argument which will become it's own instance.

function f(arg) {
  var n = function() {
    return arg++;
  };
  return n;
}

ie the arg is basically like a local like so:

function f() {
  var arg = 2;
  var n = function() {
     return arg++;
  };
  return n;
}

so we have a parameter, which becomes it's own instance in the closure,

$(document).ready(function() {

    var arrFunctions = [];
    var iCounter = 0;
    for (var i = 0; i < 5; i++) {
        iCounter = i * 10;
        arrFunctions[i] = (function(theCounter) {
            return function() {
                log(theCounter);
                theCounter++;
            }
        })(iCounter);
    }

    for (i = 0; i < 5; i++) {
        log('index = ' + i.toString());
        arrFunctions[i]();
        arrFunctions[i]();
    }

});

function log(sContent) {
    $('#txtArea').val($('#txtArea').val() + sContent + '\r\n');
}

outputs:
index = 0
0
1
index = 1
10
11
index = 2
20
21
index = 3
30
31
index = 4
40
41

very useful for say ajax.
imagine that _airlineDom, _flightNumDom, _opSuffixDom are input boxes.

e.g.

doAjaxPost('updateAirlineName', _airline, true,
    (function() {
        return function(data) {
            successHandler.call(this, data);
            _airlineDom.val('');
            _flightNumDom.val('');
            _opSuffixDom.val('');
        }
    })(_airlineDom, _flightNumDom, _opSuffixDom),
    failureHandler);

Here is part one of the series

Begin at the beginning and go on till you come to the end: then stop.
- The King, Alice in Wonderland

This will make this a long post (update, posts!), but it will also hopefully set in place foundations that will make things much easier to understand.

Functions and Scope

Functions are at the core of closures, as they govern scope.
You see, most languages people are used to have block scope (C, C++, Objective-C, C#, Java etc)

example c# scope:

if (true) {
    string theVar = "inner";
}
Console.WriteLine(theVar); // compilation error
                   // theVar is not in scope

In javascript this code is fine, as the code is in the same function.

if (true) {
    var theVar = "inner";
}
alert(theVar); // this works

Functions can access their values and their parent functions values.
We will clarify this further in part II of this blog series. For now it is fine to note that block scope does not work in javascript, and that functions are what are crucial in delineating scope.

Therefore, functions in javascript are very important so we need to be specific about how we can declare them and call them. This understanding will serve as a foundation for understanding the more powerful features of closures in javascript.

There are two ways to declare functions in javascript:

// variation 1
function myFunction() {
   return 'hello world';
}

$(document).ready(function() {
   alert(myFunction());  // outputs hello world
   alert(window.myFunction());  // outputs hello world
});

// variation 2
var theFunction = myFunction() {
   return 'hello world';
}

$(document).ready(function() {
   alert(theFunction());  // outputs hello world
   alert(window.theFunction());  // outputs hello world
});

under-the-hood javascript assigns globals to window object, the first variation is really a convenience shortcut to the second variation, where it assigns the function to globals.

Self-Invoking Functions

We can call functions as soon as we declare them, by using the following notation.
This creates the function executes it then throws it away (ie we aren’t assigning the function to anything)

(function(){
  alert('This function is called once straight-away');
})();

The pattern being:

Functions as Parameters (callback functions)

We can also pass functions to be called in ours or other peoples functions:

function addFunctionResults(a,b) {
   return a() + b();
}

function one() {
  return 1;
}

function two() {
  return 2;
}

$(document).ready(function() {
  alert(addFunctionResults(one, two));
});

// alternative version of the above
// using anonymous functions

function addFunctionResults(a,b) {
   return a() + b();
}

$(document).ready(function(e) {
  alert(addFunctionResults(function() { return 1; },
                           function() { return 2; })
         ); // returns 3
});

Inner Functions

We can utilise an inner function, or we can return it by an explicit return or by assigning it to a variable in parent function space, the latter two cause a closure (we break the scope chain). The preceding sentence will make sense once we begin talking about scope chains, for now, let us look at an example of inner functions that are utilised and inner functions that are returned.

$(document).ready(function() {

    alert(a('hello world'));

});

function a(param) {
    function b(theInput) {
        return param;
    };
    return 'you said "' + b(param) + '"';
}  

Returning an inner function:

  // returning an inner function
  function a() {
    alert('returning inner function');
    return function() {
      alert('b');
    };
  }

var innerFunction = a();
innerFunction();

// or if we do not need to save
// a reference to function (ie call only once)
a()();

So, when we return an inner function, we call it once to get the inner function, then we call again to call the inner function.
This trick is used by people to make private initialisations in a function.

function initA() {
    alert('A!'); // stuff here is private init
    return function() {
        alert('B!');
    };
}

$(document).ready(function() {
    var func = initA(); // init // outputs A!
    func(); // call function once // outputs B!
    func(); // call function a second time // outputs B!
});  

Or as a variation, here we can do init and overwrite our function:

function a() {
    alert('A!'); // stuff here is private init
    a = function() {
        alert('B!');
    };
}

$(document).ready(function() {
    a(); // init // outputs A!
    a(); // call function once // outputs B!
    a(); // call function a second time // outputs B!
});  

Here is part 2 of this series