JS ES6 Tutorial

JS ES6 Tutorial

ist die Abkürzung für ECMAScript 6, ist der Zukünftige Standard für die Ausführung von JavaScript in aktuellen und kommenden Browsern und Servern. Dabei ist zu bemerken, dass ein NodeJS Server bereits unterstützt, aber manche Browser wie z.B. der IE11 nicht. Jetzt ist die Frage warum zu benutzen, obwohl manche Browser dies noch gar nicht unterstützen. Einmal bringt viele Vorteile in der Programmierung und macht vieles einfacher. Des weiteren gibt es Compiler (Babel), die aus ES5 machen und dadurch kann in ES6 programmiert werden und in ES5 ausgespielt werden.

Übersicht

let und const

ES6 bringt 2 neue Datentypen mit, einmal let und zum anderen const.

let

Der Datentype let ist für Variablen, die nur im aktuellen Block verarbeitet werden sollen. Es ist zu beachten, dass let in einem verschachtelten Block auch verfügbar ist, da sich ja der verschachtelte Block auch im aktuellen Block befindet. Kurz zur Klärung, ein Block ist z.B. eine if Bedingung, eine Funktion oder eine Schleife.

1 Uncaught ReferenceError: a is not defined 

Zum vergleich dazu ein Beispiel mit var:

Let überschreibt nicht die Variablen die im Block dadrüber liegen. Sprich du kannst eine Variable mit var deklarieren und den gleichen Variablennamen, mit einer let deklaration, in einer if Bedingung benutzen.

Des weiteren ist zu beachten, das z.B. in einer For Schleife der Kopf mit zum Block gehört.

const

Const steht für Konstante, eine Konstante darf nur einmal definiert werden und danach nicht mehr verändert werden, da sonst ein Fehler zurückgegeben wird. Es ist zu beachten, dass bei const immer der Name von der Konstante groß geschrieben wird.

Arrow Funktionen

Vorab erstmal zeige ich dir die „alten" Varianten Funktionen zu definieren.

Diese Definitionen sollten dir bekannt sein. Mit der Arrow Funktion kommt eine dritte Möglichkeit hinzu.

„var newConsole" definiert den Funktionsnamen, „()" die Parameter und „=>" definiert den Übergang zum Funktionsbody. Einer der Vorteile bei dieser Variante ist die Möglichkeit die Funktion zu kürzen. Da wir nur ein Befehl in der Funktion haben, verhält sich das ähnlich wie mit einer if Bedingung, man kann die geschweiften Klammern weg lassen.

Des weiteren kann man sich bei einer einzeiligen Funktion den return sparen.

Bei den Parametern gibt es auch eine kleine Besonderheit. Wenn du mehrere Parameter hast, schreibst du diese einfach mit einem Kommer getrent in die Klammern „= (parm1,parm2,parm3) =>". Falls du nur ein Parameter hast , kannst du dir die Klammern sogar sparen „= parm1 =>". Jetzt zeige ich dir, ein praktisches Beispiel dafür indem ich eine Variable mit einem festen Wert addieren mächte.

Diese Schreibweise macht sich gut bei kurzen Callback Funktionen, z.B. bei diesem Timeout.

Vorteil bei Klassen beim Zugriff auf „this"

Arrow Funktionen unterscheiden sich zu normalen Funktionen in einer riesigen Sache, es verarbeitet „this" anders. Bei Arrow Funktionen wird das this Objekt von der aktuellen deklarationspunkt benutzt. Das wird in einer Klasse am besten sichtbar.

thisTestArrowFunc: TestKlasse {} TestFunktion: Uncaught TypeError: Cannot read property 'test' of undefined 
in JSBin öffnen

Aber die normale Funktion kann auch Vorteile haben, z.B. wenn wir einen Button haben und dieser gedrückt wird, möchte man gerne in der Funktion mit dem Buttonobjekt über this arbeiten. Dies ist mit einer Arrow Funktion kompliziert zu bewerkstelligen.

Wenn jetzt der Button gedrückt wird, wird in der Konsole das Button-Objekt ausgegeben. in JSBin öffnen

Die Arrow Funktion gibt das Window Objekt zurück. in JSBin öffnen

Standardwerte bei Funktionen

Mit ES6 können Funktionen jetzt auch default Werte gegeben werden, sprcih wenn der Parameter nicht mitgegeben wird, wird der Standard Wert verwendet.

true false true
in JSBin öffnen

Objekterweiterungen

Objekterweiterungen ist das automatische verwenden von Variablen. Wenn du eine Variable mit dem Namen „name" definierst und danach ein Objekt mit dem Feld „name", wird die erstellte Variable automatisch in das Objekt gespeichert.

[object Object] { nachname: "Borkowski", name: "Marc" }

Es ist natürlich möglich das Objektelement zu überschreiben bzw. nicht die Variable zu benutzen.

[object Object] { nachname: "Borkowski", name: "Max" }

