Suggest an edit

Improve this article

Refine the answer for “The window object”. Your changes go to moderation before they’re published.

Approval required

Content

What you’re changing

Title (EN)

Short answer (EN)

Shown above the full answer for quick recall.

Answer (EN)

**`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:

### 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`.

Markdown · drag & drop images · ⌘B / ⌘I shortcuts680 words

For the reviewer

Note to the moderator (optional)

Visible only to the moderator. Helps review go faster.