ES2020 - Access global scope with globalThis across different environments

Updated: 28/4/2020

Writing cross-platform JavaScript that can run across different environments such as NodeJS or the browser has definitely some difficulties. One of these is that we should access the global object by using a different approach based on the environment our code runs.

In browser, the window is the global object, in NodeJS it is global while for web workers it is self. Last but not least, only this is available in a shell like V8's d8 or JavaScriptCore's jsc 😬

This forced us to run some custom logic to spot the global scope:

const theGlobalScopeObject =
  (typeof global !== "undefined") ? global :
    (typeof window !== "undefined") ? window :
      (typeof self !== "undefined") ? self :
        (new Function("return this"))();

With ES2020 this issue will come to an end because now we can access the global object in a unified way by calling directly globalThis. That way, we won't have to worry about the environment our application is running on.

Because of globalThis the snippet above can be changed to the following if we want to stay safe:

const theGlobalScopeObject =
  (typeof globalThis !== "undefined") ? globalThis :
    (typeof global !== "undefined") ? global :
      (typeof window !== "undefined") ? window :
        (typeof self !== "undefined") ? self :
          (new Function("return this"))();

As expected, in the browser globalThis will return the window object:

While in NodeJS it will return the global object:

Cheers!!