What's the difference between a global variable and a 'window.variable' in JavaScript?

Question

I'm reading the Backbone.js documents and am seeing a lot of code that assigns attributes to the window object:

window.something = "whatever";

What's the difference between calling this code, and just assigning the variable and creating a global variable, like this:

something = "whatever";

I assume there is some kind of scope difference, and/or object ownership difference ( window being the owner vs. not), but I am interested in the detail between the two and why I would use window vs. not use it.

Answer 1

No difference. They both have the same effect (In the browser, where window is the global context ¹ ).

• window.foo = "bar" sets the property foo on window .
• foo = "bar" indicates either a typo or intentionally global.

Since I have to double check whether it's a typo or not, I personally find it more readable to set window.foo directly.

Also, in ES5 strict mode, foo = "bar" is an illegal assignment because foo is not declared and will throw a Error .

Edit:

As noted in the comments, foo = "bar" will look all the way up the scope chain for the variable foo and re-assign it with "bar" if it's found. If it's not found, it will create a new global variable.

Also with window.foo = "bar" you're just assigning a property to an object, which can be deleted using delete window.foo .

In ES5 strict mode it is invalid to delete a variable.

---

¹ In other environments, such as node.js and Web Workers, there may be another name for the global object and window may not exist at all. Node.js uses global and Web Workers use self .

Answer 2

They both kind of do the same thing.
But by accessing a window property, you know for sure that you're accessing a global variable no matter what scope you're in.
For example:

globalVar = "smth";
function(){
    var globalVar = 2;
    alert(globalVar);// points to the current scope globalVar
    alert(window.globalVar);// points to the original globalVar
}

In other words, If you want to work with globals, it's somewhat safer to access them via their container: window.variable

Answer 3

The key, as Raynos alluded to, is that it's set explicitly on the window object. In the browser, the global object is the same as the window object but in other environments (eg node.js, or perhaps running in a web view of some sort on a mobile device), it may not.

Answer 4

The difference is that window.foo = bar; cannot be intercepted by refactoring done later. Using foo = bar; means that if, at a later date, the code is moved into a closure where var foo has been defined, it will no longer set it on the global object.

Answer 5

Adding one more point:

If you refer an undeclared variable directly (without using - window or typeof ) then you will get a variable is not defined error .

Examples:

// var unDecVariable

if (unDecVariable != null) // Error: unDecVariable is not defined
{
    // do something
}

if (window.unDecVariable != null) // No Error
{
    // do something
}

if (typeof unDecVariable != 'undefined' && unDecVariable != null) // Alternative way
{
    // do something
}

Answer 6

Unresolved references (aka undeclared variables) are actually not variables, they get added as a property to the global object. [5c]

In strict mode ("use strict"), unresolved references throw a ReferenceError. This is to avoid adding properties to the global object that were meant to be declared variables. In this case if you do want to add a property to the global object you would use window.foo = "bar". [5a]