🛑Stop using `this` instead use `globalThis` for global variables
Tags: javascript, deno, node, beginners
Published: 2020-06-07 13:50:58

---
title: 🛑Stop using `this` instead use `globalThis` for global variables
published: true
description: 
tags: javascript, deno, node, beginners
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/uhnhynmrkox1ofw3jvpv.png
---

We all know that `this` in Javascript is a topic where people struggle with. If we now not only think about plain javascript but look in what environment we are running our Javascript code it gets even more complicated.

So you as a developer need to understand what the current global object is?

It is a different object depending on the execution environment you run your code.

What are the usual environments your Javascript code is running in? 

A Browser like Firefox, Chrome, Edge, or Opera. The global object here is the `window`. Writing `window.setTimeout()` and `setTimeout` is in a Browser the same. This does not work everywhere. You also have the `frames` object but most of the time this `frames` object is equal to the `window` object.

NodeJS does not know `window`. In node you have to use `global` to for example add a function globally. Another diffrences is that nodejs variables are scoped to the module not the the global object. Something like `var a = 10` and then checking for it beeing to equal to the global variable will return false. To make it more clear hear is an example:
```js
// Browser Enviourment
var a = 10;
a === window.a // true
// NodeJS Enviourment
var a = 10;
a === global.a // false
```
Since Deno is built in mind of web standards. It has access to the `window` object.

Then you have WebWorkers where you have `self` and you can not access `this` or `window` and so on.

I think the problem now should be pretty clear.
Writing universal Javascript is kind of hard.

We can of course polyfill it like that:

```js
var getGlobal = function () { 
  if (typeof self !== 'undefined') { return self; } 
  if (typeof window !== 'undefined') { return window; } 
  if (typeof global !== 'undefined') { return global; } 
  throw new Error('unable to locate global object'); 
}; 

var globals = getGlobal(); 
```

The problem is you have to remember to use the `globals` variable and you need to import or set it up somehow globally for you.

This is why `globalThis` was introduced into Javascript.

You can use it right now it is supported by all major Browsers besides IE11. But should we really care about a 7-year-old browser? It depends on your project needs.

So how can you use the `globalThis`. It is actually very easy:
```js
// Browser
console.log(globalThis) // returns the window object
// NodeJS
console.log(globalThis) // returns the globals object
// WebWorkers
console.log(globalThis) // returns the global web workers context
```

Easy right? so now you don't need to worry about this anymore and can code away.

One thing is still the same es before. Functions like `alert()` which are exclusive to the Browser will still not work. 


#### Resources
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/globalThis
- https://exploringjs.com/impatient-js/ch_variables-assignment.html#globalThis
- https://caniuse.com/#search=globalthis

**👋Say Hello!** [Instagram](https://www.instagram.com/lampewebdev/) | [Twitter](https://twitter.com/lampewebdev) | [LinkedIn](https://www.linkedin.com/in/michael-lazarski-25725a87) | [Medium](https://medium.com/@lampewebdevelopment) | [Twitch](https://dev.to/twitch_live_streams/lampewebdev) |