The window object

JavaScriptJunior~2 min read

window is the browser's global object that represents the tab window in which JavaScript runs. It is the root object for the whole browser environment, and it is through window that all global variables, functions and document itself are reachable.

Theory

TL;DR

window is the object of the current browser window or tab.
It contains document, that is, the page's DOM tree.
It contains window control methods: opening, closing, scrolling.
It contains the setTimeout and setInterval timers.
It contains the browser APIs: localStorage, sessionStorage, history, location, navigator, console.
Global var variables become properties of window, while let and const do not.
window is the whole environment of the tab, while document is only the page content.

Quick example

javascript

console.log(window.document);      // access to the DOM
console.log(window.location.href); // the page URL
console.log(window.innerWidth);    // browser viewport width

In the browser almost everything lives inside window.

What `window` is

window is the object that describes the current browser window. It gathers:

the web page itself (document);
window control methods (opening, closing, scrolling and so on);
timers (setTimeout, setInterval);
browser APIs (localStorage, history, location and others);
all global variables, for example those declared with var.

`window` as the global object

When you write:

javascript

alert("Hello");

it is the same as:

javascript

window.alert("Hello");

Almost every global function and property actually belongs to window. The same goes for variables declared with var:

javascript

var x = 10;
console.log(window.x); // 10

But variables declared with let and const are not added to window:

javascript

let y = 5;
console.log(window.y); // undefined

They go into a separate lexical record of the global scope, so they are reachable by name but not as a property of window.

Main properties and objects inside `window`

Property / Object	What it does
`window.document`	The HTML document (DOM tree)
`window.location`	URL information and navigation methods
`window.history`	Navigation history
`window.navigator`	Information about the browser and the system
`window.localStorage`	Persistent data storage
`window.sessionStorage`	Temporary storage for the session
`window.console`	Access to the console (`console.log`)
`window.alert()`, `confirm()`, `prompt()`	Dialog windows
`window.setTimeout()` / `setInterval()`	Timers
`window.innerWidth`, `window.innerHeight`	Viewport size
`window.scrollTo()`, `window.scrollBy()`	Page scrolling

Practical examples

Controlling navigation:

javascript

console.log(window.location.href);            // https://example.com
window.location.href = "https://example.org"; // go to another site

Timers:

javascript

window.setTimeout(() => {
  console.log("2 seconds have passed");
}, 2000);

Page scrolling:

javascript

window.scrollTo({ top: 0, behavior: "smooth" });

Storage:

javascript

window.localStorage.setItem("theme", "dark");
console.log(window.localStorage.getItem("theme")); // "dark"

Schematically the relationships look like this:

text

window
 |-- document   -> HTML document (DOM)
 |-- location   -> URL and navigation
 |-- history    -> navigation history
 |-- navigator  -> browser information
 |-- localStorage / sessionStorage -> storage
 |-- console
 |-- timers (setTimeout, setInterval)
 |-- ... and much more

The key difference from `document`

Property	`window`	`document`
What it represents	The browser tab (window)	The page content (DOM)
Global object	Yes	No
Contains	The whole environment (DOM, timers, APIs)	Only the tree of HTML elements
Example	`window.innerWidth`	`document.body`

Common mistakes

Assuming window also exists in Node.js. There is no global window there; its role is played by global or by the universal globalThis.
Expecting let and const to show up on window. They do not become its properties, unlike var.
Confusing window and document: document is just one of the properties of window, the tree of page elements.
Creating a global variable with a name already taken on window (for example name, top, length, status) and then being surprised by odd behaviour.
Reading window.innerWidth as the screen width. It is the viewport width; the screen width is screen.width.

Short Answer

Interview ready

Premium

A concise answer to help you respond confidently on this topic during an interview.