JavaScript globalThis – The Complete Guide

JavaScript globalThis, introduced in ES2020, provides a universal way to access the global object across different environments (browsers, Node.js, web workers, etc.). This feature simplifies the process of writing cross-platform code by offering a consistent reference to the global object. In this comprehensive guide, we will explore everything you need to know about globalThis, including what it is, why it is useful, where and how to use it, and when it is most beneficial.

What is JavaScript globalThis?

globalThis is a standard property in JavaScript that provides a consistent way to access the global object, regardless of the environment in which the code is running. The global object differs across environments: window in browsers, global in Node.js, and self in web workers. globalThis unifies these under a single identifier.

Syntax

The syntax for using globalThis is straightforward:

globalThis

Example

globalThis.myGlobalVariable = "Hello, World!";
console.log(globalThis.myGlobalVariable); // Output: Hello, World!

In this example, we define a global variable using globalThis and then access it.

Why Use JavaScript globalThis?

globalThis offers several benefits:

1. Consistency: Provides a single way to access the global object across different environments.
2. Simplicity: Simplifies code by removing the need for environment-specific checks.
3. Readability: Makes code easier to read and understand by using a standard reference.

Consistency

Without globalThis:

let global;
if (typeof window !== 'undefined') {
  global = window;
} else if (typeof global !== 'undefined') {
  global = global;
} else if (typeof self !== 'undefined') {
  global = self;
} else {
  global = this;
}
console.log(global);

With globalThis:

console.log(globalThis);

Where to Use JavaScript globalThis?

globalThis can be used in various scenarios where you need to access or modify the global object:

1. Global Variables: Define and access global variables.
2. Environment-Agnostic Code: Write code that works in any environment.
3. Library Development: Create libraries that work across different platforms.

Global Variables

globalThis.myAppConfig = {
  apiUrl: "https://api.example.com",
  timeout: 5000
};

console.log(globalThis.myAppConfig.apiUrl); // Output: https://api.example.com

Environment-Agnostic Code Example

function logEnvironment() {
  if (globalThis.window) {
    console.log("Running in a browser environment");
  } else if (globalThis.global) {
    console.log("Running in a Node.js environment");
  } else if (globalThis.self) {
    console.log("Running in a web worker environment");
  }
}

logEnvironment();

Library Development

(function(global) {
  global.myLibrary = {
    greet: function(name) {
      return `Hello, ${name}! 🌍`;
    }
  };
})(globalThis);

console.log(globalThis.myLibrary.greet("Alice")); // Output: Hello, Alice! 🌍

How to Use JavaScript globalThis?

Basic Usage

To use globalThis, simply reference it in your code to access the global object.

globalThis.myGlobalVar = 42;
console.log(globalThis.myGlobalVar); // Output: 42

Combining with Other Global Properties

You can combine globalThis with other global properties for more complex operations.

globalThis.config = {
  appName: "MyApp",
  version: "1.0.0"
};

function displayConfig() {
  console.log(`App: ${globalThis.config.appName}, Version: ${globalThis.config.version}`);
}

displayConfig(); // Output: App: MyApp, Version: 1.0.0

Using in Different Environments

globalThis works seamlessly across different JavaScript environments.

In Browsers

<script>
  globalThis.browserVar = "I am in the browser";
  console.log(globalThis.browserVar); // Output: I am in the browser
</script>

In Node.js

globalThis.nodeVar = "I am in Node.js";
console.log(globalThis.nodeVar); // Output: I am in Node.js

In Web Workers

self.onmessage = function(event) {
  globalThis.workerVar = "I am in a web worker";
  console.log(globalThis.workerVar); // Output: I am in a web worker
};

When to Use JavaScript globalThis?

When Accessing the Global Object

Use globalThis whenever you need to access the global object in a consistent manner.

globalThis.globalVar = "Accessible everywhere";
console.log(globalThis.globalVar); // Output: Accessible everywhere

When Writing Cross-Environment Code

Use globalThis to write code that works across different environments without modification.

function setGlobalValue(key, value) {
  globalThis[key] = value;
}

setGlobalValue('universalVar', 'This works everywhere');
console.log(globalThis.universalVar); // Output: This works everywhere

When Developing Universal Libraries

Use globalThis to create libraries that can be used in any JavaScript environment.

(function(global) {
  global.myUtility = {
    multiply: function(a, b) {
      return a * b;
    }
  };
})(globalThis);

console.log(globalThis.myUtility.multiply(2, 3)); // Output: 6

Polyfill for Older Environments

If you need to support environments that do not have globalThis, you can create a polyfill.

if (typeof globalThis === 'undefined') {
  (function() {
    if (typeof window !== 'undefined') {
      window.globalThis = window;
    } else if (typeof global !== 'undefined') {
      global.globalThis = global;
    } else if (typeof self !== 'undefined') {
      self.globalThis = self;
    } else {
      this.globalThis = this;
    }
  })();
}
console.log(globalThis); // Output will vary based on the environment

Using globalThis in Module Systems

You can use globalThis in module systems to ensure global variables are accessible.

CommonJS

globalThis.myCommonJSVar = "CommonJS Global";
module.exports = globalThis.myCommonJSVar;

ES Modules

globalThis.myESModuleVar = "ES Module Global";
export default globalThis.myESModuleVar;

Testing with globalThis

Use globalThis to set up global variables for testing purposes.

globalThis.testConfig = {
  mockApi: "https://mockapi.example.com",
  timeout: 1000
};

function fetchMockData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve(`Data fetched from ${globalThis.testConfig.mockApi}`);
    }, globalThis.testConfig.timeout);
  });
}

fetchMockData().then(console.log); // Output: Data fetched from https://mockapi.example.com

Summary

JavaScript globalThis is a powerful feature that provides a consistent way to access the global object across different environments. It simplifies the process of writing cross-platform code and makes the code cleaner and easier to read. By understanding and using globalThis effectively, you can improve the robustness and maintainability of your JavaScript applications. Practice using globalThis in various scenarios to see its full potential and enhance your JavaScript programming skills.