JavaScript globalThis: The Easy Guide to Accessing the Global Object

In the world of JavaScript, globalThis is the universal way to access the global object, regardless of the environment your code is running in.

Before globalThis was introduced (ES2020), developers had to write “detective” code to figure out where they were. If you were in a browser, the global object was window. In Node.js, it was global. In a Web Worker, it was self.

In JavaScript, the “global object” is the top-level bucket where all your environment’s variables and functions live. For years, developers had a major problem: this “bucket” had a different name depending on where your code was running. globalThis was introduced in ES2020 to fix this once and for all by providing a single, universal name for that bucket.

globalThis simplifies this by providing a single, consistent property that works everywhere.

Why Do We Need globalThis?

Before globalThis, you had to remember environment-specific keywords:

• Browsers: You used window.
• Node.js: You used global.
• Web Workers: You used self.

If you were writing a library intended to work in both the browser and Node.js, you had to write “detective code” like this:

// The old, messy way
const myGlobal = typeof window !== "undefined" ? window : 
                 typeof global !== "undefined" ? global : 
                 typeof self !== "undefined" ? self : this;

With globalThis, that entire mess is replaced by one word.

How to Use globalThis

Using globalThis is straightforward. It always points to the global object of your current environment.

1. Accessing Global Variables

Instead of checking for window or global, you just reference globalThis.

// Works everywhere: Chrome, Node.js, or a Web Worker
console.log(globalThis); 

2. Setting Global Properties

You can use it to create variables that are accessible throughout your entire application.

// Define a global variable
globalThis.apiBaseUrl = "https://api.tcmhack.com";

// Later in any other file or function
console.log(apiBaseUrl); // "https://api.tcmhack.com"

3. Feature Detection

It is perfect for checking if a specific API is available in the current environment.

// Check if the Fetch API exists
if (globalThis.fetch) {
  console.log("Fetch is supported!");
} else {
  console.log("Using a fallback for fetch...");
}

Key Benefits for Developers

• Portability: Write your code once, and it will run on a server, in a browser, or in a worker without modification.
• Readability: Your code is cleaner because you don’t need complex if/else checks for different environments.
• Safety in Strict Mode: In “Strict Mode,” the standard this keyword inside a function is undefined. globalThis still works perfectly, providing a safe way to reach the global scope.

Note: In strict mode, this inside a function is undefined. However, globalThis will always point to the global object, even in strict mode.

TCMHACK Tip: While globalThis is powerful, don’t over-pollute the global scope! Only use it for things that truly need to be accessed from everywhere, like polyfills or global configurations.