Whenever you see the function keyword within
another function, the inner function has access to variables of the
outer function.
That is a closure. A function doesn't have to return in order to be called a closure. Simply accessing variables outside of your immediate lexical scope creates a closure.
The inner function will close-over the variables of
Consider another example:
However, since
(Note for your 6 year old: It is possible to create more than one closure function, either by returning a list of them or by setting them to global variables. All of these will refer to the same
Edit: And now to explain the part that isn't obvious.
Here the number
On the other hand, JavaScript always uses references when dealing with Objects. If say, you called
This is the basis for memory leaks with HTML objects, but that's a little beyond the scope of this, ahem, article, ahem.
function foo(x) {
var tmp = 3;
function bar(y) {
alert(x + y + (++tmp));
}
bar(10);
}
foo(2)bar can access the x
which was defined as an argument to foo, and it can also
access tmp from foo.That is a closure. A function doesn't have to return in order to be called a closure. Simply accessing variables outside of your immediate lexical scope creates a closure.
The inner function will close-over the variables of
foo
before leaving.Consider another example:
function foo(x) {
var tmp = 3;
return function (y) {
alert(x + y + (++tmp));
}
}
var bar = foo(2); // bar is now a reference to the closure returned by foo
bar(10);bar can
still refer to x and tmp, even though it is no
longer directly inside the scope.However, since
tmp is still hanging around inside bar's
closure, it is also being incremented. It will be incremented each time
you call bar. As a result of this it will alert 17 the
second time bar(10) is called, 18 the third time, etc.(Note for your 6 year old: It is possible to create more than one closure function, either by returning a list of them or by setting them to global variables. All of these will refer to the same
x and the same tmp, they don't make their own
copies.)Edit: And now to explain the part that isn't obvious.
Here the number
x is a literal number. As with other
literals in JavaScript, when foo is called, the number x
is copied into foo as its argument x.On the other hand, JavaScript always uses references when dealing with Objects. If say, you called
foo with an Object, the
closure it returns will reference that original Object!function foo(x) {
var tmp = 3;
return function (y) {
alert(x + y + tmp);
x.memb = x.memb ? x.memb + 1 : 1;
alert(x.memb);
}
}
var age = new Number(2);
var bar = foo(age); // bar is now a closure referencing age.
bar(10);bar(10) will increment x.memb.
What might not be expected, is that x is simply referring
to the same object as the age variable! After a couple of
calls to bar, age.memb will be 2!This is the basis for memory leaks with HTML objects, but that's a little beyond the scope of this, ahem, article, ahem.
