7.4.6 Callbacks
Callbacks verstehen
Achtung: Diese Seite ist nicht trivial. Aber Sie haben hier die einmalige Chance Callbacks wirklich zu verstehen und ich kenne keine andere Seite, die Callbacks so gut beschreibt. Aber wenn Sie eine ebenso gute oder bessere Beschreibung kennen, dann lassen Sie es mich gerne wissen.
In JavaScript ist ein Callback eine Funktion, die als Argument an eine "andere" Funktion übergeben wird. Die "andere" Funktion entscheidet, wann und wie der Callback ausgeführt wird.
Stellen Sie sich vor, Sie bestellen in einem Restaurant Essen. Nachdem Sie Ihre Bestellung (den Callback) abgegeben haben, beginnt der Koch (die aufrufende Funktion) mit der Zubereitung (und die Zubereitung dauert Zeit). Sobald das Essen fertig ist (ein bestimmter Zustand erreicht wird - hier die Zeit verstrichen ist), bringt der Kellner es zu Ihnen – der Callback (die Bestellung) wird aufgerufen!
Einfacher Callback
Schauen wir uns ein Programmierbeispiel an: Eine Funktion soll einen Text auf der Konsole ausgeben, aber die genaue Nachricht wird von einem Callback (der Funktion simpleCallback
) bereitgestellt. So sind wir sehr flexibel, welche Nachricht aufgerufen wird.
Erklärung
simpleCallback
: Dies ist die Callback-Funktion, die eine Nachricht auf der Konsole ausgibt.callerFunction
: Eine Funktion, die etwas tut (z. B. "Bestellung wird bearbeitet...") und dann den Callback aufruft, wenn er als Funktion übergeben wurde.- Warum? So können Sie einer Funktion flexible Aufgaben geben, je nachdem, welcher Callback übergeben wird.
Motivation: Warum Callbacks?
Stellen Sie sich vor, Sie entwickeln ein Spiel. Der Spieler erreicht ein Level, und die Funktion, die Level-ups verarbeitet, ruft eine Callback-Funktion auf, um je nach Level eine Belohnung zu vergeben.
Callbacks sind wichtig, weil sie Flexibilität bieten. Sie lassen Sie entscheiden, was passieren soll, sobald ein bestimmter Zustand erreicht ist.
Übung: Ihr eigenes Callback mit Bearbeitungszeit
Aufgabe: Ergänzen Sie die Funktion restaurantOrder
, sodass sie einen Restaurantnamen und einen Callback entgegennimmt. Die Bearbeitungszeit wird durch eine Schleife simuliert: Sushi dauert 5 Minuten, Pizza dauert 8 Minuten. Der Callback soll am Ende der Bearbeitung eine Nachricht anzeigen.
Hinweis: Überprüfen Sie, ob der übergebene Callback tatsächlich eine Funktion ist, bevor Sie ihn aufrufen.
So soll es im Browser aussehen
Lösung
Anonyme Callbacks
In der Praxis werden Callbacks oft direkt bei der Übergabe als anonyme Funktionen definiert. Anonyme Funktionen sind Funktionen ohne Namen, die direkt an die aufrufende Funktion übergeben werden. Dies macht den Code kompakter und flexibler, da keine separate Funktionsdeklaration nötig ist.
Schauen wir uns das folgende Beispiel an, in dem anonyme Funktionen als Callback verwendet werden:
Erklärung:
- Diese Funktionen haben keinen Namen (sind also anonym) und werden direkt als Argumente an restaurantOrder
übergeben.
- Sie sind anonym, weil sie nicht separat deklariert wurden und keinen Bezeichner besitzen.
- Stattdessen werden sie nur an dieser Stelle verwendet, um den spezifischen Text für Sushi und Pizza anzuzeigen.
Callbacks mit Parametern
Callbacks können Parameter empfangen, um spezifische Daten zwischen Funktionen zu übergeben. Dies macht Callbacks äußerst flexibel und ermöglicht es, kontextbezogene Informationen zu verarbeiten.
Warum Parameter in Callbacks?
- Datenweitergabe: Die aufrufende Funktion kann Daten an den Callback weiterreichen, die dieser benötigt, um spezifische Aufgaben zu erledigen.
- Flexibilität: Mit Parametern können Sie denselben Callback an mehreren Stellen verwenden, aber unterschiedlich anpassen, je nachdem, welche Daten übergeben werden.
- Klarheit: Es wird deutlich, welche Informationen zwischen den Funktionen fließen, und der Code bleibt gut lesbar.
Beispiel: Callback mit Parametern
Das folgende Beispiel zeigt, wie eine Funktion namens restaurantOrder
Informationen wie den Namen des Restaurants und die Bearbeitungszeit an einen Callback übergibt. Der Callback verarbeitet diese Daten und zeigt sie an.
Erklärung
-
restaurantOrder
Funktion- Diese Funktion simuliert eine Bestellung.
- Sie berechnet die Bearbeitungszeit basierend auf dem Restaurantnamen.
- Nach der Bearbeitung ruft sie den übergebenen Callback auf und übergibt den Restaurantnamen sowie die Bearbeitungszeit.
-
detailedCallback
Funktion- Dies ist der Callback, der zwei Parameter (
name
undtime
) empfängt. - Der Callback verwendet die übergebenen Daten, um eine spezifische Nachricht anzuzeigen.
- Da ein Name (
detailedCallback
) angegeben ist, ist es kein anonymer Callback
- Dies ist der Callback, der zwei Parameter (
-
Hauptprogramm
- Der Callback wird an
restaurantOrder
übergeben. - Die Funktion wird für unterschiedliche Restaurants (
SushiBar
,PizzaHaus
) aufgerufen, wodurch der Callback je nach Restaurantnamen und Bearbeitungszeit unterschiedliche Nachrichten anzeigt.
- Der Callback wird an
So sieht es im Browser aussehen
Eigener Callback mit Parametern
Aufgabe: Schreiben Sie einen eigenen Callback, der für jedes Restaurant eine zusätzliche Nachricht anzeigt, z. B.:
- Für die "SushiBar": "Sushi ist schnell fertig!"
- Für das "PizzaHaus": "Pizza braucht etwas länger, aber es lohnt sich!"
Hinweis: Verwenden Sie die Parameter, um den Namen des Restaurants zu überprüfen und eine passende Nachricht anzuzeigen.
Lösung
forEach()
mit Callback
Die Array-Methode forEach()
ist eine häufig genutzte Funktion in JavaScript, um auf jedes Element eines Arrays eine spezifische Funktion anzuwenden. Dabei ist die Callback-Funktion flexibel, sodass Sie selbst definieren können, was mit den Elementen des Arrays passieren soll.
Erklärung
-
Array
students
:
Das Array enthält die Namen der Studierenden, auf die wir eine Operation anwenden möchten. Es ist die Datenquelle, auf der die MethodeforEach()
arbeitet. -
Callback-Funktion:
Die Callback-Funktion ist der zentrale Bestandteil vonforEach()
. Sie wird für jedes Element des Arrays ausgeführt und übernimmt die Logik, die auf das jeweilige Element angewendet werden soll. - Wo ist die Callback-Funktion?
Im Beispiel ist die Callback-Funktion in der MethodeforEach()
eingebettet. Sie wird als anonyme Funktion direkt übergeben: -
Parameter der Callback-Funktion:
Die Callback-Funktion hat Zugriff auf:student
: Das aktuelle Element des Arrays (z. B."Lena"
,"Tobias"
,"Miriam"
).index
: Die Position des aktuellen Elements im Array (z. B.0
,1
,2
).
-
Output:
Für jedes Element des Arrays wird die Callback-Funktion ausgeführt. Die Funktion generiert eine Zeile mit:- Der Position des Studierenden im Array (beginnend bei
1
). - Dem Namen des Studierenden.
Diese Zeilen werden mithilfe vondocument.write()
ausgegeben.
- Der Position des Studierenden im Array (beginnend bei
Zusammenfassung:
Die Callback-Funktion ist die anonyme Funktion, die an forEach()
übergeben wird. Sie führt die individuelle Verarbeitung jedes Array-Elements durch.
Erweiterung: Komplexere Operationen
Statt einer einfachen Nachricht können wir auch komplexere Operationen durchführen, z. B. die Länge jedes Namens berechnen:
Übung zur Erweiterung des Beispiels
Ergänzen Sie das obige Beispiel so, dass für Studierende mit Namen, die länger als 5 Zeichen sind, zusätzlich die Nachricht "Ihr Name ist relativ lang"
ausgegeben wird.
Lösung
Übung: Begrüßung mit einem Callback
Ergänzen Sie die folgende Funktion so, dass sie den Benutzer nach seinem Namen fragt und eine personalisierte Begrüßung ausgibt.
Lösung
Fazit
Callbacks sind in JavaScript ein essentielles Konzept. Sie ermöglichen die Organisation von Abläufen und die dynamische Anpassung von Funktionen. Diese Technik bildet die Grundlage für fortgeschrittene Themen wie Promises und async/await, die in diesem Script jedoch nicht behandelt werden.
Weiterführende Links
-
JavaScript Promises und async/await: How to Use JavaScript Promises – Callbacks, Async/Await, and Promise Methods Explained bietet eine umfassende Einführung in die Verwendung von Promises und async/await in JavaScript.
-
Asynchrone Programmierung in JavaScript: Asynchronous JavaScript Explained: Callbacks, Promises, Async/Await erläutert die Unterschiede und Anwendungsfälle von Callbacks, Promises und async/await.
-
Vergleich von Callbacks, Promises und async/await: Callbacks vs Promises vs Async/Await vergleicht die drei Ansätze zur Handhabung asynchroner Operationen in JavaScript und diskutiert deren Vor- und Nachteile.
-
Ereignisschleife und asynchrone Programmierung: Understanding the Event Loop, Callbacks, Promises, and Async/Await in JavaScript bietet einen tiefen Einblick in die Funktionsweise der Ereignisschleife und asynchroner Programmierung in JavaScript.