Taking Advantage of Closures in ECMAScript

I usually avoid nested functions (aka closures) like the plague. They just seem messy and there’s ample opportunity for memory waste. However, there are times when it makes perfect sense to use closures, such as when using them as event handlers for web service calls. Using closures makes understanding event flow, and therefore application logic, much, much easier. You don’t have to come up with unique names for a bunch of very similar methods and you eliminate scrolling all over the page to try and determine what happens when a web service call is made and a response is returned from the server.

Take a look at the image below. Notice how I’m registering an event listener and scoping it to a closure (nested function) within the method. When the asynchronous event is dispatched the mapped closure correctly catches the event and life proceeds beautifully. This is an example of closures and scoping working the way you would expect them to.

A couple of notes:

• Sho Kuwamoto did a nice write up on asynchronous event handling in Flex a couple of years ago, that I totally forgot about until writing up this blog post and looking for good reference material (too bad Sho isn’t with Adobe anymore — he was a killer resource).
• JavaScript folks should note that closures / inner functions work in their version of ECMAScript, though using a delegate to explicitly map scope is often necessary.