My background is mainly in C/C++, so unlike Ruby programmers, who have probably been exposed to closures, I had to study up on it.
After reading some excellent technical descriptions and layman's articles, I came across a Stack Overflow post asking "How do JavaScript Closures Work?", which is really good. The writer was asking how you might explain closures to a six-year-old, because Richard Feinman said that "If you can't explain it to a six-year-old, you don't really understand it yourself".
Here's my attempt at an explanation of closures for six-year-olds:
A man goes on a long trip, leaving his home and family behind. He's very fond of his home and before he leaves he takes a picture to bring with him. On his travels he is sometimes asked to describe his home. At such times, he takes out the photograph and begins to describe it. He talks about the white picket fence, the flower boxes by the windows, and the apple trees in the back yard.
While he's away, however, his family has decided to renovate and build a 3-story condo on the spot where the house is. Gone is the white picket fence. Gone are the apple trees. Gone are the flower boxes by the windows. The entire scene has changed. Yet the travelling man knows nothing about these changes, and continues to talk about his home as he remembers it, pulling out his worn photograph to show to strangers along the way. He describes the white picket fence, the flower boxes and the trees. Unaware of the changes being made while he is away, in his mind and in his pocket he carries a picture of home that is a closure - a snapshot of the way things were - and that is all he knows.
In JavaScript, when you return a function, its like a traveling man. The function will remember the scene where it came from, just the way it was.
var color = 'white';
function leaveHome () {
// a variable in leaveHome's scope
// a variable in leaveHome's scope
var description = "My house is " + color;
// returns another function, creating a closure over description
// returns another function, creating a closure over description
return function() {
console.log(description);
}
}
var travellingMan = leaveHome();
travellingMan(); // "My house is white"
color = 'red'; // They painted the house
travellingMan(); // "My house is white"
A couple points to notice:
- In JavaScript, functions are objects, too. Functions can create and return other functions.
- When you return a function or pass one as an argument, it doesn't need a name. It can be defined right in-line as an anonymous object.
- When the return function is created it "closes over" the variables in it's scope. In the example it takes a snapshot of the description variable.
