Seite 16 - JavaScript

document.querySelector greift global auf die gesamte Seite zu und bricht, sobald eine Komponente mehrfach vorkommt. x-ref und $refs lösen dieses Problem, indem sie DOM-Elemente komponentenscoped und ohne CSS-Selektor-Fragilität referenzieren, für Fokus-Management, Formulare und Scroll-Ziele.

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.

Ein Feldname mit fuehrendem Unterstrich wie _wert war in JavaScript nie mehr als eine Konvention: von aussen jederzeit lesbar, ueberschreibbar und in jedem Debugger sichtbar. Private Klassenfelder und -methoden mit der #-Syntax setzen echte, vom Interpreter durchgesetzte Kapselung um, mit klaren Grenzen bei Vererbung und einem eigenen, sicheren Weg fuer Brand-Checks ueber den in-Operator.

Ein falsch konfiguriertes ESLint-Setup uebersieht entweder echte Typfehler oder bremst jeden Commit mit unnoetig langsamen type-aware Regeln aus. Mit der modernen Flat Config, dem Paket typescript-eslint und einer klaren Trennung zwischen schnellem Syntax-Lint und vollstaendigem Type-Check laesst sich beides gleichzeitig erreichen: verlaessliche Fehlererkennung und ein Entwicklungsworkflow, der nicht ausbremst.

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.

Ein Kanban Board mit Spalten, verschiebbaren Karten und persistentem Zustand lässt sich vollständig mit Alpine.js und der nativen HTML5 Drag and Drop API umsetzen. Kein SortableJS, kein jQuery UI, kein zusätzliches Kilobyte JavaScript, dafür volle Kontrolle über Verhalten, Barrierefreiheit und Darstellung des Boards.