Seite 9 - JavaScript

Wer in Unit-Tests einfach globalThis.fetch überschreibt, baut fragile Mocks, die bei jeder Code-Änderung neu angepasst werden müssen. Mock Service Worker fängt Netzwerk-Requests stattdessen auf HTTP-Ebene ab, testet den echten Fetch-Aufruf und lässt sich für Erfolgs- wie Fehlerfälle präzise konfigurieren, ohne den Anwendungscode selbst zu verändern.

Die Network Information API liefert mit navigator.connection Informationen über Verbindungstyp, geschätzte Bandbreite und aktivierten Datensparmodus, damit Anwendungen Bildqualität, Prefetching und Video-Auflösung dynamisch anpassen können. Die einst parallel existierende Battery Status API wurde dagegen aus Datenschutzgründen aus den meisten Browsern entfernt, dieser Artikel ordnet beide APIs realistisch ein und zeigt praxistaugliche Alternativen.

Nullish Coalescing (??) und Optional Chaining (?.) sind die wichtigsten Ergänzungen zu JavaScript seit ES2020. Sie ersetzen fragile &&-Ketten und ||-Fallbacks durch präzise, lesbare Operatoren – mit dem entscheidenden Unterschied, dass sie nur auf null und undefined reagieren, nicht auf alle falschen Werte.

Top-Level Await war einer der meistgewünschten Features in JavaScript-Modulen: Direkt im Modul-Scope auf asynchrone Initialisierung warten, ohne das gesamte Modul in eine async-Funktion zu hüllen. Die Auswirkungen auf den Modul-Graphen und mögliche Deadlocks verstehen die wenigsten — dieser Guide erklärt beides.

JavaScript Proxy erlaubt es, einen Stellvertreter vor ein Objekt zu schalten, der jeden Lese-, Schreib-, Lösch- und Funktionsaufruf abfängt. Reflect ist das symmetrische Gegenstück: Es ruft die Standardverhalten der Sprache als erstklassige Funktionen auf. Zusammen bilden sie die Grundlage für reaktive Datensysteme, Validierungsschichten, Logging-Proxies und virtuelle Objekte in modernem JavaScript.

Jahrelang mussten Mengenoperationen in JavaScript mühsam mit filter() und has() zusammengebaut werden. Die neuen JavaScript Set Methods lösen dieses Problem mit einer sauberen, lesbaren API – direkt auf dem Set-Objekt, ohne externe Bibliotheken und ohne Workarounds.

Tree Shaking ist der Prozess, mit dem moderne Bundler ungenutzten JavaScript-Code aus dem finalen Bundle entfernen. Was simpel klingt, hat komplexe Voraussetzungen: ES-Module sind Pflicht, bestimmte Code-Muster blockieren Tree Shaking, und falsch konfigurierte sideEffects-Flags können gesamte Module eliminieren oder bewahren — mit messbaren Auswirkungen auf Ladezeiten.

Memory Leaks in JavaScript-Anwendungen sind unsichtbar – bis der Browser abstürzt oder die Seite nach Minuten spürbar langsamer wird. Heap Snapshots, Allocation Timelines und das Retainer-Diagramm in Chrome DevTools machen unsichtbare Speicherlecks sichtbar, lokalisierbar und behebbar.

Wer für jedes Listenelement einen eigenen Event-Listener registriert, baut eine Speicher- und Performance-Falle. Event Delegation nutzt Event Bubbling und ermöglicht mit einem einzigen Listener die Behandlung von Events auf beliebig vielen Elementen – auch auf solchen, die erst später dynamisch zum DOM hinzugefügt werden.

Fetch und XHR beim Seitenende zu nutzen ist eine Race-Condition gegen den Browser. Wenn der Tab geschlossen oder die Seite entladen wird, bricht der Browser offene Anfragen ab. navigator.sendBeacon überträgt Daten garantiert, ohne die Navigation zu verzögern – das ist die richtige Lösung für Analytics, Session-Daten und Exit-Tracking.