Page 4 - JavaScript

Users routinely open web apps in several browser tabs at once. The Broadcast Channel API elegantly solves the resulting synchronization problem: logout, theme switching, session updates and state changes are sent instantly to every open tab, entirely without a server, without WebSocket, without polling.

JavaScript Proxy lets you place a stand-in in front of an object that intercepts every read, write, delete and function call. Reflect is the symmetric counterpart: it exposes the language's default behaviors as first-class functions. Together they form the foundation for reactive data systems, validation layers, logging proxies and virtual objects in modern JavaScript.

DOM based cross site scripting rarely comes from missing server side filtering, it usually comes from unsafe assignments to innerHTML, document.write or eval right in the middle of frontend code. The Trusted Types API closes this gap structurally, letting the browser accept dangerous assignments to DOM sinks only after the value has passed through a defined policy that converts it into a special type.

Advanced queries in IndexedDB go far beyond getAll(): cursor iteration with IDBKeyRange, compound keys across multiple fields, and multi-entry indexes for array values allow precise, memory efficient queries directly on the browser's storage engine. Anyone who masters these tools no longer needs to filter data client side, letting IndexedDB handle preselection instead.

Using fetch or XHR on page unload is a race condition against the browser. When a tab is closed or the page is unloaded, the browser aborts any open requests. navigator.sendBeacon guarantees delivery of data without delaying navigation, which makes it the right solution for analytics, session data and exit tracking.

Dynamic import via import() is more than a convenient alternative to static imports: the function returns a promise, loads code only at runtime, and enables patterns such as route based code splitting, conditional loading through feature detection, and robust retry strategies when a chunk gets lost over the network.

State machines model allowed states and transitions explicitly, instead of leaving them to be inferred implicitly from scattered boolean flags. XState brings this concept to JavaScript as a framework-independent library, with states, events, guards and hierarchical statecharts that work equally well in React, Vue or plain JavaScript.

A tab in the background keeps running unchanged in most applications, polling intervals fire, animations run, videos play unheard. The Page Visibility API provides a reliable signal through document.hidden and the visibilitychange event, letting you throttle exactly this background work and noticeably save CPU, battery and network, without the user ever noticing.

Memory leaks in JavaScript rarely happen by accident, they happen because of strong references that keep objects pinned to the heap even though the code no longer needs them. WeakRef and FinalizationRegistry are the official JavaScript APIs for cooperating with the garbage collector and releasing resources cleanly, without undermining the foundation of automatic memory management.

Vite revolutionizes the dev server with native ESM, Webpack remains the heavyweight for complex enterprise setups, and Rollup produces the cleanest library bundles. Pick the wrong bundler and you lose development speed, build performance, or bundle quality: this comparison shows which tool is the right choice for which scenario in 2026.