JS Window Object
In this page:
What Is the Window Object?
The window object represents the browser tab or frame itself and is the top-level object in the Browser Object Model (BOM). Every global variable and function you declare in a script becomes a property of window automatically, and the document object you use for DOM manipulation is itself window.document.
Example: What Is the Window Object?
let globalVar = "hello";
console.log(window.globalVar); // "hello" - globals become window properties
console.log(window.document === document);Window Dimensions
window.innerWidth and window.innerHeight report the viewport size in pixels, including the scrollbar but excluding browser chrome like the address bar. These are commonly read on load and on the resize event to build responsive JavaScript behavior that CSS media queries alone can't express.
Example: Window Dimensions
console.log(window.innerWidth, window.innerHeight);Opening and Closing Windows
window.open() launches a new browser tab or popup window and returns a reference you can control programmatically, while window.close() closes a window that script opened. Most modern browsers block window.open() calls that don't originate from a direct user action like a click, as a popup-abuse defense.
Example: Opening and Closing Windows
const popup = window.open("", "popup", "width=300,height=200");
popup.document.write("Hello from popup");
// popup.close();Window as the Global Scope
In a browser (non-module) script, this at the top level and the implicit global object both resolve to window, which is why old-style global variables declared with var become window properties. Understanding this connects directly to how scope and hoisting work, since the global execution context is really window's variable environment.
Example: Window as the Global Scope
var globalStyle = "old-style"; // var at top level
console.log(window.globalStyle); // "old-style" - becomes a window propertyPractical Window Usage
Real code rarely touches window directly except for a handful of common tasks: reading viewport size for responsive JS, using window.scrollTo() to jump the page, or checking window.location for the current URL. Reaching for window explicitly is usually a sign you're about to do something environment-specific rather than pure logic.
Example: Practical Window Usage
console.log(window.innerWidth); // viewport size
window.scrollTo(0, 0);
console.log(window.location.href); // current URLChapter Quiz — Complete all 6 topics to unlock
0/6 topics done
Complete these topics first: