Global object
Top-level browser APIs live on window.
Platform under construction
Window
window is the browser global object. It represents the tab and exposes many browser-level APIs.
console.log(window.innerWidth);
console.log(window.location.href);
window.addEventListener("resize", updateLayout);
Browser APIs & BOM
window is the browser environment around your script.
In a browser, global variables and many browser APIs live on window. The document, location, history, navigator and timers are all reachable from it.
You do not need to write window. for every global API, but knowing it exists helps you understand where browser features come from.
Be careful with global state. Adding your own values to window can create naming conflicts and hidden dependencies.
Viewport data
innerWidth and innerHeight describe the viewport.
Events
resize, online, offline and visibility-related behavior can be observed.
Avoid globals
Application state should not be scattered on window.
Examples
Browser APIs should be used with capability checks, permissions and fallbacks.
Keep app state out of window
const state = { activePanel: "overview" };
export function getState() {
return state;
}
Using window as a shared storage bag
window.activePanel = "overview";
window.userSettings = {};
Code patterns
Reusable examples for quick reference.
These examples focus on practical browser APIs: URL state, storage, cookies, clipboard, permissions, observers and offline-capable platform tools.
Read viewport size
Useful for diagnostics, not a CSS replacement.
const width = window.innerWidth; const height = window.innerHeight;
Resize listener
React to viewport changes carefully.
window.addEventListener("resize", () => {
console.log(window.innerWidth);
});
Timers on window
Timers are window APIs in browsers.
const id = window.setTimeout(update, 500); window.clearTimeout(id);
Avoid custom globals
Prefer modules over window state.
// Avoid: window.appState = {}
const appState = new Map();
Rules that matter
Treat the browser as a platform.
Browser APIs are powerful because they touch privacy, navigation, storage, permissions and performance. Use them deliberately.
Know window as the global browser object
It explains where many APIs live.
Avoid adding app state to window
Global state creates conflicts.
Throttle heavy resize work
Resize can fire many times quickly.
Use CSS for layout first
JavaScript viewport checks should not replace responsive CSS.
Clean temporary listeners
Window listeners can live for the page lifetime.
Check browser support for APIs
Not every window API exists everywhere.
Production thinking
A strong browser API layer makes features feel integrated with the platform instead of bolted onto the page.
Why does this matter?
Understanding window makes browser JavaScript less mysterious and helps avoid global-state mistakes.
Accessibility
Window-level events should not disrupt focus or keyboard interaction unexpectedly.
Production note
Production code should treat window as an environment boundary, not an application data store.
SEO note
Client code that depends on window cannot run in every rendering environment, so critical content needs care.
Live code lab
Change the HTML, CSS or JavaScript and run the result.
The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.
Mini assignment
Try this now.
- Add devicePixelRatio to the output.
- Listen to resize and update the output.
- Explain why CSS media queries still matter.
Practice assignment
Do this before moving to the next topic.
- Read one window property.
- Register one window event listener.
- Explain why app state should stay out of window.
Try it yourself
Inspect the window viewport
Self-check
Before you continue, prove that you understand Window.
If you can explain support, permissions, fallback and cleanup, you are ready to use the API responsibly.
- Can you explain window?
- Can you explain viewport properties?
- Can you explain window events?
- Can you explain global-state risk?
- Can you explain why browser code may fail outside browsers?
Senior audit upgrade
Extra production context for Window.
Privacy and fallback checklist
- Ask for permission only when the user understands why.
- Handle denied, unsupported and unavailable states.
- Avoid storing sensitive data in browser storage by default.
- Do not make critical content depend on a permission prompt.