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

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.

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.