javascript - Is there any difference between a global variable and a property of the Global Object

Question

I was reading the following analysis from David Mark about the js framework "Sencha": https://gist.github.com/3279190 and in there he states...

What they wanted was a global variable, but they ended up with is a property of the Global Object. According the specifications and (and implementation history) there are enough differences between the two that care is required not to mix them up (as is done here).

...but as far as I was aware there wasn't any difference between var my_global = 123; and (in a browser environment) window.my_global = 123; (in that example I assumed the environment was a browser - hence the use of window, but I could have just used this.my_global instead as obviously the Global Object would be different when run in different environments).

But ignoring that minor discrepancy is there a difference between assigning a property to the Global Object and creating a global variable? I thought not, and that creating a global variable was just another way to assign a property to the Global Object.

I believe there can be an issue in some browsers if they had an element with an id of "my_global" then apparently that can cause problems with JavaScript referencing the right thing, but I'm not sure how/what causes that problem (e.g. does assigning a property to the Global Object cause the element id issue to occur, or is it declaring a global variable that causes the element id issue?)

Can someone clarify this for me please?

Answer 1

Update, April 2020

As noted in the comments by D. Pardal, the first sentence below, written in 2012, is no longer always true in environments that support ES Modules. Inside an ES module, a var statement does not produce a property of the global object.

Original answer

A variable created using var in the global scope does create a property of the global object. However, this property has different behaviour from a property of the global object that has not been created using var.

Firstly, there is a difference in how a variable declaration is executed: a var statement in the global scope creates a property of the global object before any code is executed, an effect commonly known as hoisting, well documented around the web (see references below).

Secondly, the global variable, unlike a property of the global object that has not been created with var, cannot be deleted using the delete operator (although this is not true in older versions of IE). delete cannot be used to delete variables. This difference is down to internal property attributes that every object property has. These attributes are specified in the ECMAScript specification. In ECMAScript 5 terms, var foo = "bar" creates a property foo of the global object with the [[Configurable]] attribute false whereas this.foo = "bar" (in global scope) creates a foo property with [[Configurable]] attribute true.

References:

• Dmitry Soshnikov has written at length about this in his excellent series of articles, ECMAScript 262-3 in detail. I recommend reading all of chapter 2, but the most relevant section is called About Variables.

• The kangax article linked earlier contains a lot of relevant information and details of browser bugs and deviations, plus further quirks concerning window.

• Angus Croll's Variables vs. Properties in JavaScript article, which links to many of the same resources as this answer.

• The spec: ECMAScript 5.1.