Seite 7 - JavaScript

In JavaScript geht der ursprüngliche Fehler beim Re-Throw verloren – ein Error wird durch einen anderen ersetzt, der Kontext verschwindet. Das error.cause-Feature aus ES2022 löst genau dieses Problem: Es erlaubt strukturierte Fehlerketten, bei denen jeder Layer seinen Kontext beibehält und der Ursprungsfehler durchgereicht wird.

Arrays sind die meistgenutzte Datenstruktur in JavaScript – aber nur wenige Entwickler kennen den vollen Umfang der modernen Array-Methoden. Von flatMap über findLast bis zu den nicht-mutierenden ES2023-Methoden toSorted und toReversed: dieser Artikel zeigt, welche Methode wann richtig ist und wie man typische Performance-Fallen vermeidet.

ECMAScript entwickelt sich schneller als je zuvor. ES2024 und ES2025 bringen Features, die seit Jahren in der Community gefordert wurden: Gruppierung von Daten, bessere Promise-Kontrolle, echte Datumsverarbeitung ohne Bibliotheken und strukturiertes Pattern Matching. Dieser Artikel deckt jeden wichtigen Zusatz mit konkreten Beispielen ab.

Die Cookie Store API ersetzt das fehleranfällige Parsen von document.cookie durch eine asynchrone, promise-basierte Schnittstelle mit strukturierten Cookie-Objekten, change-Events und echtem Service-Worker-Zugriff. Wer Session-Cookies, Consent-Banner oder Auth-Tokens verwaltet, findet in der Cookie Store API eine deutlich robustere Grundlage als manuelles String-Parsing.

Benutzerdefinierte Share-Buttons mit hartkodierten Social-Media-Plattformen sind veraltet. Die Web Share API öffnet den nativen Teilen-Dialog des Betriebssystems – der Nutzer entscheidet, welche App er verwendet: WhatsApp, Telegram, Email, Notizen oder eine andere. Das Ergebnis ist eine bessere UX mit weniger Code und ohne Abhängigkeiten von Third-Party-SDKs.

Ein Tab im Hintergrund läuft in den meisten Anwendungen unverändert weiter, Polling-Intervalle feuern, Animationen laufen, Videos spielen unhörbar ab. Die Page Visibility API liefert mit document.hidden und dem visibilitychange-Event einen zuverlässigen Signalgeber, um genau solche Hintergrundarbeit zu drosseln und spürbar CPU, Akku und Netzwerk zu sparen, ohne dass der Nutzer etwas davon merkt.

Öffnet ein Nutzer dieselbe Webanwendung in mehreren Tabs, laufen viele Hintergrundaufgaben unbemerkt parallel: Token-Refresh, Cache-Aufbau, Synchronisation mit dem Server. Die Web Locks API stellt mit navigator.locks eine exklusive Sperre über Origin-Grenzen zwischen Tabs bereit, mit der solche Aufgaben koordiniert und doppelte Ausführung zuverlässig verhindert werden.

Das window-resize-Event war der erste, aber fehlerhafte Ansatz für größenabhängiges JavaScript. ResizeObserver beobachtet einzelne DOM-Elemente direkt – unabhängig davon, ob das Fenster sich ändert, ein Sidebar-Panel sich öffnet oder ein Elternelement dynamisch wächst.

obj.hasOwnProperty(key) sieht harmlos aus, bricht aber bei null-Prototyp-Objekten und bei überschriebenen Prototyp-Methoden. Object.hasOwn(obj, key) ist die statische, robuste Alternative, die genau diese Fallstricke umschifft und in modernem Code die Standardwahl für Property-Prüfungen sein sollte.

Hundert Prozent Code-Coverage bedeutet nur, dass jede Zeile einmal ausgeführt wurde, nicht dass ein Test einen echten Fehler auch bemerken würde. Mutation Testing dreht diese Frage um: Stryker verändert gezielt einzelne Codezeilen zu kleinen Bugs und prüft, ob eure Tests diese Mutanten tatsächlich erkennen und fehlschlagen, statt stillschweigend grün zu bleiben.