The New globalThis JavaScript Property

William Le

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 window or self
  • 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).

Learn JavaScript basics for free

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 πŸ“°

  Tweet It

πŸ•΅ Search Results

πŸ”Ž Searching...

Sponsored by #native_company# β€” Learn More
#native_title# #native_desc#
#native_cta#