• Post Reply Bookmark Topic Watch Topic
  • New Topic
programming forums Java Mobile Certification Databases Caching Books Engineering Micro Controllers OS Languages Paradigms IDEs Build Tools Frameworks Application Servers Open Source This Site Careers Other Pie Elite all forums
this forum made possible by our volunteer staff, including ...
Marshals:
  • Campbell Ritchie
  • Jeanne Boyarsky
  • Ron McLeod
  • Paul Clapham
  • Liutauras Vilda
Sheriffs:
  • paul wheaton
  • Rob Spoor
  • Devaka Cooray
Saloon Keepers:
  • Stephan van Hulst
  • Tim Holloway
  • Carey Brown
  • Frits Walraven
  • Tim Moores
Bartenders:
  • Mikalai Zaikin

Understanding Javascript Closures

 
Ranch Hand
Posts: 230
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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
 
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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:

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
Ranch Hand
Posts: 230
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator

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
Sheriff
Posts: 67746
173
Mac Mac OS X IntelliJ IDE jQuery TypeScript Java iOS
  • Mark post as helpful
  • send pies
    Number of slices to send:
    Optional 'thank-you' note:
  • Quote
  • Report post to moderator
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.
 
A tiny monkey bit me and I got tiny ads:
a bit of art, as a gift, the permaculture playing cards
https://gardener-gift.com
reply
    Bookmark Topic Watch Topic
  • New Topic