This document discusses closures in JavaScript. It defines a closure as a function together with references to its surrounding state (the lexical environment). Closures are created by inner functions that return references to variables in outer scopes. This allows functions to access variables from outer scopes even after they have returned. Closures are useful for handling events and emulating private methods. While they provide data encapsulation, closures can also negatively impact performance due to increased memory usage.

1. Closure in JavaScript
By Nicholas Ren,
ThoughtWorks

2. JavaScript
 The world’s most misunderstood programing language
 looks like an ordinary procedural language.
 has more common with functional language.
 closure, functions are first class.

3. Closure
 What is it?
 How to create a closure?
 What’s its usage?
 Advantage and disadvantage

4. What’s a closure?
 closure is a function together with a referencing environment
for the non-local variables of that function
 closure is a specified kind of object that combines two things:
a function, and the environment in which that function was
created
 a function remembers what happens around it

5. How to create a closure?
 crate a inner function and return it to outside.
 sample:
function makeAdder(x)
{
return function(y)
{
return x + y
}
}
var add5 = makeAdder(5);
var add1000 = makeAdder(1000);
alert("add5(10)): " + add5(10));
alert("add1000(10)): " + add1000(10));

6. Usages of closure
 handle event driven function
 emulate private method

7. Sample:
handle event driven functions
HTML:
<p id="help">Helpful notes will appear here</p>
<p>E-mail: <input type="text" id="email" name="email"></p>
<p>Name: <input type="text" id="name" name="name"></p>
<p>Age: <input type="text" id="age" name="age"></p>

8. Sample:
handle event driven functions
javascript:
function showHelp(help) {
document.getElementById('help').innerHTML = help;
}
function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
];
for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = function() {
showHelp(item.help);
}
}
}
setupHelp();

9. Sample:
handle event driven functions
javascript:
function showHelp(help) {
document.getElementById('help').innerHTML = help;
}
function makeHelpCallback(help) {
return function() {
showHelp(help);
};
}
function setupHelp() {
var helpText = [
{'id': 'email', 'help': 'Your e-mail address'},
{'id': 'name', 'help': 'Your full name'},
{'id': 'age', 'help': 'Your age (you must be over 16)'}
];
for (var i = 0; i < helpText.length; i++) {
var item = helpText[i];
document.getElementById(item.id).onfocus = makeHelpCallback(item.help);
}
}
setupHelp();

10. Sample:
emulate private function
Person = function(){
name = "Adam";
return {
getName:function getName(){ return name;},
setName:function setName(new_name){
name = new_name;
}
}
}
p = new Person();
p.setName("Jim");
alert(p.getName());

11. Advantage & Disadvantage
 Advantage
 bring any object along with the scope chain
 data encapsulation
 make event handling logic more clear
 Disadvantage:
 slow speed
 more memory consumption

12. Theory and implementation
 Closures are typically implemented with a special data
structure that contains a pointer to the function code, plus a
representation of the function's lexical environment (e.g., the
set of available variables and their values) at the time when
the closure was created.
 difficult to implement for a stack based programing language
because of Funarg problem

13. Related Terms
 function object
 lamda lifting
 first-class function
 high-order function

14. Appendix
 http://javascript.crockford.com/javascript.html
 http://en.wikipedia.org/wiki/Scope_(computer_science)#Lexic
al_scoping
 http://en.wikipedia.org/wiki/Closure_(computer_science)