© Alexander Raths/Shutterstock.com
Neue Features in ECMAScript 2020

Frisches Aroma für JavaScript


JavaScript wird unter dem ECMAScript-Standard stetig weiterentwickelt. Bis 2015 wurde der Standard mit Ganzzahlen versioniert, seit Version 6 ist man jedoch auf Jahreszahlen umgestiegen, sodass im Jahr 2020 die Version 2020 des Standards veröffentlicht wurde, nicht Version 11.

Der ECMAScript-Standard ist in Form einer PDF-Datei zum freien Download unter [1] verfügbar. Diese Datei weist für die Version 2020 einen Umfang von 860 Seiten auf und enthält sämtliche Sprachelemente und wie sie von den Browserherstellern umgesetzt werden. Welche Features in eine neue Version einfließen, bestimmt das Technical Committee 39 der Ecma International, kurz TC39. Die Vorschläge für die neuen Sprachfeatures werden auf GitHub unter [2] für alle öffentlich einsehbar verwaltet. Der Standardisierungsprozess besteht aus insgesamt fünf Stufen:

  • Stufe 0 (Strawperson): Ein neuer Vorschlag für ein ECMAScript-Feature beginnt in der Stufe 0. Es gibt keine Einstiegskriterien für einen neuen Vorschlag.

  • Stufe 1 (Proposal): Diese Stufe dient dazu, das Feature und eine potenzielle Problemstellung zu beschreiben. Außerdem sollen die potenziellen Probleme identifiziert werden. Damit ein Vorschlag in diese Stufe aufgenommen wird, müssen unter anderem folgende Anforderungen erfüllt werden: Es muss eine Person geben, die das Feature vorantreibt, das Problem muss beschrieben sein, es muss eine grobe API-Beschreibung geben und außerdem müssen die Kernalgorithmen beschrieben werden. Für das Feature wird entweder ein Polyfill oder eine Demo erwartet.

  • Stufe 2 (Draft): In der zweiten Stufe werden Syntax und Semantik detailliert beschrieben. Hierfür muss eine initiale textuelle Beschreibung für das Feature existieren. Es gibt experimentelle Implementierungen im Browser.

  • Stufe 3 (Candidate): In dieser Stufe wird die Spezifikation weiter verfeinert und das Feedback aus den Implementierungen und das der Benutzer aufgenommen. Damit ein Feature in diese Stufe aufgenommen wird, muss der Text der Spezifikation vollständig sein, außerdem muss er überprüft worden und von allen ECMAScript-Editoren genehmigt worden sein.

  • Stufe 4 (Finished): Diese Stufe sagt aus, dass das Feature bereit ist, in den offiziellen ECMAScript-Standard integriert zu werden. Damit ein Feature diese Stufe erreichen kann, muss es eine Reihe von Akzeptanztests bestehen. Außerdem müssen zwei konkrete Implementierungen existieren.

Im Folgenden werfen wir einen Blick auf die neuesten Features, die teilweise bereits in den verschiedenen Browsern verfügbar sind oder durch Polyfills oder Transpiler emuliert werden können. Eine populäre Anlaufstelle für einen ersten Überblick stellt die Webseite www.caniuse.com dar. Im zentralen Suchfeld können Sie sowohl HTML- als auch CSS- und JavaScript-Features eingeben und erhalten dann eine Übersicht über die Browserunterstützung des jeweiligen Features. Eine weitere Ressource sind die Compatibility Tables von Kangax auf GitHub unter [3]. Auf dieser Seite sehen Sie eine tabellarische Auflistung der verschiedenen JavaScript-Features und die jeweilige Browserunterstützung.

Ein kurzer Blick auf die Features von 2019

Die Änderungen der Version 2019 beschränken sich hauptsächlich auf Erweiterungen in den Standardobjekten des Sprachstandards. Das TC39 hat für diese Version die folgenden Methoden aufgenommen:

  • Array: Array.prototype.flat, Array.prototype.flatMap

  • Object: Object.fromEntries

  • String: String.prototype.trimStart, String.prototype.trimEnd

  • Symbol: Symbol.description

