Was mit ECMAScript 2020 kommen wird
Nicht jede Funktion eines neuen ECMAScript-Standards ist für alle Projekte relevant. ECMAScript 2020 lässt jedoch eine hohe Alltagstauglichkeit erwarten.
(Bild: Black Jack/Shutterstock.com)
- Lisa Messerli
Im Sommer werden sieben Features im Rahmen von ECMAScript 2020 offiziell veröffentlicht. Außerdem gibt es eine Erweiterung der Spezifikation für die for-in-Schleife. Die neuen Funktionen sind unter anderem verkürzende Schreibweisen, ein neuer Datentyp und die Möglichkeit, die Performanz von Webseiten zu steigern. Dieser Artikel stellt die Neuerungen vor.
Optional Chaining Operator
Der neue Optional Chaining Operator führt eine verkürzte Schreibweise ein, die eine einfachere Prüfung auf undefinierte Werte ermöglicht. Besonders bei der Arbeit mit Daten aus Schnittstellen lässt sich nie davon ausgehen, dass wirklich alle Daten enthalten sind. Es passiert häufig, dass ein Datensatz nur teilweise oder gar nicht befüllt ist. Damit die Software nicht abstürzt, etwa wenn man eine Funktion auf einem undefinierten Datensatz durchführt, ist zuerst zu prüfen, ob er ordnungsgemäß befüllt wurde. Die bisher gängige Schreibweise hierfür ist der ternäre Operator:
const tomaten = rezepte.pasta
? rezepte.pasta.tomaten
: undefined;
Wenn pasta definiert ist, speichere die Anzahl der Tomaten, ansonsten liefere undefined zurück. Diese Schreibweise kann schnell viel Platz einnehmen, zum Beispiel wenn gleich mehrere Ebenen des Objekts undefiniert sind. In dem Fall muss es für jede der Schichten einen eigenen ternären Operator geben.
Eine alternative Schreibweise ist die klassische Prüfung mit einer if-Konstruktion, in der die Funktionalität nur ausgeführt wird, wenn der Wert befüllt ist. Obwohl die Schreibweise genauso zum gewünschten Ergebnis führt, nimmt sie ebenfalls viel Platz ein. Das neue Optional Chaining bietet eine als ?. definierte, verkürzte Schreibweise:
const tomaten = rezepte.pasta?.tomaten;
Der Operator prüft, ob der Wert pasta befüllt ist und speichert dann die Anzahl der Tomaten. Die neue Erweiterung lässt sich beliebig oft hintereinander aufrufen, wenn mehrere Ebenen zu prüfen sind. Die Aufrufkette bricht ab, wenn eines der Elemente nicht befüllt ist, und liefert ein undefined zurück. Es ist auch möglich, den Operator auf ein Array anzuwenden.
const einkaufsliste = ['Eier', 'Milch'];
const pasta = einkaufsliste?.[7];
In dem Fall lässt sich durch den Optional Chaining Operator auf den Index eines Arrays zugreifen, ohne dass bekannt ist, ob das Array oder der spezifische Index vorhanden ist. Für Funktionen ist das Verhalten dasselbe.
rezepte.drucken?.('Suppe');
Wenn eine Funktion potenziell nicht definiert ist, lässt sich der Aufruf durch Optional Chaining trotzdem problemlos aufrufen. Ihren Parameter kann man bereits festlegen, ist sie dann nicht definiert, liefert der gesamte Ausdruck jedoch undefined zurück.
Um Abwärtskompatibilität zu gewährleisten, gibt es eine Konstellation, bei der ?. nicht zum Optional Chaining führt. Es gibt Fälle, in denen eine Zahl wie 0.03 als .03 abgekürzt wird, also die führende Null nicht ausgeschrieben ist:
const ausnahme = rezepte.pasta?.03:0;
Wenn die Zahl ohne führende Null in einem ternären Operator steht, lässt sie sich nicht mehr von einem Optional Chaining unterscheiden. Daher ist festgelegt, dass das neue Feature nicht ausgeführt wird, wenn auf ?. ein Zahlenwert folgt.
Besonders bei einer lang verketteten Prüfung auf undefinierte Werte schreibt sich das neue Feature deutlich lesbarer und kürzer als bisherige Alternativen. Der Optional Chaining Operator wird sich sicherlich schnell als Best Practice etablieren.
Nullish Coalescing Operator
Der Nullish Coalescing Operator bietet eine zuverlässigere Möglichkeit, um im Fall eines undefinierten Werts eine Alternative abzuspeichern. Die bisher gängige Schreibweise hierfür ist die Oder-Verknüpfung.
const pasta = rezepte.pasta || {nudeln: '80g'};
Wenn also pasta undefiniert ist, wird das alternative Objekt gespeichert. Im Vergleich zu einem ternären Operator ist diese Schreibweise deutlich kürzer. Leider ist das Verhalten der Oder-Verknüpfung nicht immer wie erwartet:
const one = '' || 1;
const two = false || 2;
const three = 0 || 3;
In diesen Fällen wird der ursprüngliche Wert niemals gespeichert. Wenn der erste Wert einen Leerstring, den Zahlenwert Null oder den booleschen Wert false enthält, springt die Oder-Verknüpfung in die alternative Angabe. Der neue Nullish Coalescing Operator ist als ?? definiert. Ein unerwartetes Verhalten durch Sonderfälle gibt es nicht.
const anzahlTomaten = rezepte.pasta?.tomaten ?? '3';
Die Kombination aus dem Nullish Coalescing Operator und einen oder mehreren Optional Chainings kann lange Code-Fragmente einfach und lesbar halten. Während Google Chrome das Feature bereits unterstützt, ist es an vielen Stellen noch nicht einsetzbar. Die neue, praktische Schreibweise wird dennoch sicherlich bald im Arbeitsalltag Verwendung finden.
