Einführung in ES6

ECMAScript 2015, auch bekannt als ES6 (ECMAScript 6), ist ein bedeutendes Update für JavaScript und führt neue Syntax und Funktionen ein, die das Codieren effizienter und einfacher zu verwalten machen. JavaScript ist eine der beliebtesten Programmiersprachen für die Webentwicklung und die Verbesserungen in ES6 erweitern ihre Fähigkeiten erheblich.

Dieser Leitfaden behandelt die wichtigen Funktionen, die in ES6 eingeführt wurden, mit besonderem Schwerpunkt auf Pfeilfunktionen, einer leistungsstarken neuen Art, Funktionen zu schreiben.

Hauptmerkmale von ES6

1. let und const

ES6 führte zwei neue Möglichkeiten zum Deklarieren von Variablen ein: let und const.

• let: Deklariert eine blockbezogene Variable, was bedeutet, dass die Variable nur innerhalb des Blocks verfügbar ist, in dem sie deklariert wurde.
  

   let x = 10;
   if (true) {
     let x = 2;
     console.log(x); // 2 (inside block)
   }
   console.log(x); // 10 (outside block)
  

• const: Deklariert eine konstante Variable, die nicht neu zugewiesen werden kann. Dies macht die Variable jedoch nicht unveränderlich – die Eigenschaften von mit const deklarierten Objekten können weiterhin geändert werden.
  

   const y = 10;
   y = 5; // Error: Assignment to constant variable.
  
   const person = { name: "John", age: 30 };
   person.age = 31; // This is allowed.
  

2. Pfeilfunktionen

Eine der am meisten diskutierten Funktionen von ES6 ist die Pfeilfunktion. Es bietet eine kürzere und prägnantere Syntax zum Schreiben von Funktionen.

#### Syntaxvergleich:

Traditionelle Funktion (ES5):

   var add = function(x, y) {
     return x   y;
   };

Pfeilfunktion (ES6):

   const add = (x, y) => x   y;

Das macht Pfeilfunktionen anders:

• Kürzere Syntax: Sie müssen das Funktionsschlüsselwort nicht schreiben und können die geschweiften Klammern {} weglassen, wenn die Funktion eine einzelne Anweisung hat.
• Implizite Rückgabe: Wenn die Funktion nur einen Ausdruck enthält, wird das Ergebnis dieses Ausdrucks automatisch zurückgegeben.
• Keine This-Bindung: Pfeilfunktionen haben keine eigene This-Bindung, sodass sie für Objektmethoden ungeeignet sind.

Beispiel für eine einzeilige Pfeilfunktion:

   const multiply = (a, b) => a * b;
   console.log(multiply(4, 5)); // 20

Pfeilfunktionen können auch ohne Parameter verwendet werden:

   const greet = () => "Hello, World!";
   console.log(greet()); // "Hello, World!"

Für Funktionen mit mehr als einer Zeile sind geschweifte Klammern {} erforderlich und die Return-Anweisung muss explizit sein:

   const sum = (a, b) => {
     let result = a   b;
     return result;
   };

Pfeilfunktionen und dies
Ein wichtiger Unterschied besteht darin, wie sich dies in Pfeilfunktionen verhält. Im Gegensatz zu herkömmlichen Funktionen binden Pfeilfunktionen ihr eigenes This nicht – sie erben es aus ihrem umgebenden Kontext.

   const person = {
     name: "John",
     sayName: function() {
       setTimeout(() => {
         console.log(this.name);
       }, 1000);
     }
   };
   person.sayName(); // "John"

Im obigen Beispiel erbt die Pfeilfunktion in setTimeout dies von der sayName-Methode, die korrekt auf das Personenobjekt verweist.

3. Destrukturierungsauftrag

Durch die Destrukturierung können wir Werte aus Arrays oder Objekten extrahieren und sie auf präzisere Weise Variablen zuweisen.

Objektdestrukturierung:

   const person = { name: "John", age: 30 };
   const { name, age } = person;
   console.log(name); // "John"
   console.log(age);  // 30

Array-Destrukturierung:

   const fruits = ["Apple", "Banana", "Orange"];
   const [first, second] = fruits;
   console.log(first);  // "Apple"
   console.log(second); // "Banana"

4. Spread-and-Rest-Operator (...)

Der ...-Operator kann verwendet werden, um Arrays in einzelne Elemente zu erweitern oder mehrere Elemente in einem Array zusammenzufassen.

