Language: EN
LuisLlamas Logo
Search
⏲️ ~ 2 minutes Beginner
javascript-globalthis-window-global

The globalThis object, window, and global in JavaScript

In JavaScript, this execution context has a special object called the global object. The global object is the root of the entire program.

The global object varies depending on the environment in which it runs.

  • In browsers, the global object is window.
  • In server environments like Node.js, the global object is global.

The global object is the main container for all variables, functions, and objects defined in a program.

Additionally, it acts as a common access point to functions and objects predefined by the environment, such as console, setTimeout, and others.

Later, the reserved word globalThis was introduced to provide a uniform way to refer to the global object, regardless of the environment.

In the browser window

In web browsers, the global object is window. It is a special object that:

  • Represents the browser window or tab where the script is executed.
  • Contains methods, properties, and objects related to the browser and the document (for example, alert, document, etc.).

Let’s see an example:

console.log(window); // Displays the complete window object
console.log(window.alert); // alert function
console.log(window.document); // The DOM of the current document

We can also add our own variables to the window object, which will make them accessible anywhere in the program.

window.myGlobalVariable = "Hello, world"; // Not recommended!
console.log(window.myGlobalVariable); // "Hello, world"

In general, it is almost always a bad practice to do this.

In environments like Node.js global

In runtimes like Node.js, we access the global object using the reserved word global.

console.log(global); // Displays the global object in Node.js

We can define global properties on this object, but again, it is not a recommended practice.

global.myProperty = "Global value";
console.log(global.myProperty); // "Global value"

The standard solution globalThis

In modern environments, ECMAScript introduces globalThis as a unified way to access the global object.

This is regardless of whether we are in a browser, Node.js, or any other environment. That is,

  • In browsers, globalThis is equivalent to window.
  • In Node.js, globalThis is equivalent to global.
globalThis.myGlobal = "Available in all environments";
console.log(globalThis.myGlobal); // "Available in all environments"

This allows us to write portable code (that works in both browsers and servers) without worrying about the context.

Compatibility of globalThis

Although globalThis is a modern standard, it is not available in older environments. In these cases, we can use a polyfill to emulate its behavior:

const getGlobal = () => {
    if (typeof globalThis !== "undefined") return globalThis;
    if (typeof window !== "undefined") return window;
    if (typeof global !== "undefined") return global;
    throw new Error("Could not determine the global object");
};

const globalObj = getGlobal();
console.log(globalObj);

While it may be tempting to use the global object to store data, it is not a safe or advisable practice (in fact, it is quite messy)

However, sometimes it is useful, or we may have no other choice. Always trying to avoid it, sometimes it can get you out of a bind.

On this page