While adding some initialisation code to a webpage, I found myself writing window.onload = ...
for the umptieth time, when a thought hit me.
The window.
isn't necessary, because window
is the current object. So it's optional!
But nobody writes just onload = ...
and I wonder why that is.
I mean, we have no qualms about writing other things, say alert
without the window.
qualifier.
window.onload = function() {
alert('Your window has loaded');
};
while in reality, alert
is just as much a method of the window
object as the onload
is.
So, why the difference? Why do even formal websites like the W3C do this?
While adding some initialisation code to a webpage, I found myself writing window.onload = ...
for the umptieth time, when a thought hit me.
The window.
isn't necessary, because window
is the current object. So it's optional!
But nobody writes just onload = ...
and I wonder why that is.
I mean, we have no qualms about writing other things, say alert
without the window.
qualifier.
window.onload = function() {
alert('Your window has loaded');
};
while in reality, alert
is just as much a method of the window
object as the onload
is.
So, why the difference? Why do even formal websites like the W3C do this?
- 17 It's explicit, so nobody thinks you're just accidentally assigning to a global variable. – Bergi Commented Oct 23, 2015 at 15:20
- 1 I like this argument, as it explains the difference. Assigning something to a variable vs calling a function - you couldn't possibly create a new function by just calling it, hence it's clear that the function already exists somewhere. – Mr Lister Commented Oct 23, 2015 at 16:28
- @Bergi Can you post this as an answer? I think this is still the most pelling argument. – Mr Lister Commented Oct 24, 2015 at 7:04
- This question is similar to: Benefit of using 'window' prefix in javascript. If you believe it’s different, please edit the question, make it clear how it’s different and/or how the answers on that question are not helpful for your problem. – user5127 Commented Dec 3, 2024 at 6:31
4 Answers
Reset to default 8We write window.
when we want to be explicit about it. There are basically two cases when this is good form to use it:
- properties and methods of the
window
object - everything that is part of theWindow
interface. The.onload
listener you've mentioned is an example of this, things likewindow.scrollY
,window.status
,window.parent
,window.open()
,window.focus()
,window.removeEventListener()
are others. - creation of global properties. Assigning to
window.myGlobalVar
from any scope is a mon JS idiom to create a global "variable". Admittedly, it is still better practise to explicitly declare it withvar
.
While we could "optionally" omit the window.
part here, it's unmon. Especially creation of implicitly global variables through assignment is despised, and usually seen as a mistake. So if you do it on purpose, you declare your intention by using window.
.
However, the first case is not always well-defined. We often do omit the window.
part when the property we want to use is essentially a static, global variable, and not necessarily related to the window
object even when it is formally specified on it. You seldom see anybody using document
, atob()
, Worker
, setTimeout()
or fetch()
with the window.
prefix, just as you don't use window.JSON.parse
or window.Array
for the built-in objects (although it would be valid).
For some other properties like navigator
, location
or alert()
it is not always clear, and those are used maybe fifty-fifty without or not.
I see following reasons:
- Reduce searching up the scope-chain will improve the performance slightly. This is also seen in the IIFE where
window
is sent as parameter to the function and inside it the local reference to the window is used. - If the function/member defined on
window
globally is overriden in the scope, then it'll not work as expected, so referencing explicitly makes it refer to the correct function/member. This is useful to create the function/member with the same name as the global one and still able to access the global member from shadowed scope.
Because .onload
isn't exclusive to window
. It can also be used, for example, as document.onload
. So you define it depending on when you want your script to be executed.
window object is by default initialized by browser. Its a good practice to defined explicitly window object it effect on performance &your code will bee understandable.