Seite 10 - JavaScript

Ein Async Generator liefert Werte einzeln und bei Bedarf, statt eine komplette Ergebnisliste im Speicher zu halten. Für paginierte APIs, große Exporte und Live-Datenströme ersetzt async function* zusammen mit for await...of fehleranfällige Schleifen-Konstrukte durch lesbaren, komponierbaren Code.

Cross-Site Scripting und Prototype Pollution gehören zu den häufigsten und gefährlichsten JavaScript-Sicherheitslücken. XSS entsteht oft durch eine einzige unsichere innerHTML-Zuweisung. Prototype Pollution korrumpiert Object.prototype und macht jede Instanz im gesamten Programm angreifbar. Dieser Artikel erklärt beide Angriffsvektoren und zeigt konkrete Abwehrmaßnahmen.

Server Side Rendering liefert schnell sichtbaren Inhalt, aber Hydration macht diesen Inhalt oft erst mit Verzögerung interaktiv. Lazy Hydration verschiebt genau diese Verzögerung dorthin, wo sie niemand bemerkt: auf Komponenten, die noch gar nicht sichtbar sind oder gerade nicht gebraucht werden.

Scroll-Event-Listener für Sichtbarkeitsprüfungen sind veraltet und teuer. Der Intersection Observer liefert viewport-Benachrichtigungen ohne Hauptthread-Blockierung, ohne Layout-Thrashing und mit konfigurierbaren Thresholds – die moderne Lösung für Lazy Loading, Scroll-Animationen und Infinite Scroll.

Web Components sind eine Gruppe nativer Browser-APIs, mit denen sich gekapselte UI-Bausteine bauen lassen, die ohne Framework-Runtime funktionieren. Custom Elements, Shadow DOM und HTML Templates ermöglichen Komponenten, die in React, Vue, Angular und in reinem HTML gleichermaßen einsetzbar sind, ideal für Design-Systeme über Team- und Stack-Grenzen hinweg.

Ein gewöhnliches Map-Objekt als Zuordnung von Objekten zu privatem Zustand verhindert, dass diese Objekte jemals vom Garbage Collector eingesammelt werden, solange die Map existiert. WeakMap und WeakSet lösen genau dieses Problem, indem sie ihre Schlüssel nur schwach referenzieren und damit private Zustände ermöglichen, die automatisch mit dem zugehörigen Objekt verschwinden.

Ungenutzter Code landet erstaunlich häufig trotzdem im Produktions-Bundle, weil CommonJS-Imports, Barrel-Files oder eine falsch gesetzte sideEffects-Flag den Bundler daran hindern, ihn zu entfernen. Dieser Artikel zeigt mechanisch, wie Tree Shaking funktioniert, welche Muster es blockieren, und wie Bundle-Analyzer-Tools die Ursachen mit konkreten Kilobyte-Zahlen sichtbar machen.

Ein Berechtigungsdialog, der ohne Kontext auftaucht, wird von Nutzern häufig reflexartig abgelehnt. Die Permissions API erlaubt es, den aktuellen Status von Kamera, Standort, Benachrichtigungen und mehr vorab abzufragen und die eigene Oberfläche entsprechend anzupassen, bevor überhaupt ein Dialog ausgelöst wird.

Monorepo JS Tooling loest ein Problem, das mit wachsender Anzahl an Paketen in einem Projekt unausweichlich wird: geteilte Abhaengigkeiten, wiederholte Build-Schritte und Versionierung ueber mehrere Packages hinweg. Workspaces in npm, pnpm und yarn legen das Fundament, waehrend Turborepo und Nx als Task-Runner darauf aufbauen und mit Caching die Build-Zeit drastisch senken.

AbortSignal.timeout() ersetzt die manuelle setTimeout-plus-AbortController-Kombination durch einen Einzeiler, und AbortSignal.any() führt mehrere Abbruchquellen zu einem einzigen Signal zusammen. Zusammen lösen beide Methoden eines der hartnäckigsten Boilerplate-Probleme in modernen Fetch-basierten Anwendungen.