The Window Object

By the end of this lesson, you will be able to use the browser's window object to read viewport size, respond to resizing, and understand why it is the global object for a browser tab.

What it is

The window object represents an open browser tab or window. In browser JavaScript, it is also the global object, which means many built-in browser features are available as properties or methods on window. For example, window.innerWidth reports the width of the visible viewport, while window.location describes the current URL and window.document gives access to the loaded page.

Related terms include globalThis, which is a standard way to refer to the global object in any environment, document, which represents the HTML page inside the window, and navigator, which exposes browser information such as user agent and platform.

Why it matters

• It lets you measure the viewport with window.innerWidth and window.innerHeight.
• It lets you react to browser events such as resizing, scrolling, loading, and closing.
• It provides access to browser-level APIs like window.location, window.history, window.localStorage, and window.open().
• It helps you write code that can detect whether it is running in a browser or another JavaScript environment.

Syntax or steps

The smallest useful pattern is to read a property from window or attach an event listener to it:

window.innerWidth;
window.addEventListener("resize", () => {
  console.log(window.innerWidth);
});

Because window is the global object in a browser, you can often omit the window. prefix, such as writing innerWidth instead of window.innerWidth. However, including window. makes the source of the value clearer.

Example

Paste this into a browser console or a script running in a web page:

const viewport = {
  width: window.innerWidth,
  height: window.innerHeight
};

console.log("Initial viewport:", viewport);

window.addEventListener("resize", () => {
  console.log("New viewport:", window.innerWidth, "x", window.innerHeight);
});

Part by part:

• window.innerWidth reads the current viewport width in CSS pixels.
• window.innerHeight reads the current viewport height in CSS pixels.
• window.addEventListener("resize", ...) registers a function that runs whenever the browser window is resized.
• The callback logs the updated size, so you can see the viewport change in real time.

Common mistakes

• Assuming window exists everywhere. It does not exist in Node.js or many server-side JavaScript environments. Use typeof window !== "undefined" or globalThis when writing environment-aware code.
• Confusing window.innerWidth with document.documentElement.clientWidth. innerWidth includes the scrollbar, while clientWidth usually does not. Choose the one that matches your layout need.
• Adding resize listeners repeatedly. If you call window.addEventListener("resize", ...) inside a function that runs many times, you may create duplicate listeners. Remove the listener or add it once.
• Using window.location.href without realizing it navigates. Assigning to window.location.href changes the page. Use it only when you intend to leave the current page.

When to use it

Use window when you need browser-tab-level information or behavior. Use document when you need to inspect or change the HTML page itself.

Practice

Guided exercise: Open your browser console, run console.log(window.innerWidth), then resize the browser window and run it again. Notice that the value changes.

Challenge: Write a resize listener that logs "Mobile width" when window.innerWidth is less than 600 and "Desktop width" otherwise.

Hint: Use window.addEventListener("resize", () => { ... }) and an if statement inside the callback.

Quick check

Question: What does window.innerWidth return?

Answer: It returns the width of the browser viewport in CSS pixels, including the scrollbar if one is present.

Summary

The window object is the browser's global object for a tab, giving access to viewport size, URL, page document, and browser events. Understanding it helps you separate page-level DOM work from browser-level behavior.