Is there any difference between a global variable

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

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.

Answer 2

I'm not aware of any practical difference but there sure is some difference between referencing as global or as window.var. A simple example:

'use_strict';
console.info(window.foo);
console.info(foo);

window.foo will simply return undefined. foo will give undefined as error. So yes, they are different. But in good code(my example is very bad code) it doesn't look like there is any difference. (but if there is, I really like to know more about it :) )

Answer 3

var count = 123

var global_object = {
    count:var = 456
console.log(this.count) //returns 456

}

console.log(count) //returns 123

console.log(global_object) //returns 456

Above, count is first defined as a global variable. Then, it is defined as a property within the global object. The definition within the global object is local to that object.

I see a problem with my answer now that didn't occur to me when I first posted this. In the most upvoted answer above I notice it is, correctly, shown that in the case of the global variable in the question "var" is used in its definition, but in the case of the global object, no "var" is used. I would still expect scope to come into play here (it would in ActionScript).

I have a couple other problems with the example above. count:var = is just wrong to me. Maybe that should be var count = 456. However; I would still expect a variable declared within a function to only have scope within that function. So the console.log expressions in the example should hold true.