Eine der bedeutendsten Änderungen in ECMAScript 2019 verbirgt sich hinter der Bezeichnung „Optional Catch Binding“. Mit diesem Feature müssen Sie in einem try-catch-Statement nicht mehr zwingend das Fehlerobjekt beim catch angeben. Relevant ist diese Änderung vor allem dann, wenn Sie nicht direkt auf das Fehlerobjekt zugreifen müssen. Ohne dieses Feature definieren Sie eine lokale Variable im catch-Block, die im Quellcode nicht verwendet wird. Damit verstoßen Sie eigentlich gegen eine Standardregel zahlreicher Codingstandards, die besagt, dass es keine ungenutzten Variablen geben soll.

Im Gegensatz dazu können Sie von ECMAScript 2020, also der neuesten Version von JavaScript, einiges mehr erwarten.

Die neuen Features in ECMAScript 2020

Am 02.04.2020 hat das TC39 den ES2020 Candidate verabschiedet und damit das finale Featureset für die nächste ECMAScript-Version festgelegt. Dabei handelt es sich um die Features, die sich bis zu diesem Zeitpunkt auf der 4. Stufe des Standardisierungsprozesses befanden. Kurz vor der Finalisierung wurde der Funktionsumfang noch um das import.meta-Feature ergänzt. Die Features der neuen Version sind:

  • Erweiterung der String-Klasse um die Methode match-All

  • dynamische Importe mit der import-Funktion

  • Import von Metadaten über Import.meta

  • der neue Datentyp BigInt

  • Ergänzung der Promise-Klasse um die allSettled-Methode

  • Standardisierung von globalThis

  • Standardisierung der for-in Mechanics

  • Optional Chaining

  • Nullish Coalescing

Diese Features sehen wir uns im Folgenden im Detail und mit passenden Beispielen an.

String.prototype.matchAll

Die matchAll-Methode ist auf allen JavaScript-Zeichenketten definiert, akzeptiert einen regulären Ausdruck und gibt ein Iterator-Objekt mit allen Treffern in der Zeichenkette zurück. Die Unterstützung dieser Methode ist über alle modernen Browser gut. Einzig Safari unterstützt die Methode noch nicht. Das Beispiel in Listing 1 sucht alle Wörter, die ein th beinhalten.

Listing 1: Wörter mit der String.prototype.match-All-Methode finden

const string = 'This Ecma Standard defines the ECMAScript 2019 Language. It is the tenth edition of the ECMAScript Language Specification'; const pattern = /\w*th\w*/gi; const iterator = string.matchAll(pattern);

Das Ergebnis aus diesem Codeblock ist ein Iterator-Objekt, mit dem Sie über jeden Treffer iterieren können. Diese einzelnen Treffer beinhalten das gefundene Wort, den Index innerhalb der Zeichenkette sowie die gesamte ursprüngliche Zeichenkette und gegebenenfalls Gruppen innerhalb des regulären Ausdrucks.

Bei der Arbeit mit dem Iterator müssen Sie beachten, dass Sie diesen nicht wieder auf das erste Element zurücksetzen können. Das bedeutet, dass Sie den Iterator lediglich einmal verwenden können. So ist es möglich, mit Array.from oder einem Destructuring-Statement ([…iterator]) den Iterator in ein Array umzuwandeln. Alternativ können Sie auch mit einer for-of-Schleife über die einzelnen Elemente des Iterators iterieren.

import()

Eines der bedeutendsten Features, das in der Vergangenheit in den Sprachstandard aufgenommen wurde, ist das Modulsystem. Es basiert auf den Schlüsselworten import zur Einbindung von Strukturen und export für das Exportieren von Strukturen, die an anderer Stelle eingebunden werden können. Das Modulsystem arbeitet auf Dateibasis, sodass die Exporte die Schnittstelle einer Datei zur Außenwelt bilden. Bisher sah der Sprachstandard lediglich statische Importe ...

Neugierig geworden? Wir haben diese Angebote für dich:

Angebote für Teams

Für Firmen haben wir individuelle Teamlizenzen. Wir erstellen Ihnen gerne ein passendes Angebot.

Das Library-Modell:
IP-Zugang

Das Company-Modell:
Domain-Zugang