Callback Functions

Eine Callback-Funktion ist eine Funktion, die einer anderen Funktion als Argument übergeben wird, um später (callback!) ausgeführt zu werden.
Eine Callback-Funktion ist eine anonyme Funktion.

// herkömmliche Schreibweise
function callback() {
  // do stuff here
}
button.addEventListener('click', callback);

// callback function
button.addEventListener('click', function () {
  // do stuff here
});

Why use callbacks?

Callbacks sind in zwei Situationen nützlich:

Code kann leicht ausgetauscht werden
Blockierende Operationen in asynchronem Code werden verhindert

Allowing code to be swapped easily

Der Code innerhalb einer Callback-Funktion kann leicht ausgetauscht werden. Statt do stuff here schreibt man einfach do another stuff here (- ohne dass die Funktion umbenannt werden muss oder so …).

Preventing blocking operations in asynchronous code

Synchroner Code wird – in der Regel* – von oben nach unten und von links nach rechts ausgeführt, erst wenn eine Zeile abgearbeitet ist, folgt die nächste.

Asynchroner Code ist die Ausnahme von dieser Regel. Was bedeutet asynchron? Wenn JavaScript bei der Ausführung eines Scripts auf eine Callback-Funktion stößt, führt es die Funktion, die als Argument übergeben wurde, nicht sofort aus, sondern erst dann, wenn ein im zugehörigen EventListener definiertes Ereignis auftritt (siehe Event Loop).

Mit Callbacks können wir JavaScript also im vorhinein Anweisungen geben, ohne die Ausführung des gesamten Scripts zu blockieren. Wenn JavaScript einen EventListener sieht, reiht es dieses Ereignis in die Warteschleife ein und macht mit seinen anderen Aufgaben weiter. Sobald der Button geklickt wird, aktiviert JavaScript die Callback-Funktion und macht anschließend dort weiter, wo es aufgehört hat.

Creating your own callbacks

Um eigene Callback-Funktionen zu schreiben, brauchen wir zwei Dinge:

eine Callback-Funktion
und eine Funktion, die die Callback-Funktion als Argument entgegennimmt
schließlich muss die annehmende Funktion die Callback-Funktion aufrufen

function callbackAcceptingFunction(callback) {
  // hier wird der Callback ausgeführt
  callback();
}
function callback(param1, param2, ...) {
  // do stuff here
  console.log('callback activated!');
}
// Callback aufrufen:
// Hier wird nur die Referenz zur Callback-Funktion übergeben.
// Ausgeführt wird sie in der callbackAcceptingFunction.
callbackAcceptingFunction(callback);

Die callback Funktion kann beliebig viele Argumente annehmen. Anzahl, Datentyp und Wert der Argumente werden von der callbackAcceptingFunction bestimmt.

function callbackAcceptingFunction(callback) {
  callback('Hello', 'Pedro');
}

function callback(arg1, arg2) {
  console.log(`${arg1} ${arg2}!`);
}

callbackAcceptingFunction(callback);

Wenn man eine callback Funktion als Argument einer callbackAcceptingFunction übergibt, gibt man nur die Referenz auf die callback Funktion weiter. Sie wird noch nicht ausgeführt. Ausgeführt wird sie erst, wenn die callbackAcceptingFunction aufgerufen wird.