JavaScript-ES6-Funktionen

ECMAScript 6 (ES6) ist eine bedeutende Aktualisierung der JavaScript-Sprache, die viele neue Funktionen eingeführt hat und JavaScript leistungsfähiger und effizienter macht. Dieser Leitfaden bietet eine ausführliche Erkundung von ES6 mit umfassenden Erklärungen und zahlreichen Codebeispielen, die Ihnen helfen, diese neuen Möglichkeiten zu beherrschen.

Einführung in ES6

ES6, auch bekannt als ECMAScript 2015, brachte viele Verbesserungen und neue Funktionen für JavaScript mit sich. ECMAScript ist der offizielle Standard, den JavaScript umsetzt, und ES6 war seine größte Überarbeitung seit 1999. Diese Änderungen machten die Sprache moderner und einfacher zu handhaben und verbesserten sowohl die Lesbarkeit als auch die Wartbarkeit.

Dieser Leitfaden führt durch die Funktionen, die Sie am häufigsten verwenden werden:

• Variablendeklarationen — let und const
• Funktionen — Pfeilfunktionen und Standardparameter
• Strings — Template Literals
• Arbeiten mit Daten — Destrukturierung, erweiterte Objektliterale, Rest/Spread
• Asynchroner Code — Promises
• Objektorientierter Code — Klassen und Module
• Neue Sammlungen und primitive Typen — Map, Set, WeakMap, WeakSet, Symbol, Iteratoren, Generatoren und Proxys

Heutzutage unterstützt jeder moderne Browser und Node.js ES6 nativ, sodass Sie diese Funktionen ohne Build-Schritt verwenden können. Jedes Beispiel unten ist ausführbar — bearbeiten Sie es und drücken Sie „Run", um damit zu experimentieren.

Let und Const

Eine der bemerkenswertesten Änderungen in ES6 ist die Einführung von let und const für die Variablendeklaration. Vor ES6 gab es nur var, das funktionsgebunden (function-scoped) ist und auf eine Weise gehoistet wird, die häufig überraschende Fehler verursacht. let und const sind blockgebunden (block-scoped) und verhalten sich vorhersehbarer, weshalb moderner Code var kaum noch verwendet.

Let

Das Schlüsselwort let ermöglicht die Deklaration von Variablen, deren Gültigkeitsbereich auf den Block, die Anweisung oder den Ausdruck beschränkt ist, in dem sie verwendet werden.

Im obigen Beispiel ist das innerhalb des if-Blocks deklarierte x eine eigenständige Variable, getrennt von dem außerhalb deklarierten x. Dies zeigt die Blockgültigkeit (block-level scoping), die durch let bereitgestellt wird. Mit var würden sich beide Zuweisungen auf dieselbe Variable beziehen, und das äußere console.log würde 20 ausgeben.

let und const unterliegen auch der temporal dead zone (TDZ): Die Variable existiert ab dem Beginn des Blocks, kann aber erst gelesen oder zugewiesen werden, nachdem ihre Deklaration ausgeführt wurde. Ein Zugriff davor löst einen ReferenceError aus, wodurch Tippfehler abgefangen werden, die var stillschweigend in undefined umwandeln würde.

Const

Das Schlüsselwort const wird verwendet, um Variablen zu deklarieren, deren Werte sich nicht ändern sollen. Es ist wie let blockgebunden.

In diesem Beispiel führt der Versuch, y einen neuen Wert zuzuweisen, zu einem Fehler, da const eine Konstante deklariert, deren Wert nicht geändert werden kann.

Ein häufiger Verwirrungspunkt: const verhindert die Neuzuweisung der Bindung, nicht die Veränderung des Werts. Ein mit const deklariertes Objekt oder Array kann weiterhin in seinem Inhalt verändert werden — Sie können lediglich die Variable nicht auf ein anderes Objekt zeigen lassen.

Pfeilfunktionen

