JavaScript entwickelt sich seit ES2015 in einem jährlichen Rhythmus weiter. Jedes Jahr bringt das TC39-Komitee neue Sprachfeatures, von denen viele still und leise in den Alltag einsickern. Wer noch mit Mustern aus der ES5-Ära arbeitet, schreibt heute unnötig umständlichen Code. In diesem Überblick stelle ich dir die wichtigsten modernen Features vor, die deinen Code sauberer, kürzer und robuster machen – mit konkreten Beispielen aus der Praxis.
Optional Chaining: Schluss mit verschachtelten Prüfungen
Ein Klassiker: Du greifst auf eine tief verschachtelte Eigenschaft zu, etwa user.address.city. Existiert address nicht, wirft das einen Fehler. Früher schrieb man defensive Prüfungen wie user && user.address && user.address.city – mühsam und fehleranfällig.
Der Optional-Chaining-Operator (?.) löst das elegant: user?.address?.city gibt schlicht undefined zurück, sobald ein Glied der Kette fehlt, statt zu crashen. Er funktioniert auch bei Methodenaufrufen (obj.method?.()) und bei Array-Zugriffen (arr?.[0]). Ein einzelnes Zeichen ersetzt ganze Zeilen Boilerplate.
Nullish Coalescing: Defaults richtig setzen
Eng verwandt ist der Nullish-Coalescing-Operator (??). Bisher nutzte man ||, um Standardwerte zu setzen: const port = config.port || 3000. Das Problem: || springt bei jedem „falsy"-Wert an – auch bei 0, leeren Strings oder false. Eine legitime 0 würde fälschlich durch den Default ersetzt.
?? reagiert dagegen nur auf null und undefined. config.port ?? 3000 akzeptiert die 0 korrekt und setzt den Default wirklich nur, wenn kein Wert da ist. Für Konfigurationen, numerische Werte und Formulareingaben ist das fast immer die korrektere Wahl.
Top-Level await: Asynchronität ohne Wrapper
In ES-Modulen darfst du seit ES2022 await auf oberster Ebene verwenden, ohne es in eine async-Funktion zu wickeln. Das vereinfacht den Einstieg in ein Modul erheblich – etwa wenn du beim Laden zuerst Konfigurationsdaten oder ein Modul dynamisch holen musst:
- Dynamische Importe je nach Bedingung:
const modul = await import('./schwer.js'). - Initialdaten laden, bevor der Rest des Moduls ausgeführt wird.
- Datenbankverbindungen oder Caches asynchron vorbereiten.
Wichtig: Top-Level await blockiert die Auswertung abhängiger Module, bis das Promise erfüllt ist. Setze es also bewusst und nicht für unkritische Ladevorgänge ein.
Neue Array-Methoden für unveränderliche Daten
Mit ES2023 kamen Methoden, die Arrays kopieren statt zu verändern – ein Segen für die funktionale Programmierung und für Frameworks, die auf Unveränderlichkeit setzen:
- toSorted(): Sortiert wie
sort(), gibt aber ein neues Array zurück und lässt das Original unangetastet. - toReversed(): Die unveränderliche Variante von
reverse(). - with(index, wert): Liefert eine Kopie, in der nur ein Element ersetzt ist – ideal für State-Updates.
- findLast() und findLastIndex(): Suchen vom Ende des Arrays her, was viele Workarounds überflüssig macht.
- at(): Erlaubt negative Indizes;
arr.at(-1)gibt elegant das letzte Element zurück.
Gerade in React und ähnlichen Bibliotheken, in denen man Zustand niemals direkt mutieren soll, sparen diese Methoden umständliche Spread-Konstrukte. Wie React Zustand verwaltet, vertiefen wir im Beitrag zu React für Einsteiger.
Object.groupBy: Daten elegant gruppieren
Ein Feature aus ES2024, auf das viele lange gewartet haben: Object.groupBy() gruppiert die Elemente eines Arrays anhand einer Funktion. Statt manuell ein Objekt aufzubauen und mit reduce zu befüllen, schreibst du Object.groupBy(produkte, p => p.kategorie) und erhältst ein Objekt, dessen Schlüssel die Kategorien sind. Für Berichte, Dashboards und Listenansichten spart das spürbar Code und macht die Absicht sofort lesbar.
structuredClone: Tiefe Kopien ohne Tricks
Tiefes Kopieren von Objekten war in JavaScript erstaunlich umständlich. Der berüchtigte JSON.parse(JSON.stringify(obj))-Trick scheitert an Datumsobjekten, Map, Set und zirkulären Referenzen. Die globale Funktion structuredClone() erstellt eine echte tiefe Kopie und beherrscht all diese Fälle. const kopie = structuredClone(original) – mehr braucht es nicht. Das Feature ist in allen modernen Browsern und in Node.js verfügbar.
Logische Zuweisungsoperatoren
Eine kleine, aber feine Gruppe: &&=, ||= und ??= kombinieren eine logische Operation mit einer Zuweisung. einstellungen.theme ??= 'hell' setzt das Theme nur, wenn es noch null oder undefined ist. Das ist kompakt, lesbar und vermeidet die Wiederholung des Variablennamens auf beiden Seiten.
Promise.allSettled und Promise.any
Beim Umgang mit mehreren parallelen Versprechen gibt es mehr als nur Promise.all:
- Promise.allSettled(): Wartet auf alle Promises, unabhängig davon, ob sie erfüllt oder abgelehnt werden. Du bekommst für jedes ein Status-Objekt zurück – perfekt, wenn ein einzelner Fehler nicht alles zum Scheitern bringen soll.
- Promise.any(): Erfüllt sich, sobald das erste Promise erfolgreich ist, und ignoriert die Fehlschläge. Nützlich, wenn du mehrere Datenquellen anfragst und nur die schnellste brauchst.
Ein Blick voraus: Temporal
Das wohl meisterwartete Feature ist Temporal – eine vollständig neue API für Datum und Uhrzeit, die das fehlerträchtige Date-Objekt ablöst. Temporal trennt sauber zwischen Zeitpunkten, Zeitzonen, Kalenderdaten und Dauern und vermeidet die berüchtigten Fallstricke (Monate ab null, mutierbare Datumsobjekte). Die API befindet sich in der Ausrollphase und erscheint nach und nach in den Browsern; bis dahin hilft ein Polyfill. Wer heute viel mit Zeitberechnungen arbeitet, sollte Temporal im Blick behalten.
So nutzt du moderne Features sicher
Nicht jedes Feature ist überall verfügbar. Drei Empfehlungen für die Praxis:
- Prüfe den Browser-Support, bevor du ein Feature ohne Build-Schritt einsetzt – siehe unseren Beitrag zu caniuse.
- In Projekten mit Build-Tools transpilieren Werkzeuge wie Babel oder ein moderner Bundler ältere Syntax automatisch. Wie das mit einem schnellen Bundler aussieht, zeigen wir im Artikel zu Vite.
- Setze auf TypeScript, wenn du Typsicherheit obendrauf willst – es versteht all diese modernen Features nativ.
Modernes JavaScript ist heute eine angenehme, ausdrucksstarke Sprache. Wenn du Optional Chaining, Nullish Coalescing und die neuen Array-Methoden konsequent nutzt, wird dein Code nicht nur kürzer, sondern auch deutlich weniger fehleranfällig. Es lohnt sich, einmal im Jahr die neuen ECMAScript-Features zu überfliegen – die kleinen Verbesserungen summieren sich.