Understanding Javascript Closures

[Paul Yule]

from an earlier post by Eric

You need a closure

var ajax = new AJAXInteraction(url, function(response){ validateCallback( response, field1, field2, field3); });

Eric

I'm going to admit through my trial and error learning of Javascript this is the piece of the language that has remained the most difficult to fully grasp for me. So to ask very simply...what exactly is a closure? In dumb-it-down-for-me English.

I have looked around at various sources on the net and the structure of the closure is very similar to that of an anonymous class. I have had similar problems in the past very similar to the post I started this topic with. Best I can reason is that it is an object representation of a function(?). How exactly do you know if you need a closure instead of just calling the function? What exactly is going on with the function(response) portion of the closure there? Is it creating a wrapper function for his validateCallBack function on the fly and passing the response that way? Would it work as

...function(){validateCallBack( response, field1, field2, field3)}

[Bear Bibeault]

If you can snag a copy of jQuery in Action, I go into some level of detail on this in Appendix A.

But essentially, the concept is fairly simple. Any local variables that are in scope within a block in which a function is declared are available to the body of the function, even after the block goes out of scope.

Consider:

{
  var xyz = 213; 
  window.setTimeout(function(){ alert(xyz);}, 5000 );
}

Even though the function will fire off 5 seconds after the block goes out of scope, the value 213 is correctly displayed in the alert.

(Also, be aware that this is never part of a closure.)
[ November 14, 2008: Message edited by: Bear Bibeault ]

[Paul Yule]

Originally posted by Bear Bibeault:
If you can snag a copy of jQuery in Action, I go into some level of detail on this in Appendix A.

This is one of the few books i've heard from everyone that is a must-get. A friend insisted he let me borrow his, but you know how that goes...I'll pick it up sometime this week when I get a moment.

And I completely understand your above example now, I think. So, the anonymous function that was created inside the AJAXInteraction parameters has access to variables inside the same closure the ajax object was created.

Why is that needed though? Is it because the JS code would exit before the response came back and thus lose the reference to the response object? If you need to see the forum that Eric posted that originally i'll try to find it but I think it's a fairly common task. Right now I think I understand it, but I would have a hard time identifying when I need to use it.

var ajax = new AJAXInteraction(url, function(response){ validateCallback( response, field1, field2, field3); });
[ November 18, 2008: Message edited by: Paul Yule ]

[Bear Bibeault]

Normally, a local variable simply goes away when the block containing it goes out of scope. If you need to access the value at a later time (very common with timers or Ajax requests where the response comes back at some undeterminable point in the future), you'd be out of luck without closures.

By binding the variables in scope at the time of the function creation to the function as a closure, the values are available to the function even after the block has been reclaimed.