What is the fundamental difference between window and document?

WHAT THIS TESTS:

This tests whether you view the browser environment as a layered architecture or as a single flat global namespace. At a senior level, interviewers want to hear that window represents the browser tab and the global execution context, while document is the object-oriented DOM representation of the loaded page. The distinction matters because it reveals your understanding of scope lifecycles, security boundaries, and how browser engines separate the container from the content.

A GOOD ANSWER COVERS:

First, window is the global object for the browser tab; it holds browser-level APIs like location, history, and navigator, and it serves as the global this value. Second, document is the root of the DOM tree; it is the programming interface that represents the page structure, style, and content as nodes and objects, allowing scripts to query and manipulate the page. Third, the document lives inside the window; when you navigate, the window object persists but the document object is replaced with a new one. Fourth, in multi-frame contexts, each frame has its own window and document pair, so the one-to-one relationship is per browsing context, not per browser process.

COMMON WRONG ANSWERS:

A red flag is saying they are basically the same or that document is just a property of window with no deeper meaning. Another weak answer is listing methods like alert or setTimeout on window without explaining why they live on the container rather than the document. Some candidates describe document as only the HTML source string rather than the in-memory object-oriented representation. Confusing the global scope with the DOM root signals a shallow mental model of the browser runtime.

LIKELY FOLLOW-UPS:

An interviewer might ask where global variables live, which is on window, and why polluting it affects performance. They might ask what happens to event listeners attached to document versus window during navigation. They could also ask how iframes relate to window and document, or why the DOM is not part of the core JavaScript language but rather an API provided by the browser.

ONE CONCRETE EXAMPLE:

Imagine a single-page application that uses window.addEventListener for scroll events and document.querySelectorAll for content updates. If the user navigates to a new route, the document object is rebuilt, so all document-level listeners and cached node references must be re-established, but the window object and its scroll listener remain intact. This separation is why attaching heavy state to window leaks across soft navigations while attaching it to document scopes it to the current page content.

Source: developer.mozilla.org