• Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

I Like Kill Nerds

The blog of Australian Front End / Aurelia Javascript Developer & brewing aficionado Dwayne Charrington // Aurelia.io Core Team member.

  • Home
  • Aurelia 2
  • Aurelia 1
  • About
  • Aurelia 2 Consulting/Freelance Work

Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Javascript · February 23, 2023

I hate to be “that guy” that publishes a blog post and says, “Stop using X” and “Why you should be using X instead”, but after a recent situation in some code I wrote ages ago and updated, I felt it was worthy writing a blog post about why you should use globalThis instead. That’s not to say if you’re currently using window that you’re wrong (because globalThis aliases window in a browser context). However, by using globalThis, you can save yourself a lot of trouble, especially in unit tests.

If you’re not familiar with globalThis, it’s a new global object that was introduced in ECMAScript 2020. It provides a way to access the global object in any environment, whether a web browser, a Node.js server or a web worker. The main benefit of using globalThis instead of window or global is that it makes your code more consistent and future-proof.

Here are a few examples of how globalThis works in different contexts:

In a browser context

In a web browser context, globalThis is essentially an alias for the window object. Here’s an example:

console.log(globalThis === window); // true
console.log(globalThis.location.href); // same as window.location.href

By using globalThis instead of window in your code, you can ensure that it will work in any web browser environment.

In a Node.js context

In a Node.js context, globalThis is an alias for the global object. Here’s an example:

console.log(globalThis === global); // true
console.log(globalThis.setTimeout === global.setTimeout); // true

By using globalThis instead of global in your code, you can ensure that it will work in any Node.js environment.

In a web worker context

In a web worker context, globalThis is the global object for the worker. Here’s an example:

console.log(globalThis === self); // true
console.log(globalThis.postMessage === self.postMessage); // true

By using globalThis instead of self in your code, you can ensure that it will work in any web worker environment.

In unit tests

One of the benefits of using globalThis in your code is that it can make unit testing easier, especially if you need to mock global objects like window or global.

For example, let’s say you have a function that depends on the window object:

function showMessage(message) {
  window.alert(message);
}

To test this function, you might need to mock the window object. However, mocking the window object can be tricky, especially if you want your tests to work in different environments. If you’re using Jest, the default test environment is Node where Window doesn’t exist, but global does.

By using globalThis instead of window, you can make it easier to mock the window object in your tests:

function showMessage(message) {
    globalThis.alert(message);
}

Now, when you’re writing tests for this function, you can mock the globalThis object instead of the window object:

it('shows message', () => {
    const originalAlert = globalThis.alert;
    globalThis.alert = jest.fn();
    showMessage('Hello, world!');
    expect(globalThis.alert).toHaveBeenCalledWith('Hello, world!');
    globalThis.alert = originalAlert;
});

By using globalThis instead of window, you can write code that’s easier to test and works across different environments.

In conclusion, by using globalThis in your code, you can make it more consistent, future-proof, and easier to test. Whether you’re working in a web browser, a Node.js server, or a web worker

Dwayne

Leave a Reply Cancel reply

2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Abbas
Abbas
26 days ago

Is self the same as globalThis?

1
Dwayne
Dwayne
Author
25 days ago

@Abbas Yep. globalThis is just a contextually aware alias for self, window, etc.

0

Primary Sidebar

Popular

  • Thoughts on the Flipper Zero
  • I Joined Truth Social Using a VPN and Editing Some HTML to Bypass the Phone Verification
  • How To Install Eufy Security Cameras Without Drilling or Using Screws
  • How To Get The Hash of A File In Node.js
  • Wild Natural Deodorant Review
  • The Most Common iPhone Passcodes (and how to guess them)
  • NBN Box Installed Inside of Garage, Where Do You Put The Modem?
  • Neural DSP Reveal Details About the Long-Awaited Quad Cortex Desktop Editor
  • Improving The Coopers Australian Pale Ale Extract Tin (and other tips)
  • How to Record With the Neural DSP Quad Cortex in Reaper (DI and USB Recording)

Recent Comments

  • CJ on Microsoft Modern Wireless Headset Review
  • Dwayne on Microsoft Modern Wireless Headset Review
  • CJ on Microsoft Modern Wireless Headset Review
  • john on Microsoft Modern Wireless Headset Review
  • Dwayne on Why You Should Be Using globalThis Instead of Window In Your Javascript Code

Copyright © 2023 · Dwayne Charrington · Log in

wpDiscuz