Lesson guide

Learning objectives

  • Explain the main purpose of Global object in JavaScript.
  • Identify the syntax, APIs, or concepts introduced in this lesson.
  • Use the examples to predict how JavaScript will behave before you run similar code.
  • Connect this topic to nearby lessons in Advanced working with functions.

Real-world context

This lesson matters when you need to recognize where Global object fits into real JavaScript programs. The global object provides variables and functions that are available anywhere.

Key ideas

  • Global object is part of the Advanced working with functions chapter, so it builds on the surrounding concepts rather than standing alone.
  • Read each code example in two passes: first for the result, then for the rule that explains the result.
  • When a section compares similar features, focus on the condition that makes you choose one feature over another.

Key terms

  • Global object
  • Global
  • object
  • Advanced working with functions
  • JavaScript

The global object provides variables and functions that are available anywhere. By default, those that are built into the language or the environment.

In a browser it is named window, for Node.js it is global, for other environments it may have another name.

Recently, globalThis was added to the language, as a standardized name for a global object, that should be supported across all environments. It’s supported in all major browsers.

We’ll use window here, assuming that our environment is a browser. If your script may run in other environments, it’s better to use globalThis instead.

All properties of the global object can be accessed directly:

javascript
alert("Hello");
// is the same as
window.alert("Hello");

In a browser, global functions and variables declared with var (not let/const!) become the property of the global object:

javascript
var gVar = 5;

alert(window.gVar); // 5 (became a property of the global object)

Function declarations have the same effect (statements with function keyword in the main code flow, not function expressions).

Please don’t rely on that! This behavior exists for compatibility reasons. Modern scripts use JavaScript modules where such a thing doesn’t happen.

If we used let instead, such thing wouldn’t happen:

javascript
let gLet = 5;

alert(window.gLet); // undefined (doesn't become a property of the global object)

If a value is so important that you’d like to make it available globally, write it directly as a property:

javascript
// make current user information global, to let all scripts access it
window.currentUser = {
  name: "John"
};

// somewhere else in code
alert(currentUser.name);  // John

// or, if we have a local variable with the name "currentUser"
// get it from window explicitly (safe!)
alert(window.currentUser.name); // John

That said, using global variables is generally discouraged. There should be as few global variables as possible. The code design where a function gets “input” variables and produces certain “outcome” is clearer, less prone to errors and easier to test than if it uses outer or global variables.

Using for polyfills

We use the global object to test for support of modern language features.

For instance, test if a built-in Promise object exists (it doesn’t in really old browsers):

javascript
if (!window.Promise) {
  alert("Your browser is really old!");
}

If there’s none (say, we’re in an old browser), we can create “polyfills”: add functions that are not supported by the environment, but exist in the modern standard.

javascript
if (!window.Promise) {
  window.Promise = ... // custom implementation of the modern language feature
}

Common mistakes

  • Skipping the small examples and then missing the exact rule that Global object depends on.
  • Copying code without changing one value at a time to see which part controls the result.
  • Treating similar-looking syntax or APIs as interchangeable before checking their edge cases.

Summary

  • The global object holds variables that should be available everywhere.

That includes JavaScript built-ins, such as Array and environment-specific values, such as window.innerHeight – the window height in the browser.

  • The global object has a universal name globalThis.

…But more often is referred by “old-school” environment-specific names, such as window (browser) and global (Node.js).

  • We should store values in the global object only if they’re truly global for our project. And keep their number at minimum.

  • In-browser, unless we’re using modules, global functions and variables declared with var become a property of the global object.

  • To make our code future-proof and easier to understand, we should access properties of the global object directly, as window.x.

Predict

Before running this global-object check, predict the four output lines. It uses globalThis, the cross-environment name for the global object.

javascript
Reveal explanation

The output is available, true, 5, and false. Assigning globalThis.learnJsToken creates an explicit global property, so it can be read back through globalThis. Built-ins such as Array and Math are also properties of the global object. Calling globalThis.Math.max(3, 5, 1) is the same built-in Math.max call, just accessed through the global object. After delete, the custom property is gone.

Try it

Replace delete globalThis.learnJsToken with globalThis.learnJsToken = undefined, then predict the last line and explain the difference between a missing property and a property whose value is undefined.

Practice

  • Rewrite one example from this lesson without looking at the original, then run it and compare the result.
  • Change one input, operator, method call, or option in a code sample and predict what will happen before running it.
  • Explain Global object in your own words as if you were reviewing it with another learner.

Keep learning

Continue with Function object, NFE when you are ready for the next lesson.