Double-take

There's an issue with Microsoft's JScript interpreter (the one used by IE, Windows Scripting Host, and others) that you see mentioned deep in discussions of other things. I thought it would be worth just briefly talking about on its own.

Update: The newer version of JScript used by IE9 and up doesn't have this bug anymore. Yay! Still in IE8 and earlier, though.

Basically, if you use a named function expression in your JavaScript code, JScript will process it twice, creating two separate function objects, at two separate times: First it treats it as though it were a function declaration (even though it isn't), and then it treats it as the expression it is. This is not a distinction without a difference, either, as we'll see below. (Amongst other things, it creates "symbol bleed," putting the function's name in the enclosing scope in clear violation of Section 13 of the specification, which says that it should only be defined within the function's own scope).

What do I mean by function declaration vs. function expression (named or otherwise)? Here's a function declaration:

function foo() {
}

Here's an anonymous function expression:

var foo = function() {
};

And here's a named function expression — this is the one JScript (IE) has an issue with:

var f1 = function foo() {
};

The easiest way to tell whether you have a declaration or an expression is to ask yourself: Are you using it as a right-hand value? E.g., are you assigning it to a variable/property or passing it into a function as an argument? If so, it's an expression. If it's standalone, it's a declaration. Here are some further examples of named function expressions:

bar(function foo(){});

var obj = {
    nifty: function foo() {
    }
};

So first off, how do we know JScript is creating two function objects? Here's the easiest way:

var f1 = function foo() {
    alert(f1 === foo); // alerts "false" on IE, "true" on other browsers.
};
f1();

So, okay, but what do we care? Well, let's say you want to hook up an event handler and have it unhook itself later if some condition is met:

Prototype example:

$('foo').observe('click', function fooClickHandler() {
    if (/* ...some condition... */) {
        this.stopObserving('click', fooClickHandler);
    }
});

jQuery example:

$('#foo').click(function fooClickHandler() {
    if (/* ...some condition... */) {
        $(this).unbind('click', fooClickHandler);
    }
});

Perfectly reasonable, but won't work on IE. The handler will remain attached, because when you unhook a specific event handler, the function reference you give has to be the same as the reference you want to remove. On IE, the above, it isn't: fooClickHandler isn't the same function that we hooked up. The expression returned a different function.

So how do you work around it? Just make sure you're using declarations, like this:

Prototype example:

function fooClickHandler() {
    if (/* ...some condition... */) {
        this.stopObserving('click', fooClickHandler);
    }
}
$('foo').observe('click', fooClickHandler);

jQuery example:

function fooClickHandler() {
    if (/* ...some condition... */) {
        $(this).unbind('click', fooClickHandler);
    }
}
$('#foo').click(fooClickHandler);

If you don't want fooClickHandler to be a symbol in that scope, wrap it up in a scoping function, like so:

Prototype example:

(function() {
    function fooClickHandler() {
        if (/* ...some condition... */) {
            this.stopObserving('click', fooClickHandler);
        }
    }
    $('foo').observe('click', fooClickHandler);
})();

jQuery example:

(function() {
    function fooClickHandler() {
        if (/* ...some condition... */) {
            $(this).unbind('click', fooClickHandler);
        }
    }
    $('#foo').click(fooClickHandler);
})();

Alternately, you could just not use names (and use arguments.callee to unhook the handler), but there are lots of good reasons not to do that (arguments.callee is slow on most browsers, not allowed in ECMAScript's new "strict" mode, and besides, names are good).

So what's this "symbol bleed" issue I mentioned? Well, according to the specification, the scope of the function name in a function expression is confined to the function itself, not the encompassing scope. So:

var f1 = function foo() {
    // `foo` is defined here
};
// but not here

Whereas, of course, if that were a function declaration, the foo symbol would (of course!) be defined in the scope in which the function is declared.

(You can see this coming, can't you?) Since one of the times IE processes the named function expression it treats it as a declaration, it incorrectly defines the symbol in the enclosing scope — much like we would do if we didn't use the scoping functions above — which is incorrect.

Happy coding!