Table of Contents
URL: https://www.progressiverobot.com/js-globalthis/
A new property called globalThis gives you cross-platform access to the global object in JavaScript.
Accessing the global property in JavaScript has always posed some difficulty. This is because different platforms have different ways to access it.
- <^>Client-side JavaScript<^> uses
windoworself
- <^>Node.js<^> uses
global
- <^>Web workers<^> use
self
This isn't a huge problem if you're exclusively writing client-side JavaScript. You could simply write window to interact with the global object.
However, the problem arises when you need to write <^>portable JavaScript that works on more than a single platform<^> (eg.: a library like lodash which works in both Node.js and client-side).
The popular solution is to use a shim that uses code like this to determine the available global object:
var getGlobal = function () {
if (typeof window !== 'undefined') {
return window; // Client-side JavaScript
}
if (typeof self !== 'undefined') {
return self; // Client-side JavaScript / Web workers
}
if (typeof global !== 'undefined') {
return global; // Node.js
}
};
var __global__ = getGlobal();
if (typeof __global__.alert === 'function') {
console.log('Client-side land!');
} else {
console.log('Node.js land!');
};
Using globalThis
Since globalThis is available in Node.js/client-side/Web workers, interacting with the global object becomes much simpler!
if (typeof globalThis.alert === 'function') {
console.log('Client-side land!');
} else {
console.log('Node.js land!');
}
Say goodbye to inspecting which platform you're on! ✌️
Conclusion
Currently globalThis is a Stage-3 ECMAScript Proposal. However, many browsers including Chrome, Firefox, and Safari (desktop/mobile) have already made this new API available!
For in-depth information about globalThis checkout Axel Rauschmayer's blog post 📰
