JS ES6 Tutorial

ES6 ist die Abkürzung für ECMAScript 6, ES6 ist der Standard für die Ausführung von JavaScript in aktuellen und kommenden Browsern und Servern. ES6 wurde 2015 entwickelt und hat neue Arbeitsweisen in Java Script implementiert. Alle gänigen Browser/NodeJs Server unterstützen ES6. In diesem Artikel findest du eine Übersicht von allen neuen Arbeitsweisen.

Übersicht

1. let und const
2. Arrow Funktionen
3. Standardwerte bei Funktionen
4. Objekterweiterungen
5. Rest Operator
6. Spread Operator
7. For of Loop
8. Templates
9. Destructuring Arrays
10. Destructuring Objekte

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.

if(true){
  let a = 1;
  console.log(a);
}
console.log(a);

1
Uncaught ReferenceError: a is not defined

Zum vergleich dazu ein Beispiel mit var:

if(true){
  var a = 1;
  console.log(a);
}
console.log(a);

1
1

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.

var a = 0;
console.log(a);
if(true){
  let a = 1;
  console.log(a);
}
console.log(a);

0
1
0

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

let a = 10;
for(let a = 5; a > 0; a--){
  console.log(a);
  
}
console.log(a);

5
4
3
2
1
10

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.

const CONFIG_CONNECTION_IP = "127.0.0.1";

Arrow Funktionen

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

function consoleHello() {
  console.log("Hello World");
}
consoleHello();

var consoleBye = function(){
  console.log("Bye World");
}
consoleBye();

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

var newConsole = () => {
  console.log("new World");
}
newConsole();

„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.

var newConsole = () => console.log("new World");
newConsole();

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

var newConsole = () => "new World";
console.log(newConsole());

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.

var addToBasis = basis => basis+5;
console.log(addToBasis(5));

10

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

setTimeout(() => console.log("1 Sekunde vergangen"), 1000);

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.

class TestKlasse {
  constructor() {  
    
    let thisTestArrowFunc = () => this.test();
    
    function TestFunktion() {
      this.test();
    }
    
    thisTestArrowFunc();
    TestFunktion();
    
  }
  
  test(){ console.log(this) };
}

let TestObjekt = new TestKlasse();

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.

<!DOCTYPE html>
<html>
<head>
  <title>Button</title>
</head>
<body>
  <button>klick mich</button>
</body>
</html>

var button = document.querySelector("button");

function showButtonInfo(){
  console.log(this);
}
button.addEventListener('click', showButtonInfo);

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

var button = document.querySelector("button");

var showButtonInfo = () => {
  console.log(this);
}

button.addEventListener('click', showButtonInfo);

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.

var istGleich = (zahl, vergleich = 10) => zahl === vergleich;
console.log(istGleich(10));

function istGleich2(zahl, vergleich = 10){
  return zahl === vergleich;
}
console.log(istGleich2(8));
console.log(istGleich2(8,8));

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.

let name = "Marc";

let person = {
  name,
  nachname: "Borkowski"
}

console.log(person);

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

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

let name = "Marc";

let person = {
  name: "Max",
  nachname: "Borkowski"
}

console.log(person);

[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.

let name = "Marc";

function sagHallo() {
  return "Hallo " + this.name;
}

let person = {
  name: "Max",
  nachname: "Borkowski",
  sagHallo
}

console.log(person.sagHallo());

"Hallo Max"

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.

let name = "Marc";
let NachnamenFeld = "nachname"

let person = {
  name: "Max",
  [NachnamenFeld]: "Borkowski"
}

console.log(person);

[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.

let summeArray = (...nummern) => {
  console.log(nummern);
}

summeArray(1,2,3);
summeArray([1,2,3]);

[1, 2, 3]
[[1, 2, 3]]

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.

let summeArray = (...nummern) => {
  let summe = 0;
  for(let i = 0; i < nummern.length; i++)
    summe += nummern[i];
  
  return summe;
}

console.log(summeArray(1,2,3));

6

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.

let nummern = [1,2,3];

console.log(Math.max(nummern));
console.log(Math.max(...nummern));

NaN
3

in JSBin öffnen

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

let nummern = [1,2,3];
console.log(Math.max(...nummern, ...[4,5,6], 9));

9

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.

let nummern = [1,2,3,4];

for(nummer of nummern) {
  console.log(nummer);
}

1
2
3
4

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.

let name = "Marc

du"; // geht nicht

let name = 'Marc

du'; // geht nicht

let name = `Marc 

du`; // geht

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

let name = "Marc";

let willkommen = `Herzlich
Willkommen
${name}`;

console.log(willkommen);

"Herzlich
Willkommen
Marc"

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

let name = "Marc";

let willkommen = `Herzlich
Willkommen
\${name}`;

console.log(willkommen);

"Herzlich
Willkommen
${name}"

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.

let alter = 29;
let ausgabe = `Du bist ${alter + 1}`;
console.log(ausgabe);

"Du bist 30"

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.

let nummern = [1,2,3];
let [a,b] = nummern;
console.log(a);
console.log(b);

1
2

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.

let nummern = [1,2,3];
let [a, ...b] = nummern;
console.log(b);

[2, 3]

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.

let a = 1;
let b = 2;

console.log(a);
console.log(b);

[b, a] = [a,b];

console.log(a);
console.log(b);

1
2
2
1

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“.

let objekt = {
  name: 'Marc',
  alter: 29,
  ort: 'Rostock'
}
let {name} = objekt;
console.log(name);

let {alter, ort} = objekt;
console.log(alter, ort);

"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.

let objekt = {
  name: 'Marc',
  alter: 29,
  ort: 'Rostock'
}
let {ort:stadt} = objekt;
console.log(stadt);

"Rostock"