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

A little detail goes a long way ― Call me "Sherlock"

Window: The Godfather of objects

In the JavaScript landscape, window is the global object that offers properties and methods to interact with the browser. It's the Godfather giving you:

• Navigator power: Direct access to localStorage and sessionStorage.
• Temporal powers: Set up timers and intervals with setTimeout() and setInterval().
• Viewport dimensions: Get the dimensions of the viewport with innerWidth and innerHeight.

Oh, and did I mention how "considerate" IFRAMEs are? They create their own window and document objects. Just be ready for an onslaught of windowception.

Document: The puppeteer of the web

"Who's pulling the strings here?!" - it's document. As the main object of the Document Object Model (DOM), it's your perfect partner for:

• DOM manipulation: Control HTML elements using methods like getElementById().
• Archival work: Fetch properties like title and URL reflecting the present HTML document.

Screen: The mirror to the world

You want to know about your user's display? Then meet `screen! It's got all the goods:

• Physical properties: Get the width, height, color depth, and more.
• UI boundaries: Use availWidth and availHeight to know the drawable area, excluding interface elements like taskbars.

This is a screen, not a crystal ball, but pretty close!

Quick reference: When to use what?

Each object can be your secret weapon depending on your needs:

• Need a global stage for your variables and functions? Call window!

let myTimer = window.setTimeout(() => {
  console.log('Aloha, world! Lost in time, are we?'); // Who needs hellos when you have Aloha!
}, 2000);


• Creating an app sensitive to the user's screen size? Send screen on a recon mission!

if(screen.width > 1080) {
  loadHighResImages(); // Because 1080 pixels is so yesterday!
}


• Want to manipulate page elements? Let document be your wand!

document.getElementById('welcome').innerText = 'Hello, Space Cowboy!'; // Just a regular greeting in JavaScript Ville


Tip: It's an Event-ful world

Talking about events? window and document are VIP guests at this party. Typically, window deals with UI events (resize, load, etc) and document with DOM events (DOMContentLoaded, etc).

window.addEventListener('resize', resizeHandler);
document.addEventListener('DOMContentLoaded', domReadyHandler);


Marching towards mastery: Pro tips!

Viewport vs. Screen

This distinction helps tailor your webpage's look to the user's settings.

• window.innerWidth/innerHeight: Represents viewport size.
• screen.availWidth/availHeight: Refers to physical screen size.

IFRAMEs on a roll

Working with IFRAMEs? Tread carefully. Each IFRAME has its own window and document objects.

let iframe = document.getElementById('myframe');
let iframeDocument = iframe.contentWindow.document; // Welcome to Inception!


Becoming Sherlock Holmes

console.dir() is your magnifying glass. Use it to delve into any object's internals.

console.dir(window); // Just doing some window shopping! ;)
