So, there are dozens of built-in global properties in the (desktop) browser. For instance:
document
undefined
parseInt
JSON
location
alert
setTimout
When referring to those properties, should one explicitly note them as global properties by prefixing their name with window.
? So, for instance:
var wrap = window.document.getElementById('wrap');
and
window.setTimeout(loop, 100);
and
var x = window.parseInt(input.value, 10);
I think there are three answers to this question:
Yes, you should always write window.X
when referring to global properties.
No, you don't have to write window.X
. Just X
is fine.
It depends on the property. For some properties, use window.X
, for some other properties use X
. (If this is your answer, please elaborate.)
So, which is it?
I would go for 3: no window
except for a few exceptions.
In browsers, window
refers to the global scope. window.
as in window.prompt()
is redundant. You could use it to emphasize that prompt()
is a method of the window
object.
I would never use something like window.Math
or window.NaN
because these properties are global objects that has nothing to do with the window
object which is incidentally the global object in browsers. See also Global Properties and Functions Defined in ECMAScript.
If you have another variable in the current (local) scope named prompt
, you would need the window.
prefix as well to get the prompt dialog as in:
(function() {
var prompt = "Give me your name!";
var name = window.prompt(prompt, "your name");
})();
For setting global variables, you should add the window.
prefix as well to satisfy tools like jslint. (otherwise, it would look like a you have forgotten the var
keyword and thereby accidentally leaks a variable in the global scope):
(function() {
// "WRONG"
somevar = 1;
// You probably want to set a local variable, so should use:
var somevar = 1;
// take away the confusion, you really wanted to set a global variable:
window.somevar = 1;
})();
Generally, omitting window.
improves readability, considering the next example:
window.setInterval(function() {
var numA = window.parseInt(window.document.getElementById("numA").value, 10);
var numB = window.parseInt(window.document.getElementById("numB").value, 10);
window.document.getElementById("avg").value = window.Math.floor((numA + numB) / 2);
}, 1000);
Normally unless I'm dubious about people overwriting known global variables with local names I use X
directly instead of referring to it as window.X
.
However for Setter
situations rather then Getter
situations I like to use window.X
to illustrate that I'm hoisting a particular variable into global scope.
Ideally I like having everything event & callback driven and limiting setting variables into global scope.
(function($, undefined) {
...
var SomeUsefulConstruct = function() {
...
}
...
// hoist to global scope
window.SomeUsefulConstruct = SomeUsefulConstruct;
...
}(jQuery);
Sticking to this pattern of using window.X
you can make it very clear when your setting data on a global level. In an ideal situations you can use no globals at all what so ever apart from and using a set of callbacks and event handlers instead.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With