87 lines
3.4 KiB
Markdown
87 lines
3.4 KiB
Markdown
|
|
# Global object
|
|
|
|
The global object provides variables and functions that are available anywhere. Mostly, the ones that are built into the language or the environment.
|
|
|
|
In a browser it is named `window`, for Node.js it is `global`, for other environments it may have another name.
|
|
|
|
Recently, `globalThis` was added to the language, as a standartized name for a global object, that should be supported across all environments. In some browsers, namely non-Chromium Edge, `globalThis` is not yet supported, but can be easily polyfilled.
|
|
|
|
All properties of the global object can be accessed directly:
|
|
|
|
```js run
|
|
alert("Hello");
|
|
|
|
// the same as
|
|
window.alert("Hello");
|
|
```
|
|
|
|
In a browser, global variables declared with `var` become the property of the global object:
|
|
|
|
```js run untrusted refresh
|
|
var gVar = 5;
|
|
|
|
alert(window.gVar); // 5 (became a property of the global object)
|
|
```
|
|
|
|
Please don't rely on that! This behavior exists for compatibility reasons. Modern scripts use JavaScript modules where such thing doesn't happen. We'll cover them later in the chapter [](info:modules).
|
|
|
|
Also, more modern variable declarations `let` and `const` do not exhibit such behavior at all:
|
|
|
|
```js run untrusted refresh
|
|
let gLet = 5;
|
|
|
|
alert(window.gLet); // undefined (doesn't become a property of the global object)
|
|
```
|
|
|
|
If a value is so important that you'd like to make it available globally, write it directly as a property:
|
|
|
|
```js run
|
|
*!*
|
|
// make current user information global, to let all scripts access it
|
|
window.currentUser = {
|
|
name: "John"
|
|
};
|
|
*/!*
|
|
|
|
// somewhere else in code
|
|
alert(currentUser.name); // John
|
|
|
|
// or, if we have a local variable with the name "currentUser"
|
|
// get it from window explicitly (safe!)
|
|
alert(window.currentUser.name); // John
|
|
```
|
|
|
|
That said, using global variables is generally discouraged. There should be as few global variables as possible. The code design where a function gets "input" variables and produces certain "outcome" is clearer, less prone to errors and easier to test.
|
|
|
|
## Using for polyfills
|
|
|
|
We use the global object to test for support of modern language features.
|
|
|
|
For instance, test if a built-in `Promise` object exists (it doesn't in really old browsers):
|
|
```js run
|
|
if (!window.Promise) {
|
|
alert("Your browser is really old!");
|
|
}
|
|
```
|
|
|
|
If there's none (say, we're in an old browser), we can create "polyfills": add functions that are not supported by the environment, but exist in the modern standard.
|
|
|
|
```js run
|
|
if (!window.Promise) {
|
|
window.Promise = ... // custom implementation of the modern language feature
|
|
}
|
|
```
|
|
|
|
## Summary
|
|
|
|
- The global object holds variables that should be available everywhere.
|
|
|
|
That includes JavaScript built-ins, such as `Array` and environment-specific values, such as `window.innerHeight` -- the window height in the browser.
|
|
- The global object has a universal name `globalThis`.
|
|
|
|
...But more often is referred by "old-school" environment-specific names, such as `window` (browser) and `global` (Node.js). As `globalThis` is a recent proposal, it's not supported in non-Chromium Edge (but can be polyfilled).
|
|
- We should store values in the global object only if they're truly global for our project. And keep their number at minimum.
|
|
- In-browser, unless we're using [modules](info:modules), a global variable declared with `var` becomes a property of the global object.
|
|
|
|
To make the code easier to understand and more future-proof, we should access properties of the global object directly, as `window.x`.
|