What is the difference between window, screen, and document in JavaScript?

Window:

Consider opening any browser like Chrome, Firefox or IE. Now the browser window will be opening. This window will be opened for all the browsers, in other words we can say as The window object is supported by all browsers. This window will consist of various properties. If you want to visualize this, follow the below steps

  1. open any browser
  2. Right click anywhere on window, click inspect.

3. You will be getting a developer window like above image. Now click on the console tab and type window on it.

4. Now you can see all the properties of window in it.

Note that the window 0 and 1 consist of all global variables. All global JavaScript objects , functions, and variables automatically become members of the window object. The JavaScript window object sits at the top of the JavaScript Object hierarchy and represents the browser window. The window object represents the current browsing context . It holds things like window.location, window.history, window.screen, window.status, or the window.document.

Screen

So now we can move on to screen, screen is nothing but a property in window which consists of physical screen dimensions. So remember this screen is just a property of window and we can access only screen property by window.screen.

Document

So now we comes to the heartbeat of the html document. Document is nothing but the actual content of the page.

Document is also a property of window which contains the content of the page.

When an HTML document is loaded into a web browser , it becomes a document object. How to check this? So when you type window.document, it will return nothing but the html code.

Important points to remember:

  1. JavaScript window object sits at the top of the JavaScript Object hierarchy and represents the browser window. It contains all global properties and will be there in all browsers
  2. Document and size are properties of window.

Document- Content of the window aka html document.

Screen- Physical screen dimensions

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Aarthi K

Aarthi K

Hi All! I am Aarthi, a Software developer by profession and a budding technical blogger. I am here to feed my tech thirst 😁.