Jetzt kommt der große Vorteil in der Sache, dies funktioeniert auch mit Funktionen, sprich du erstellst eine Funktion (ES5) und in dieser Funktion kannst du über this auf die einzelnen Elemente zugreifen. Hierdran siehst du auch das Arrow Funktionen Nachteile haben können. Benutze Arrow Funktionen nicht immer, diese können auch Nachteile haben.

dynamisches erstellen von Objektelmenten

Es ist möglich Objektelemente über Variableninhalte zu erstellen, dazu musst du einfach den Variablenname in Eckige Klammern beim Objekt setzen.

[object Object] { nachname: "Borkowski", name: "Max" }

Rest Operator

Der Rest Operator transformirt eine Liste von Parametern in ein Array. Das hat den Vorteil, dass die Parameter dynamisch verarbeitet werden können. Der Nachteil ist, dass als Parameter immer eine Liste und kein Array übertragen werden sollte, da sonst das Array wieder in ein Array gepackt wird.

Als praktisches Beispiel nehme ich eine Funktion die alle Parameter summieren soll, Dies ist ohne Rest Operator äußerst schwierig, da wir erst alle möglichen Parameter prüfen müssen.

in JSBin öffnen

Spread Operator

Der Spread Operator ist das Gegenteil zum Rest Operator, es wandelt ein Array in eine Liste um. Dies ist ein Vorteil, wenn du zum Beispiel die max Methode verwendest, aber ein Array hast. Der Spread Operator wird diesmal beim Funktionsaufruf verwendet, nicht beim Funktionskopf.

in JSBin öffnen

Beim Spread Operator ist auch möglich noch weitere Parameter hinzuzufügen. Man kann sogar mehrere Spread Operatoren hintereinander verwenden.

For of Loop

For of Loop ist eine For Schleife, in der ein Array einfacher verarbeitet werden kann. Jedes Array Element wird temporär, für den einen Intervall, in eine Variable gespeichert.

Dies ist natürlich auch mit einer Schleife machbar, aber diese kürzere Schreibweise macht den Code leserlicher.

Templates

Erstmal möchte ich dir das nach links gedrehte Anführungszeichen vorstellen. Neben Backspace mit gehaltener Shift Taste kannst du das Zeichen tippen -> „. Mit diesem Anführungszeichen ist es möglich Strings über mehrere Zeilen zu schreiben.

Mit den nach links gedrehten Anführungszeichen, ist es möglich Variablen mit einzubetten. Das machst du mit ${variablenname}.

"Herzlich Willkommen Marc"

Um ${} zu schreiben ohne das eine Variable ausgegebn werden soll, kannst du die Stelle mit \ maskieren.

Es ist auch möglcih in den geschweiften Klammern Code auszuführen, als Beispiel möchte ich eine Zahl ausgeben und diese in der Ausgabe immer + 1 rechnen.

Destructuring Arrays

Mit Destructuring Arrays kann man Arrays auseinandernehmen bzw. einfacher mit den Werten arbeiten. Wenn du auf der linken Seite der Variablendefinition eckige Klammern schreibst, kannst du auf einzelne Elemente von einem Array zugreifen. Das klingt zwar kompliziert, aber am Code Beispiel wirst du es schnell verstehen.

Es werden 2 Variablen erstellt und diesen werden die Werte von den ersten beiden Elementen des Arrays zugewiesen. Du kannst auch den Rest Operator mit einbauen falls du alle Elemente eines Arrays haben, mit der Außname vom ersten.

Destructuring Arrays hat noch ein großen Vorteil, Variablen vertauschen, früher brauchte man noch eine dritte Variable in den man den Wert zwischen gespeichert hat. Jetzt ist dies mit dieser Technik einfacher zu lösen.

Destructuring Objekte

Was mit Arrays funktioniert, klappt auch mit Objekten. Nur der Unterschied ist, dass geschweifte Klammern verwendet werden, um Objektelemente aus dem Objekt zu „ziehen".

"Marc" 29 "Rostock"

Des weiteren kannst du bei Objekten noch ein Alias mithinzufügen. Wenn ein ALias angegeben ist, wird der Variablenname überschrieben. Alias werden nach dem Objektnamen mit einem Doppelpunkt geschrieben.


wallpaper-1019588
Akku-Scheinwerfer IXON SPACE überzeugt
wallpaper-1019588
WAVE AKADEMIE für Digitale Medien erhält staatliche Anerkennung
wallpaper-1019588
Lifestyle X: Was ich aus 12 verrückten Selbstversuchen gelernt und beibehalten habe
wallpaper-1019588
Fam. Eder-Feldbauer steirischer Bauernhof des Jahres 2019
wallpaper-1019588
Future Astronauts Horizons Podcast Episode #053 // free download
wallpaper-1019588
Schoko-Cookie-Törtchen mit Baiser
wallpaper-1019588
Gewalt: Ohne Beipackzettel
wallpaper-1019588
luna. ein fliegenpilz im erdbeerkleid