Why are we adding global variables with `window.`?
In many code examples that I see around the world, global variables, such as innerWidth
, onresize
, navigator
, etc., are written as window.innerWidth
, window.onresize
, window.navigator
, respectively.
Why do some of these globals added using window.
, and others, such as document
, and console
usually are not added?
Edit:
I know how OOP works and that I am accessing various properties of an object window
. I am not new to JavaScript. Sorry if my question may have been unclear. I have been programming in JS for years but have never questioned this convention, so my question is.
Basically I'm asking why we don't put window.
before document
, but we put him before innerWidth
. Is it just a matter of clarity? In theory, shouldn't I be referencing any of the globals without a prefix window.
and have no problem?
source to share
Unfortunately, window
in your browser it refers to the same object that represents two logically distinct concepts:
- a Window instance , an object with well-defined properties like Window.innerWidth , is logically displayed in the browser window (or rather in a tab, but this distinction is hidden from your script)
- a global object to which all global variables are bound as properties
Semantically, it is cleaner than prefixing global variables unrelated to the Window concept, c window.
.
Now note that this indicates a problem when you are referencing your globally specific variable, for example myThing
: it is difficult to know if you are deliberately referencing a global variable or declaring it in some staging scope (or if you just forgot to declare the variable with var). which leads to a situation where you will not only use window.
for properties of the Window instance, but also for your specific globals. Of course, in practice, you will avoid globals as much as possible.
Not prefixing with c window.
also has the advantage of forgetting to declare var
or import a library to make your code not fast, imprecise in a way (which is better than crashing in production on hard debug):
window.undeclaredVariable // no error, just an undefined value
undeclaredVariable // reference error
JavaScript would probably be better with a distinction between the two (something like global
or root
like in node).
source to share
All global functions and variables are bound to an object activator, this object depends on your host environment (browser, node, etc.), in a browser environment, an object activator is a window object, so each global function can be accessed using window.console
, this.console
or just console
I think the addition is useful to have more readable code.
You can access global cloud variables without adding a window only innerWidth
.
source to share
Think of it as objects. You are trying to get an object innerWidth
object window
. Document
- it is the same. You are trying to get those variables that describe itself Document
, and not window
in general. And console
- it's just a console where you go console.log
to debug. It also has its own properties.
They can be global variables, but they still belong and describe a specific "object" that you must first call. If that makes sense.
source to share