global vs globalThis and its gotchas : Every Developer Should Know

The Context

If you are a JS developer you must be knowing what scope means in JavaScript . Basically scope means a logical place in memory where any variable , functions or objects stored . There is global & local scope . Global scope is the outer or the main scope whenever you run your code .

Now global and globalThis is actually reserved keyword in JS which is used to point to that global scope . But they has some tiny difference .

The History

To Know about the difference we have to go back in history ......

In early days when JavaScript was invented , It used to run only in browser . We didn't have any other option to run the JS other than the browser . So , for specific to browser we have Window object to point to that global scope

Now when NodeJS introduced , basically now we have an option to run JS outside of a browser which is Node environment . In NodeJS there is no concept of window object , the developer of NodeJS introduced their own global object to point to that global scope , Which is global keyword .

Now you understand that we have different name to point to the global scope based on where JS is actually running .

• When JS running in Web --> window

• When JS running in NodeJS --> global

• When JS running in workers --> self

The problem

Now you see how complex is this for developers to write code ?

JS devs has to write custom code every time they want to use any property or methods of global object . They actually need to first identify where this JS will be running based on that they had to use the object name either ( window / global / self )

Below is code snippet developers had to write old days to point the right context based on where the JavaScript is running

var globalObject;

if (typeof window !== "undefined") {
  globalObject = window;
} else if (typeof global !== "undefined") {
  globalObject = global;
} else if (typeof self !== "undefined") {
  globalObject = self;
}

The Solution globalThis

To solve this problem, ES6 introduced a universal travel adapter for JavaScript to use one keyword for any environments : globalThis

Now this globalThis keyword is like a alias of all those different global object ( window , global , self )
It's been built in a way that it knows where its running , basically it knows

When globalThis runs in browser it calls window object under the hood
When globalThis runs in NodeJS it calls global object under the hood

console.log(globalThis) // points to global under the hood 

Difference between global and globalThis object

Feature	global	globalThis
Environment	Node.js only	Universal
Standardized	Node Specific	ECMAScript standard
Browser Support	No	Yes
Usage	Limited	Full access

Some Interview Topics

1. Is globalThis the same as window?

   In browsers: globalThis === window // true
   But in Node.js: globalThis === global // true

2. Why var Shows Up on globalThis but let and const Doesn’t ?

   var variables are stored in the Object Environment Record of the global execution context, which is linked to the global object (window/global).

   let and const are stored in the Declarative Environment Record (Global Lexical Environment), so they do not become properties of the global object.

Until next blog , keep hustling to be busy 💪💪

“Learning JS is a lot of fun . I’m on the same path as you. If you want to learn together —

Continue this journey with me @coder_deb🚀”