2

Is it true that JavaScript automatically attempts to define undefined variables to:

document.getElementById('someUndefVarName')

As in, the following appear to be equivalent:

<div id="myUndefVar">:)</div>
<script>
    alert(myUndefVar); // why does this work!?
    alert(document.getElementById('myUndefVar'));
</script>

See JSFiddle example: http://jsfiddle.net/AH35k/1/

Or is something else happening that I don't understand? This really caught me off-guard as I expected some sort of error since I'm using "use strict".

mikhail
  • 5,019
  • 2
  • 34
  • 47
  • 1
    See the JSFiddle code, the variable is clearly NOT explicitly defined anywhere. – mikhail Jan 24 '14 at 19:20
  • 5
    Yes. Browsers will create global variable from element IDs. I wouldn't rely on this behavior, though. http://stackoverflow.com/a/6381766 – gen_Eric Jan 24 '14 at 19:20
  • 2
    Browsers create global bindings (`window` properties) for element "id" values. – Pointy Jan 24 '14 at 19:20
  • If you wanna get the error, then move the `
    ` tag after the `
     – Tzar Jan 24 '14 at 19:22
  • @Pointy that seems crazy...so an id="jQuery" would override the jquery object on window. Is that normal behaviour? and does "use strict" change that? – monastic-panic Jan 24 '14 at 19:22
  • 1
    This isn't a "JS" thing. This is a browser-vendor, DOM-extension, into the JS scope. If you did this using variables which are not DOM extensions, you'd have different results. I believe the initial intent "once upon a time" was form-handling from `window`, by default. – Norguard Jan 24 '14 at 19:22
  • This seems like something that should have been mentioned in "The Good Parts" as an anti-pattern. – mikhail Jan 24 '14 at 19:25
  • 2
    @theporchrat: Let's find out: http://jsfiddle.net/AH35k/3/ :-D – gen_Eric Jan 24 '14 at 19:25
  • 3
    @theporchrat Personally I think it's a really terrible idea. Internet Explorer did it a long time ago, and eventually the other browsers capitulated. – Pointy Jan 24 '14 at 19:35
  • @mikhail "The Good Parts" typically avoids most DOM stuff (other than to mention it's a horrible, horrible API, which needs to burn), and sticks to the actual language. For instance, this doesn't actually happen in NodeJS, or other embedded JS, elsewhere. – Norguard Jan 24 '14 at 19:41
  • @RocketHazmat well at least it seems to not override it is it already exists, phew. THIS just seems like a horrible "feature" i wonder what the historical significance of it is – monastic-panic Jan 24 '14 at 21:02

2 Answers2

5

Some (and only some) browsers create global vars from IDs.

This can be useful when debugging (ie in the chrome console you can just type "Blah" to access an HTML Element with id="Blah"), but should not be relied on to work cross-browser.

Further, if you do this:

<div id="myUndefVar">:)</div>
<script>
    var myUndefVar;
    alert(myUndefVar);
</script>

Or this:

<div id="myUndefVar">:)</div>
<script>
    alert(myUndefVar);
    var myUndefVar;
</script>

Then the alert will display the value undefined. It will only lookup the named IDs of elements if there is no other var defined in the same scope with the same name (including hoisting, as in the second example).

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
3

I believe the answer to this question is well summed up as:

Browsers automatically create global variables from element IDs

A related question: javascript variable corresponds to DOM element with the same ID

This seems like a pretty bad feature, I would avoid relying on this behavior.

Community
  • 1
  • 1
mikhail
  • 5,019
  • 2
  • 34
  • 47