What's the difference between a global var and a window.variable in javascript?
JavascriptAttributesScopeJavascript 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 propertyfoo
onwindow
.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
}