• Spread: Erweitert ein Array in einzelne Elemente.
  

   const numbers = [1, 2, 3];
   const newNumbers = [...numbers, 4, 5];
   console.log(newNumbers); // [1, 2, 3, 4, 5]
  

• Rest: Sammelt mehrere Argumente in einem Array.
  

   function sum(...args) {
     return args.reduce((acc, curr) => acc   curr);
   }
   console.log(sum(1, 2, 3, 4)); // 10
  

5. Versprechen

Promises werden für die Handhabung asynchroner Vorgänge in JavaScript verwendet. Ein Versprechen stellt einen Wert dar, der jetzt, in der Zukunft oder nie verfügbar sein kann.

Beispiel:

   const myPromise = new Promise((resolve, reject) => {
     setTimeout(() => {
       resolve("Success!");
     }, 1000);
   });

   myPromise.then(result => {
     console.log(result); // "Success!" after 1 second
   });

In diesem Beispiel wird das Versprechen nach 1 Sekunde aufgelöst und die Methode then() verarbeitet den aufgelösten Wert.

6. Standardparameter

In ES6 können Sie Standardwerte für Funktionsparameter festlegen. Dies ist nützlich, wenn ein Parameter nicht bereitgestellt wird oder nicht definiert ist.

Beispiel:

   function greet(name = "Guest") {
     return `Hello, ${name}!`;
   }
   console.log(greet());       // "Hello, Guest!"
   console.log(greet("John")); // "Hello, John!"

7. String-Methoden (includes(), getsWith(), endWith())

Zu den Zeichenfolgen wurden neue Methoden hinzugefügt, um häufige Aufgaben zu vereinfachen:

• includes(): Prüft, ob eine Zeichenfolge einen angegebenen Wert enthält.
  

   let str = "Hello world!";
   console.log(str.includes("world")); // true
  

• startsWith(): Prüft, ob eine Zeichenfolge mit einem angegebenen Wert beginnt.
  

   console.log(str.startsWith("Hello")); // true
  

• endsWith(): Prüft, ob eine Zeichenfolge mit einem angegebenen Wert endet.
  

   console.log(str.endsWith("!")); // true
  

8. Array-Methoden (find(), findIndex(), from())

ES6 führte neue Methoden für die Arbeit mit Arrays ein:

• find(): Gibt das erste Element zurück, das eine Bedingung erfüllt.
  

   const numbers = [5, 12, 8, 130, 44];
   const found = numbers.find(num => num > 10);
   console.log(found); // 12
  

• findIndex(): Gibt den Index des ersten Elements zurück, das eine Bedingung erfüllt.
  

   const index = numbers.findIndex(num => num > 10);
   console.log(index); // 1 (position of 12 in the array)
  

9. Klassen

ES6 führte Klassen in JavaScript ein, die syntaktische Zucker über die bestehende prototypbasierte Vererbung von JavaScript sind. Klassen ermöglichen eine sauberere und verständlichere objektorientierte Programmierung.

Beispiel:

   class Car {
     constructor(brand, year) {
       this.brand = brand;
       this.year = year;
     }

     displayInfo() {
       return `${this.brand} from ${this.year}`;
     }
   }

   const myCar = new Car("Toyota", 2020);
   console.log(myCar.displayInfo()); // "Toyota from 2020"

Abschluss

ES6 hat JavaScript transformiert und es effizienter und benutzerfreundlicher gemacht. Die Einführung von Pfeilfunktionen vereinfacht die Funktionssyntax, während neue Funktionen wie Destrukturierung, Versprechen, Klassen und der Spread-Operator hinzukommen ermöglicht es Entwicklern, saubereren, ausdrucksstärkeren Code zu schreiben. Unabhängig davon, ob Sie Anfänger oder fortgeschrittener Entwickler sind, ist das Verständnis dieser ES6-Funktionen für das Schreiben von modernem JavaScript unerlässlich.

Wenn Sie diese Konzepte beherrschen, sind Sie besser für die Bewältigung realer Codierungsherausforderungen gerüstet und können effiziente, skalierbare Webanwendungen erstellen.

Folgen Sie dem Arrow Functions-Projekt auf GitHub nach

Referenzen

• https://www.w3schools.com/js/js_es6.asp
• https://towardsdatascience.com/javascript-es6-iterables-and-iterators-de18b54f4d4
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/rest_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Default_parameters
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements