96e95bb3d1
A minor addition. (...where such thing doesn't happen. --> where such a thing doesn't happen.)
89 lines
3.5 KiB
Markdown
89 lines
3.5 KiB
Markdown
|
|
# Global object
|
|
|
|
The global object provides variables and functions that are available anywhere. By default, those 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 standardized name for a global object, that should be supported across all environments. It's supported in all major browsers.
|
|
|
|
We'll use `window` here, assuming that our environment is a browser. If your script may run in other environments, it's better to use `globalThis` instead.
|
|
|
|
All properties of the global object can be accessed directly:
|
|
|
|
```js run
|
|
alert("Hello");
|
|
// is the same as
|
|
window.alert("Hello");
|
|
```
|
|
|
|
In a browser, global functions and variables declared with `var` (not `let/const`!) 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)
|
|
```
|
|
|
|
The same effect have function declarations (statements with `function` keyword in the main code flow, not function expressions).
|
|
|
|
Please don't rely on that! This behavior exists for compatibility reasons. Modern scripts use [JavaScript modules](info:modules) where such a thing doesn't happen.
|
|
|
|
If we used `let` instead, such thing wouldn't happen:
|
|
|
|
```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 than if it uses outer or global variables.
|
|
|
|
## 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).
|
|
- 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), global functions and variables declared with `var` become a property of the global object.
|
|
- To make our code future-proof and easier to understand, we should access properties of the global object directly, as `window.x`.
|