using a self executing function

jwg · December 20th, 2011, 12:51 PM

I'm just finished the chapter on creating an event utility object. I was interested to learn about self executing functions but I don't see why one was used in the code in chapter 20. I teach a course to high school students and don't like teaching them stuff if I can't explain why it's being done. I rewrote this code without using a self executing function and it works fine so why do it here? There is absolutely no explanation in the book of why this is done. I looked up reasons for using a self executing function and the only reasons I could find were in order to encapsulate variables and not polute the global object. Are these the reasons for doing it in chapter 20 or are there other reasons having to do with functionality?

jmcpeak · December 21st, 2011, 03:14 AM

Howdy, jwg.

The benefit is explained either in an earlier lesson or on the DVD; I imagine the latter, as it can be better explained with that medium. But for a quick and dirty explanation, it was used for performance reasons. Event utility methods are typically written like this:

Code:

addEvent : function(obj, evt, fn) {
    if (typeof addEventListener === "function") {
        // use standards-based code
    } else {
        // use legacy IE code
    }
}

It works, but the JavaScript engine has to evaluate the condition (the addEventListener test) every time addEvent() executes. It's a very small performance hit, but a hit none-the-less.

By using a self-executing function, the engine only has to evaluate the condition once at load-time. Since it returns a browser-specific function for adding an event handler, the resulting addEvent() executes as fast as possible.

jwg · December 21st, 2011, 10:53 AM

Hi, thanks for the reply. I'm not crazy about learning from video, but now that I know there is stuff there that is different from the book I'll give the videos a look.