JavaScript Funktion als Parameter übergeben

Um eine Funktion in JavaScript zu übergeben, gib der empfangenden Funktion ihre Funktionsreferenz, zum Beispiel greet, ohne sie aufzurufen. Mit greet() wird sie sofort aufgerufen und stattdessen ihr Rückgabewert übergeben. Die empfangende Funktion entscheidet, ob und wann sie die erhaltene Funktion aufruft; eine solche Funktion wird oft Callback genannt. So kannst du einer anderen Funktion Verhalten zur Verfügung stellen.

Eine benannte Funktion als Argument übergeben

Eine benannte Funktion ist nützlich, wenn du eine Operation separat beschreiben oder wiederverwenden möchtest. In diesem Beispiel erhält formatGreeting die Funktion greet und einen Namen. Anschließend ruft sie die übergebene Funktion mit diesem Namen auf:

function greet(name) {
  return "Hello, " + name + "!";
}

function formatGreeting(callback, name) {
  return callback(name);
}

const message = formatGreeting(greet, "Mina");
console.log(message);

Der Aufruf formatGreeting(greet, "Mina") übergibt zwei Werte: die Funktionsreferenz greet und die Zeichenfolge "Mina". Innerhalb der empfangenden Funktion ruft callback(name) greet auf und gibt dessen Ergebnis zurück. Bei formatGreeting(greet("Mina"), "Mina") würde JavaScript greet bereits aufrufen, bevor formatGreeting beginnt. Das erste Argument wäre dann eine Zeichenfolge statt einer Funktion.

Eine Funktion zusammen mit weiteren Argumenten übergeben

Eine Funktion kann neben gewöhnlichen Werten mehrere Callbacks erhalten. Die empfangende Funktion kann auswählen, welchen Callback sie aufruft und welchen Wert sie ihm übergibt. Hier erhält applyOperation eine Zahl und zwei Funktionen und wendet beide Funktionen auf die Zahl an:

function applyOperation(value, first, second) {
  return [first(value), second(value)];
}

function double(number) {
  return number * 2;
}

function addThree(number) {
  return number + 3;
}

const results = applyOperation(4, double, addThree);
console.log(results.join(", "));

Die Reihenfolge der Argumente ist wichtig, denn die Parameter von applyOperation erhalten die Werte in derselben Reihenfolge wie beim Aufruf. value erhält 4, first erhält double und second erhält addThree. Die Funktion gibt beide berechneten Werte in einem Array zurück. Dasselbe Muster eignet sich, wenn eine API neben einem Callback Optionen oder Daten erwartet: Prüfe die Parameterreihenfolge und übergib dann jede Funktion anhand ihres Namens, ohne sie aufzurufen.

Anonyme Funktionen und Pfeilfunktionen als Callbacks verwenden

Wenn du eine Operation nur an der Aufrufstelle benötigst, kannst du sie dort definieren, statt eine benannte Funktion zu deklarieren. Im folgenden Beispiel wird zuerst eine anonyme Funktion an map übergeben und anschließend eine Pfeilfunktion an einen zweiten map-Aufruf:

const numbers = [1, 2, 3];

const doubled = numbers.map(function (number) {
  return number * 2;
});
const tripled = numbers.map((number) => number * 3);

console.log(doubled.join(", "));
console.log(tripled.join(", "));

2, 4, 6
3, 6, 9

map ruft den Callback für jedes Array-Element auf und erstellt aus den zurückgegebenen Werten ein neues Array. Der Callback muss keinen Namen haben. Die anonyme Funktion verwendet das Schlüsselwort function; die Pfeilfunktion verwendet => und einen Ausdruckskörper, dessen Wert implizit zurückgegeben wird. Wähle die Form, die die Operation verständlich macht. Pfeilfunktionen verwenden außerdem das lexikalische this der umgebenden Umgebung. Benötigt ein Callback einen eigenen this-Wert, verwende eine reguläre Funktion und beachte das dokumentierte this-Verhalten der aufrufenden API. Die beiden Ausgabeblöcke zeigen die verdoppelten Werte 2, 4, 6 und die verdreifachten Werte 3, 6, 9; sie enthalten nur Zahlen, keine Beschriftungen.

Eine Funktion aus einer anderen Funktion zurückgeben

Eine Funktion kann auch eine andere Funktion zurückgeben. Das unterscheidet sich davon, einen Callback als Argument zu übergeben: Der äußere Aufruf erstellt eine Funktion und gibt sie zurück, sodass du sie speichern und später aufrufen kannst. Zum Beispiel gibt makeMultiplier eine Funktion zurück, die den gewählten Multiplikator in ihrem umgebenden Gültigkeitsbereich behält:

function makeMultiplier(multiplier) {
  return function (number) {
    return number * multiplier;
  };
}

const triple = makeMultiplier(3);
console.log(triple(5));

makeMultiplier(3) gibt eine Funktion zurück, daher verweist triple auf diese zurückgegebene Funktion. Mit triple(5) übergibst du ihr anschließend das Argument number. Die innere Funktion kann weiterhin auf multiplier aus dem Aufruf zugreifen, durch den sie erstellt wurde; dieser erhaltene Zugriff ist eine Closure. Eine Funktion höherer Ordnung ist eine Funktion, die eine andere Funktion entgegennimmt, zurückgibt oder beides tut.

Häufige Fragen

Wie übergebe ich mehrere Funktionen? Setze jede Funktionsreferenz durch Kommas getrennt an ihre eigene Argumentposition und richte die Reihenfolge an den Parametern der empfangenden Funktion aus.

Wann wird ein Callback ausgeführt? Die empfangende Funktion bestimmt, wann sie den Callback aufruft. Allein durch das Übergeben einer Funktion wird sie nicht aufgerufen; die empfangende Funktion kann sie je nach ihrer Implementierung sofort, später oder mehrmals aufrufen.

Kann eine Funktion eine andere Funktion zurückgeben? Ja. Rufe die äußere Funktion auf, um die zurückgegebene Funktion zu erhalten, und rufe dieses Ergebnis anschließend auf oder übergib es weiter. So lassen sich häufig Funktionen mit einer in einer Closure gespeicherten Konfiguration erstellen.