How do JavaScript closures work?

Like the old Albert Einstein said: "If you can't explain it to a six-year old, y ou really don't understand it yourself. . Well, I tried to explain JavaScript clos ures to a 27-year old friend and completely failed. How would you explain it to a 6-year old person that is strangely interested in that subject? EDIT: I have seen the Scheme example given in Stack Overflow, and it did not help. =========================================== Whenever you see the function keyword within another function, the inner functio n has access to variables in the outer function. function foo(x) { var tmp = 3; function bar(y) { alert(x + y + (++tmp)); } bar(10); } foo(2) This will always alert 16, because bar can access the x which was defined as an argument to foo, and it can also access tmp from foo. That is not a closure. A closure is when you return the inner function. The inne r function will close-over the variables of foo before leaving. function foo(x) { var tmp = 3; return function (y) { alert(x + y + (++tmp)); } } var bar = foo(2); // bar is now a closure. bar(10); The above function will also alert 16, because 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 bein g incremented. It will be incremented each time you call bar. As a result of thi s it will alert 17 the second time bar(10) is called, 18 the third time, etc. (Not for your 6 year old: It is possible to create more than one closure functio n, either by returning a list of them or by setting them to global variables. Al l 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, whe n 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 tha t 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); As expected, each call to bar(10) will increment x.memb. What might not be expec ted, 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. How do JavaScript closures work?