JavaScript - How do I learn about "closures" usage?

Question

From Wikipedia, the free encyclopedia: Closure (computer science)

In computer science, a closure is a function that is evaluated in an environment containing one or more bound variables. When called, the function can access these variables. The explicit use of closures is associated with functional programming and with languages such as ML and Lisp. Constructs such as objects in other languages can also be modeled with closures.

To use this inside of JavaScript, can someone point me to an example of how this applies?

I've just written a [blog post](http://skilldrick.co.uk/2010/11/a-brief-introduction-to-closures/) about closures in JavaScript that you may find helfpul. — Skilldrick, Nov 23 '10 at 14:48

score 11 · Answer 1 · edited Oct 10 '13 at 22:07

11

Searching for "javascript closures" gave plenty of encouraging-looking links. The top three were these two (the third link was a reformatted version of the second):

If these didn't help you, please explain why so we're in a better position to actually help. If you didn't search before asking the question, well - please do so next time :)

edited Oct 10 '13 at 22:07

Travis J

81,153
41
202
273

answered Oct 17 '08 at 14:37

Jon Skeet

1,421,763
867
9,128
9,194

@sunglim: It would have helped if you'd said *which* link wasn't valid. Anyway, fixing. – Jon Skeet Apr 07 '10 at 14:13
Links 1 and 3 are the same article. – Yarin Nov 17 '10 at 18:29
Anyone can google "encouraging" links, but the user was looking for direction from the OS community. If you haven't used the resources yourself don't recommend them. – Yarin Nov 17 '10 at 18:33
@Yarin: The OP *specifically* asked for "an example of how this applies". The linked pages give plenty of examples. While anyone *can* search for links, it seems to me that lots of people *don't*. I think you meant that 2 and 3 are the same article - albeit reformatted. I'll remove the third link. – Jon Skeet Nov 17 '10 at 19:03

score 4 · Accepted Answer · answered Oct 17 '08 at 14:40

4

(using an example from jQuery)

function SetClassOnHover(className){
  $("td").hover(
    function () {
      $(this).addClass(className);
    },
    function () {
      $(this).removeClass(className);
    }
  );
}

The closure comes into play when the variable className is used inside the scope of each function. When SetClassOnHover exits, both functions must retain a handle on className in order to access its value when the functions are called. That's what the closure enables.

answered Oct 17 '08 at 14:40

This is the most succinctly useful closure example I've seen. Nice. – Yarin Nov 17 '10 at 18:37
This answer, IMO, sucks. this is 10% of what closures can do. Why not show private variables with it? At least answer it without using jquery... – invisible bob Feb 11 '11 at 22:28
3

@invisible nothing stopping you from answering. How about you stop talking big and start acting? – Feb 14 '11 at 14:48
well... it's a little late but fine. – invisible bob Feb 22 '11 at 22:45

score 1 · Answer 3 · answered Feb 22 '11 at 22:50

A practical example of closures is when they are used to create "Private" variables, like

function incrementer(){
    var i=0;
    this.increment=function(){
        i++;
    }
    this.get=function(){
        return i;
    }
}

The only way to access i is to use the method get, and the only way to change it is to use the method increment. In classes, you can do this to emulate private variables.

JavaScript - How do I learn about "closures" usage?

3 Answers3

Linked