Question

Just today after a couple of years of javascript programming I came across something that left me startled. Browsers create objects for every element with an id. The name of the object will match the id.

So if you have:

<div id ="box"></div>

You can do:

alert(box); //[object HTMLDivElement]

Without first assigning anything to that variable. See the demo.

This for some reason seems to be in the standards even though it can break the code in some cases. There is an open bug to end this behavior but I’m more interested in getting rid of it now.

Do you guys know if there is a way to disable this (strict mode maybe)? Am I giving this too much importance? Because it certainly seems like a bad idea. (It was introduced by IE to give you a hint).

Update: It seems FF only does this in quirks mode. Other browsers like IE6+ and Chrome do it right off the bat.

Answer 1

ECMAScript 5 strict should help with this as you cannot use undeclared variables. I’m not sure which browsers currently support strict mode but I know Firefox 4 does.

The HTML spec you linked mentions a proposal to reduce pollution of the global scope by limiting this behavior to quirks-only.

I don’t know if this feature is in the original spec but I do expect it to be removed, prohibited or otherwise nullified in subsequent versions of ECMAScript. ES6 will be based on ES5 strict.

JavaScript has many features that make it easier to use for beginners and novices, I suspect this is one such feature. If you’re a professional and you want quality code use "use strict"; and always JSLint your code. If you use these guidelines this feature should never bother you.

Here is a useful video about ES5 courtesy of YUI Theater (it’s already 2 years old though, but still relevant currently as there is no ES6 yet).