Window and Global This

Concept

Before you write a single line of code, JavaScript has already done real work: it created a Global Execution Context (Lesson 1), and inside it, two things you didn't ask for — a global object, and a keyword called this that points straight at it. This lesson is entirely about those two things: what they're called, how they relate, and the one rule that changes in strict mode.

Key terms, explained simply

• Global object is the one object the engine creates for the whole program. Every global var and every top-level function becomes a property of it, and built-in tools such as console and setTimeout are found on it. An object is a collection of named values, and each name and value pair is a property.
• this is a keyword (a reserved word with a special meaning) that gives your code access to an object. Which object depends on how and where the code runs. At the top level it is the global object.
• Strict mode is an optional setting that makes JavaScript stricter. You turn it on by writing 'use strict'; at the top of a script or function. It turns some silent mistakes into errors and changes a few rules, such as the value of this in a plain function call.
• Environment (or runtime) is the place where JavaScript runs and the tools that place gives it. The main ones are a browser, Node.js (a program that runs JavaScript outside a browser, for example on a server) and a Web Worker (a script that runs in the background of a web page, on its own thread, separate from the page).
• Plain function call means calling a function by its name alone, like greet(), not as a method (obj.greet()) and not with call, apply or bind. Lesson 5 only needs this case.

Why This Matters

• It explains why var at the top level and a property on window are, underneath, the exact same thing — not a coincidence, a direct consequence of Lesson 3's Object Environment Record.
• It explains a very real source of production bugs: two separate <script> tags on the same page silently sharing — and overwriting — the same global variables.
• It's the correct starting anchor for the full this rule set (method calls, arrow functions, call/apply/bind) that gets its own dedicated lesson later — you need the global case solid before the rest makes sense.

The Hotel Before Any Guest Arrives — An Analogy

The Shortest JS Program

Take a completely empty .js file. Zero lines of code. JS still does real work behind the scenes: it builds a Global Execution Context, reserves its Variable Environment, creates a global object, and sets this to point at it.

// this file is completely empty
// and yet: a Global Execution Context, a global object, and `this` already exist

// this file is completely empty
// and yet: a Global Execution Context,
// a global object, and `this` already exist

One Object, Many Names

The global object is the same idea everywhere, but different JavaScript environments give it different names:

Because the names differed, JavaScript added globalThis in 2020 (ES2020). It is one name that works in any environment, whether browser, Node or other.

this === window At The Top Level

var x = 10;

console.log(x);        // 10
console.log(this.x);   // 10
console.log(window.x); // 10

All three print the same value. A var at the global level becomes a property x of window (Lesson 3's Object Environment Record), and this at the global level points to that same window object. These are three routes to the same box. This is true in a browser script. See the note below for Node.js and modules.

1var x = 10;
2 
3console.log(x);        // 10
4console.log(this.x);   // 10
5console.log(window.x); // 10

The Shared Register — Multiple Script Tags

This part is easy to miss. A <script> tag is the HTML tag that loads JavaScript into a page. If a page loads two separate <script> tags, they don't get their own private globals. They share the same window.

<script>
  var hotelName = "Grand Palace";
</script>

<script>
  console.log(hotelName); // "Grand Palace" — fully visible here too
  hotelName = "Overwritten!";
</script>

<script>
  var hotelName = "Grand Palace";
</script>

<script>
  console.log(hotelName);
  hotelName = "Overwritten!";
</script>

Strict Mode Changes The Rule — But Only Sometimes

'use strict';
console.log(this); // still window — top-level this is unaffected by strict mode

function greet() {
  console.log(this);
}
greet(); // undefined in strict mode (would be window without 'use strict')

'use strict' does not change this at the very top of a script. It is window either way. What it changes is this inside a plain function call (a call with no owner object). Normally that also defaults to window, but strict mode makes it undefined instead. This stops functions from accidentally writing onto the global object.

See It Live — Console & DevTools

1. Open the browser console

   Any page → DevTools (the debugging tools built into the browser, opened with F12) → Console tab.

2. Confirm the identity directly

   consoleCopy

   console.log(this === window); // true

3. Attach a global variable and check all three routes

   consoleCopy

   var hotelName = "Grand Palace";
   console.log(hotelName, this.hotelName, window.hotelName); // all three match

4. Check the universal name

   consoleCopy

   console.log(globalThis === window); // true, in a browser

5. Try the strict-mode function case

   Paste the 'use strict' example from above and confirm greet() logs undefined instead of window.

Common Misconceptions

Interview Questions