# Understanding the Global Object and globalThis in JavaScript

When learning JavaScript, developers often use built-in objects like `Math`, `console`, `setTimeout`, or `fetch`. But have you ever wondered **where these actually come from?**

They all come from something called the **Global Object**.

In modern JavaScript, there is also a standardized way to access this object called `globalThis`.

In this article, we’ll explore:

*   What the **Global Object** is
    
*   How it works internally
    
*   The difference between **global scope and global object**
    
*   Why `globalThis` **was introduced**
    
*   Practical examples for browsers and Node.js
    

## What Is the Global Object in JavaScript?

The **Global Object** is the top-level object that exists in every JavaScript environment.

It contains all globally available values such as:

*   Built-in objects
    
*   Global functions
    
*   Environment APIs
    

Examples include:

```plaintext
Math
console
setTimeout
Array
Object
JSON
```

Example:

```javascript
console.log(Math.PI);
```

Here `Math` is actually a **property of the global object**.

## Global Objects in Different Environments

JavaScript runs in multiple environments, and each environment historically had a different global object.

| Environment | Global Object |
| --- | --- |
| Browser | `window` |
| Node.js | `global` |
| Web Workers | `self` |
| Modern Standard | `globalThis` |

**Browser Example:**

```javascript
console.log(window);
```

**Node.js Example**

```javascript
console.log(global);
```

The problem here is that **code written for one environment may break in another**.

For example:

```javascript
window.setTimeout()
```

This works in browsers but **fails in Node.js** because `window` does not exist there.

## Global Scope vs Global Object

These two concepts are often confused.

### Global Scope

Global scope is the **outermost scope** of a JavaScript program.

Example:

```javascript
var name = "Santosh";
```

Here `name` is a **global variable**.

### Global Object

The global object stores properties that are available globally.

In browsers:

```javascript
var name = "Santosh";
console.log(window.name);
```

Output:

> Santosh

Why?

Because **variables declared with** `var` **become properties of the global object**.

## `var` vs `let` and `const` in Global Scope

One important behavior is that only `var` attaches to the global object.

Example:

```javascript
var a = 10;
let b = 20;
const c = 30;

console.log(window.a); // 10
console.log(window.b); // undefined
console.log(window.c); // undefined
```

This happens because:

*   `var` creates **object bindings**
    
*   `let` and `const` create **lexical bindings**
    

This is part of the **JavaScript engine’s internal environment records**.

## Why `globalThis` Was Introduced

Before ES2020, accessing the global object was inconsistent.

Developers had to write code like this:

```javascript
var globalObject;

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

This was messy and error-prone, especially for libraries that needed to run everywhere.

To solve this problem, **ES2020 introduced** `globalThis`.

## What Is `globalThis`?

`globalThis` is a **standardized way to access the global object in any JavaScript environment**.

It works in:

*   Browsers
    
*   Node.js
    
*   Web Workers
    
*   Deno
    
*   Bun
    

Example:

```javascript
console.log(globalThis);
```

This will always return the **global object of the current environment**.

## `globalThis` in Different Environments

In browsers:

```javascript
globalThis === window
```

In Node.js:

```javascript
globalThis === global
```

This means `globalThis` simply provides a **universal reference to the global object**.

## How `globalThis` Works Internally

JavaScript engines create something called the **Global Execution Context** when your program starts.

It consists of two major parts:

### 1\. Global Object

Stores built-in objects and APIs:

> Array  
> Object  
> Promise  
> console  
> Math  
> setTimeout

### 2\. Global Environment Record

Stores:

*   variables
    
*   functions
    
*   bindings
    

Conceptually:

```plaintext
Global Execution Context
           |
   ---------------------
   |                   |
Global Object     Environment Record
(window/global)   (variables/functions)
```

Example:

```javascript
var x = 10;

function sayHi() {
  console.log("Hello");
}
```

Internally this becomes something like:

```plaintext
Global Object
    x: 10
    sayHi: function
```

## Practical Example of `globalThis`

Using `globalThis` allows code to run everywhere.

```plaintext
globalThis.appName = "My Application";

console.log(globalThis.appName);
```

In browsers:

```plaintext
window.appName
```

In Node.js:

```plaintext
global.appName
```

## Why Libraries Use `globalThis`

Many popular libraries need to run in multiple environments.

Examples include:

*   React
    
*   Lodash
    
*   RxJS
    
*   Axios
    

Instead of writing:

```javascript
window.fetch()
```

Libraries use:

```javascript
globalThis.fetch()
```

This ensures the code works **across all platforms**.

## `this` vs `globalThis`

In the browser global scope:

```javascript
console.log(this === window);
```

Output:

```plaintext
true
```

But inside **ES modules**:

```javascript
console.log(this);
```

Output:

```plaintext
undefined
```

However:

```javascript
console.log(globalThis);
```

Always returns the **global object**.

That’s why `globalThis` is safer.

## Key Takeaways

The **Global Object** is the top-level object that provides global variables and APIs in JavaScript.

Different environments historically had different global objects like `window` and `global`.

To solve this inconsistency, **ES2020 introduced** `globalThis`, a universal reference to the global object.

Key benefits of `globalThis`:

*   Works in all environments
    
*   Simplifies cross-platform code
    
*   Safer than relying on `this`
    
*   Used widely in modern libraries
    

## Final Thoughts

Understanding the **global object and** `globalThis` helps you better understand how JavaScript works under the hood.

It also explains many common behaviors such as:

*   why `var` attaches to `window`
    
*   why `this` behaves differently in modules
    
*   how libraries run across multiple environments
    

Once you understand this concept, many JavaScript internals start to make more sense.

**JavaScript becomes easier when you try things yourself.**

Thank you for reading this article.

If you found this helpful, feel free to connect with me on [**LinkedIn**](https://www.linkedin.com/in/devsantoshkumar/) and follow my journey as I continue sharing JavaScript and frontend concepts ([**more blogs**](https://devwithsantosh.hashnode.dev/)).