Callbacks in

Über Callbacks

Callback-Funktionen sind Funktionen, die als Argumente an andere Funktionen übergeben werden. Die Callback-Funktion kann dann aufgerufen werden, um eine nachfolgende Aktion auszulösen. Häufig werden Callbacks verwendet, um die Ergebnisse erledigter Arbeit zu verarbeiten oder eine Aktion auszuführen, wenn ein Ereignis eintritt. Callback-Funktionen können in der synchronen und in der asynchronen Programmierung eingesetzt werden.

const sideLength = 5;

// Caller function takes a callback function
function applySideLength(callback) {
  return callback(sideLength);
}

// Callback must expect the possible argument from the calling function
function areaOfSquare(side) {
  return side * side;
}

applySideLength(areaOfSquare); // => 25

Du kannst Callbacks auch als Funktionsausdruck schreiben:

applySideLength(function squarePerimeter(side) {
  return side * 4;
});

Dieses Muster ist in JavaScript nützlich, weil JavaScript als Single-Threaded-Laufzeitumgebung konzipiert ist, in der immer nur ein Funktionsaufruf gleichzeitig ausgeführt werden kann. Während der Ausführung kann die Laufzeitumgebung nicht auf andere Ereignisse reagieren oder die Ausführung fortsetzen, bis die Funktion zurückgekehrt ist.

Viele API-Aufrufe (I/O-Funktionen, Timer und Event-Listener) verwenden einen asynchronen Mechanismus, um den aktuellen Funktionsaufruf beiseitezulegen, bis die Arbeit abgeschlossen ist. Nach Abschluss wird eine Callback-Funktion in die Message Queue gestellt, sodass die Nachrichten dann, wenn die Laufzeitumgebung gerade zwischen zwei Funktionsaufrufen ist, durch Aufrufen der Callback-Funktion verarbeitet werden.

Callback-Funktionen sind auch deshalb nützlich, weil sie auf Variablen in ihrem Closure-Scope zugreifen können, die für die Funktion, in der sie später aufgerufen werden, nicht verfügbar sind.

Konkrete Beispiele für Callback-Funktionen

Event-Handler

Event-Handler sind ein häufiger Anwendungsfall für Callbacks in JavaScript. Browser-Ereignisse wie 'onload' oder 'onclick' sind Signale, die Funktionen auslösen können. Die addEventListener-Methode eines DOM-[Document Object Model-Objekts registriert eine Callback-Funktion, die aufgerufen wird, wenn sie „hört“, dass ein Ereignis eingetreten ist.

document.addEventListener('onload', function () {
  alert('The webpage has now been loaded');
});

Node.js-Konvention

In Node.js folgen Callback-Funktionen einer Konvention, um den Ablauf eines Programms zu steuern. Sie folgen diesem Muster: Das erste Argument der Callback-Funktion kann einen Error oder null erhalten; das zweite und die folgenden Argumente erhalten die Daten, die die aufrufende Funktion senden soll.

Wenn ein Fehler auftritt, sind das zweite und die folgenden Argumente möglicherweise nicht vorhanden, du darfst dich also nicht darauf verlassen, dass sie vorhanden sind.

function operation(a, b, callback) {
  // Work ...

  if (/* an error occurs */) {
    return callback(new Error('An error occurred'))
  }

  // On success:
  callback(null, data)
}

function callback(error, returnedData) {
  if (error) {
    // An error occurred, handle it here.
    return
  }

  // No error occurred, continue with the returned data.
}

operation(1, 2, callback)

Dieses Muster siehst du oft im Umgang mit asynchronen Funktionen, um den Ablauf zu steuern.

Versteckte Callbacks

Gängige Array-Funktionen verwenden Callback-Funktionen, um ihr Verhalten zu definieren:

• Array.prototype.forEach:

  • Nimmt einen Callback entgegen und wendet ihn auf jedes Element eines Arrays an.

    [1, 2, 3].forEach(function (element) {
      doSomething(element);
    });
    // => doSomething() is invoked 3 times, once with each element
    

• Array.prototype.map

  • Nimmt einen Callback entgegen, wendet ihn auf jedes Element eines Arrays an und verwendet das Ergebnis, um ein neues Array zu erstellen.

    [1, 2, 3].map(function (element) {
      return element + 1;
    });
    // => [2, 3, 4]
    

• Array.prototype.reduce

  • Nimmt einen Callback entgegen, wendet ihn auf jedes Element eines Arrays an und gibt das Ergebnis an den nächsten Aufruf weiter.

    [1, 2, 3].reduce(function (runningSum, element) {
      return runningSum + element;
    }, 0);
    // => 6