Pfeilfunktionen bieten eine prägnante Syntax zum Schreiben von Funktionsausdrücken. Sie binden außerdem den Wert von this lexikalisch, was sie besonders nützlich für das Schreiben kurzer Funktionen macht.

Hier nimmt die Pfeilfunktion add zwei Parameter entgegen und gibt deren Summe zurück. Wenn der Rumpf ein einzelner Ausdruck ist, können Sie die geschweiften Klammern und das Schlüsselwort return weglassen — der Wert des Ausdrucks wird automatisch zurückgegeben.

Der größere Vorteil ist, dass Pfeilfunktionen kein eigenes this haben; sie erben es vom umgebenden Gültigkeitsbereich. Vor Pfeilfunktionen verloren Callbacks häufig das erwartete this, und Entwickler behalfen sich mit const self = this oder .bind(this). Pfeilfunktionen machen diesen Boilerplate-Code überflüssig:

Template Literals

Template Literals erleichtern die Erstellung von Strings, insbesondere beim Einbetten von Variablen oder Ausdrücken. Sie verwenden Backticks (```) anstelle von Anführungszeichen.

Dieses Beispiel zeigt, wie Template Literals es ermöglichen, die Variable name direkt in den String einzubetten, was Lesbarkeit und Komfort verbessert. Der Platzhalter ${ ... } kann jeden Ausdruck enthalten, nicht nur eine Variable — zum Beispiel `Total: ${price * qty}`. Template Literals erstrecken sich außerdem ohne \n über mehrere Zeilen, sodass Sie formatierte Ausgaben oder kleine HTML-Schnipsel inline schreiben können.

Standardparameter

Standardparameter ermöglichen es, Funktionsparameter mit Standardwerten zu initialisieren, falls keine Werte übergeben werden.

In diesem Beispiel weist die Funktion multiply b einen Standardwert von 1 zu, wenn kein zweites Argument übergeben wird, wodurch sichergestellt wird, dass die Funktion immer ein gültiges Ergebnis zurückgibt.

Destrukturierende Zuweisung

Die destrukturierende Zuweisung ist eine praktische Möglichkeit, Werte aus Arrays oder Objekten in einzelne Variablen zu extrahieren.

Array-Destrukturierung

Dieses Beispiel zeigt, wie die Array-Destrukturierung es ermöglicht, die Werte des Arrays numbers einzelnen Variablen a, b und c zuzuweisen.

Objekt-Destrukturierung

In diesem Beispiel extrahiert die Objekt-Destrukturierung die Eigenschaften name und age aus dem Objekt person in separate Variablen.

Erweiterte Objektliterale

ES6 erweitert Objektliterale um eine prägnantere und lesbarere Syntax.

Hier verwendet das Objekt obj Kurzschreibweisen für Eigenschaftsnamen und Methodendefinitionen, was das Objektliteral prägnanter macht.

Promises

Promises bieten eine Möglichkeit, asynchrone Operationen effizienter zu handhaben, Callback-Hölle zu vermeiden und den Code lesbarer zu machen.

In diesem Beispiel wird ein Promise erstellt, das nach 1 Sekunde mit der Nachricht 'Success!' aufgelöst wird. Die Methode then wird verwendet, um den aufgelösten Wert zu verarbeiten.

Klassen

ES6 führte Klassen ein und bietet damit eine klarere und prägnantere Syntax zum Erstellen von Objekten und für den Umgang mit Vererbung.

Dieses Beispiel zeigt, wie Klassen in ES6 eine übersichtliche und intuitive Syntax zum Definieren von Objekten und deren Verhalten bieten.

Module

Mit Modulen können Sie Ihren Code auf separate Dateien aufteilen und Funktionen, Objekte oder primitive Werte zwischen Dateien importieren/exportieren.

Exportieren

// math.js
export const add = (a, b) => a + b;

Importieren

// main.js
import { add } from './math.js';
console.log(add(2, 3)); // 5

In diesen Beispielen wird die Funktion add aus math.js exportiert und in main.js importiert, was zeigt, wie Module die Organisation und Wiederverwendung von Code erleichtern.

Rest- und Spread-Operatoren

Rest-Operator

Der Rest-Operator (...) ermöglicht es, eine unbestimmte Anzahl von Argumenten als Array darzustellen.

In diesem Beispiel verwendet die Funktion sum den Rest-Operator, um alle Argumente in einem Array zu sammeln, was es einfach macht, Operationen damit durchzuführen.

Spread-Operator

Der Spread-Operator (...) ermöglicht es, ein iterierbares Objekt (wie ein Array) an Stellen zu expandieren, an denen null oder mehr Argumente oder Elemente erwartet werden.

Dieses Beispiel zeigt, wie der Spread-Operator verwendet werden kann, um Arrays zu einem einzigen Array zu kombinieren, was den Code vereinfacht.

Iteratoren und Generatoren

Iteratoren

Iteratoren sind Objekte, die es ermöglichen, eine Sammlung, wie ein Array oder einen String, zu durchlaufen.

In diesem Beispiel bietet der Iterator eine Möglichkeit, auf jedes Element im Array nacheinander zuzugreifen.

Generatoren

Generatoren sind Funktionen, die pausiert und fortgesetzt werden können, was eine leistungsstarke Möglichkeit bietet, mit iterierbaren Objekten umzugehen.

Dieses Beispiel zeigt, wie eine Generatorfunktion Werte einzeln liefern kann, wobei die Ausführung zwischen jedem yield pausiert wird.

Symbols

Symbols sind ein neuer primitiver Datentyp, der in ES6 eingeführt wurde. Sie sind eindeutig und unveränderlich und werden häufig verwendet, um eindeutige Objektschlüssel zu erstellen.

In diesem Beispiel sind symbol1 und symbol2 eindeutig, obwohl sie dieselbe Beschreibung haben.

Maps und Sets

Maps

Maps sind Sammlungen von Schlüssel-Wert-Paaren, bei denen die Schlüssel von beliebigem Typ sein können.

Dieses Beispiel zeigt, wie man eine Map erstellt, Schlüssel-Wert-Paare setzt und Werte abruft.

Sets

Sets sind Sammlungen eindeutiger Werte.

In diesem Beispiel enthält das Set nur eindeutige Werte, obwohl 3 zweimal hinzugefügt wurde.

Proxys

Mit Proxys können Sie einen Proxy für ein anderes Objekt erstellen, wodurch Sie grundlegende Operationen abfangen und neu definieren können.

Dieses Beispiel zeigt, wie ein Proxy den Zugriff auf Eigenschaften abfangen kann und eine benutzerdefinierte Antwort liefert, wenn die Eigenschaft nicht gefunden wird.

WeakMap und WeakSet

WeakMap

WeakMap ähnelt Map, erlaubt aber nur Objekte als Schlüssel und verhindert die Garbage Collection nicht, wenn keine anderen Referenzen auf das Schlüsselobjekt bestehen.

WeakSet

WeakSet ähnelt Set, erlaubt aber nur Objekte als Werte und verhindert die Garbage Collection nicht, wenn keine anderen Referenzen auf das Objekt bestehen.

Fazit

ES6 bringt eine Fülle von Funktionen mit sich, die JavaScript zu einer robusteren und effizienteren Sprache machen. Durch das Verstehen und Nutzen dieser Funktionen können Entwickler saubereren, besser wartbaren Code schreiben. Dieser Leitfaden hat einen ausführlichen Blick auf die wichtigsten Aspekte von ES6 geworfen, komplett mit Beispielen, die Ihnen den Einstieg erleichtern.

Um tiefer in die einzelnen Themen einzusteigen, machen Sie weiter mit Pfeilfunktionen, destrukturierender Zuweisung, Rest-Parametern und Spread-Syntax, Klassen, Modulen und Promises.

Übungen