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

JavascriptAttributesScope

Javascript Problem Overview


I'm reading the backbone.js documents and 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 var, like this:

something = "whatever";

i assume there is some kind of scope different, 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.

Javascript Solutions


Solution 1 - Javascript

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

  • 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.


1 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.

Solution 2 - Javascript

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

Solution 3 - Javascript

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 (e.g. node.js, or perhaps running in a web view of some sort on a mobile device), it may not.

Solution 4 - Javascript

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.

Solution 5 - Javascript

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
}

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
QuestionDerick BaileyView Question on Stackoverflow
Solution 1 - JavascriptRaynosView Answer on Stackoverflow
Solution 2 - Javascriptgion_13View Answer on Stackoverflow
Solution 3 - JavascriptScottKoonView Answer on Stackoverflow
Solution 4 - JavascriptdavidView Answer on Stackoverflow
Solution 5 - JavascriptSridharKrithaView Answer on Stackoverflow