Back to blog
Mar 2022·2 min read

JavaScript - Generatoren

#javascript

JavaScript-Generatoren sind eine leistungsfähige Funktionstechnik, die JavaScript-Entwicklern zur Verfügung steht. Generatoren ermöglichen es Entwicklern, asynchrone Funktionen auf eine sauberere und strukturiertere Weise zu schreiben. Aber was sind Generatoren eigentlich?

Ein Generator ist eine spezielle Funktion, die es dem Entwickler ermöglicht, Werte schrittweise zurückzugeben, anstatt sie alle auf einmal zurückzugeben. Generatoren können auch zur Erstellung von Iteratoren verwendet werden. Eine Funktion, die als Generator definiert wurde, kann durch die Verwendung des Schlüsselworts "yield" mehrere Werte zurückgeben.

Hier ist ein Beispiel, das zeigt, wie man einen einfachen Generator in JavaScript erstellt:

function* idGenerator() {
  let id = 0;
  while(true) {
    yield id++;
  }
}

let gen = idGenerator();
console.log(gen.next().value); // Ausgabe: 0
console.log(gen.next().value); // Ausgabe: 1
console.log(gen.next().value); // Ausgabe: 2

In diesem Beispiel wird eine Generatorfunktion "idGenerator" definiert, die eine While-Schleife enthält, die unendlich läuft und bei jedem Durchlauf eine ID zurückgibt, die um 1 erhöht wird. Der Wert der ID wird durch die Verwendung des "yield"-Schlüsselworts zurückgegeben. Wir initialisieren eine Instanz dieser Generatorfunktion mit "let gen = idGenerator()" und geben dann drei IDs aus, indem wir "console.log(gen.next().value)" drei Mal aufrufen.

Die Ausgabe des obigen Codes wird "0", "1" und "2" sein.

Generatoren können auch asynchrone Funktionen unterstützen, indem sie "yield" verwenden, um den Code zu unterbrechen und auf das Ergebnis einer asynchronen Operation zu warten, bevor sie die nächste Zeile des Codes ausführen. Hier ist ein Beispiel, das zeigt, wie man einen asynchronen Generator in JavaScript erstellt:

function* asyncIdGenerator() {
  let id = 0;
  while(true) {
    yield fetch('https://jsonplaceholder.typicode.com/todos/' + id)
      .then(response => response.json())
      .then(data => data.id);
    id++;
  }
}

let gen = asyncIdGenerator();
gen.next().value.then(val => console.log(val)); // Ausgabe: 1
gen.next().value.then(val => console.log(val)); // Ausgabe: 2

In diesem Beispiel wird dieselbe Generatorfunktion "idGenerator" verwendet, aber anstelle einer einfachen Inkrementierung der ID wird eine asynchrone Funktion verwendet, um Daten von einer API abzurufen und die ID aus der Antwort zurückzugeben. Die "fetch"-Methode wird verwendet, um die Daten abzurufen und das "yield"-Schlüsselwort wird verwendet, um die Ausführung der Generatorfunktion zu unterbrechen, bis die asynchrone Operation abgeschlossen ist. Wir initialisieren eine Instanz dieser Generatorfunktion mit "let gen = asyncIdGenerator()" und geben dann zwei IDs aus, indem wir "console.log(gen.next().value.then(val => console.log(val)))" zweimal aufrufen. Die Ausgabe des obigen Codes wird "1" und "2" sein.

NewerPromisesOlderJavaScript - Closures