Question

Fire up your firebug console and try this out.

Compare this:

$('body').data('x',1);
$(thisx).remove();
console.log($('body').data('x'));

to this:

$('body').data('x',1);
$(this.x).remove();
console.log($('body').data('x'));

Notice the difference? If thisx is undefined, it will immediatly throw a reference error. If x is an undefined property of this, jQuery will return the document as it’s result set instead. Next jQuery will attempt to remove your document (which it can’t), but before doing that it will remove all data attached to any child element of the document. Thus, wiping out your data store.

Note: this can be any element reference or object. You only need to have jQuery attempt to access an undefined property.

(Talk about a pain. It fails silently, and I’m trying to figure out why my data is suddenly missing. I track it down to a special case where an element reference was undefined in a specific situation.)

So on to my questions:

1) Before I submit a bug report, am I analyzing this correctly? Also if someone happens to know that this is a known issue, let me know. I couldn’t find it in the bug tracker, but the interface isn’t that great (or maybe I have this wrong).

2) Why is there ultimately any difference? I’m guessing thisx is evaluated immediately which causes the exception while this.x is a reference that is passed and evaluated in the called function, right? (where I think the line selector = selector || document; is the culprit.

3) Suggestions for how to handle this? I guess I should be checking that any/every element reference or property of an object (e.g. stored selector strings) is defined before I pass it to jQuery when removing something.

Answer 1

Why is there ultimately any difference?

Both thisx and this.x are evaluated when the function is called. The first one refers to an undefined variable name and this throws a reference error. The second one accesses an undefined property of an object, which results in the value undefined. This is just how javascript behaves in these cases.

Now when JQuery is called in the second case, the call $(this.x) evaluates to $(undefined) which is the same as if you just would have called $(). Since it looks to JQuery as if no argument was provided, it uses a default instead, and in this case the default is document. Then it proceeds trying to delete document, since it was effectively called as $().remove(), in which case this would be expected.

Suggestions for how to handle this?

The difference with the ReferenceError is a fundamental Javascript difference, not much that can be done about that. JQuerys behavior is unfortunate and a consequence of setting defaults by arg = arg||default. One could user arguments.length instead to get the real number of call parameters, but a change like this would surely result in lot’s of broken code that relied on the default being used when undefined or 0 is passed, so it’s unlikely to happen.