Automatically created variables from ids in JS? [duplicate]

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).

Answer 2

Yes most browsers do this but then again like you said some don't (firefox) so don't count on it. It's also easy to overwrite these variables in js, I can imagine something like container might be overwritten right of the bat by someone using that variable without declaring it first.

There is no way to turn this of in chrome afaik but even then it might be a hassle to figure this out and fix it for all browsers.

Don't give it too much importance, but beware of it. This is one of those reasons why you would evade the global scope for variables.

For the sake of completion, these browsers definitly do it by default: Chrome, IE9 & compat, Opera

Update: Future versions of ECMAScript might include an option of some sort since yes discussion is going on, but that will not fix the 'problem' in older browsers.

Answer 3

I don't think this is much of a big deal. It seems messy especially to those of us who think about global namespace pollution and conflicts, but in practice it doesn't really cause a problem.

If you declare your own global variable, it will just override anything the browser created for you so there's not really any conflict. The only place I could see it potentially causing a problem is if you were testing for the existence of a global declaration and an "auto" global based on an object ID got in the way of that and confused you.

In practice, I've never seen this to be a problem. But, I'd agree it seems like something they should get rid of or allow you to turn off.