Funktionsreferenz / Anonyme- & Callbackfunktion

<script>
function mfunc() {
	alert("Button Klick");
	}
document.getElementById("b1").onclick = mfunc;
</script>

Videotutorial

Referenz auf eine Funktion & Funktionsaufruf

Es gibt Fälle, in denen anstatt eines Funktionsaufrufs eine Referenz auf eine Funktion verlangt wird.

function high5(){return 5;}
var a = high5;

Der Variablen a wurde eine Referenz auf die Funktion high5 übergeben. Das ist kein Funktionsaufruf, sondern vielmehr ein Zeiger auf die Funktion. Der Wert von a ist die Funktion. Überprüfe das Beispiel mit
console.log(a);

In JavaScript sind Funktionen sogenannte "First-Class Citizens". Das bedeutet: Eine Funktion ist ein ganz normaler Wert, genau wie eine Zahl, ein String oder ein Objekt.

Wenn du den Namen einer Funktion ohne Klammern schreibst, meinst du nicht: "Führe das jetzt aus!", sondern: "Hier ist das Paket (die Referenz), nimm es und öffne es später, wenn du es brauchst."

Wo wird eine Funktions-Referenz (Callback) noch erwartet?

1. Events

• btn.addEventListener("click", myFunction);
• btn.onClick = myFunction;

2. Arrays: Weitere Methoden

• map() 'Die Verwandlung-Maschine' Elemente verändern

• filter() 'Der Türsteher' das digitale Sieb

• find(): Sucht das erste Element, auf das die Bedingung zutrifft.

• forEach() : Führt eine Funktion für jedes Element aus (wie eine moderne for-Schleife).

• some() / every(): Prüfen, ob manche oder alle Elemente eine Bedingung erfüllen.

• sort(): Du kannst eine eigene Funktion übergeben, die bestimmt, wie sortiert werden soll (z. B. nach Preis oder Alphabet).

3. Zeitsteuerung

• setInterval(funktion, zeit): Führt die Funktion immer wieder im Abstand von X Millisekunden aus (super für Uhren oder Animationen).

4. Promises & Asynchronität

Wenn du Daten von einem Server lädst (z. B. mit fetch), arbeitest du mit:

• .then(funktion): "Wenn die Daten da sind, führe diese Funktion aus."

• .catch(funktion): "Wenn ein Fehler passiert, führe jene Funktion aus."

Der Unterschied: Wert vs. Aufruf

Um es visuell zu verdeutlichen, hier ein Vergleich, wie du die Funktion "übergibst":

Der Spezialfall: Higher-Order Functions

Setzt man eine Referenz auf eine Funktion, werden die Klammern nicht notiert. Hat man jedoch eine Higher Order Funktion, so kann man durchaus Klammern notieren und Parameterwerte zuweisen. Das Besondere ist, dass sie als Rückgabe eine Referenz auf eine anonyme Funktion setzt. Man verpackt die Referenz in eine andere Funktion.

Wenn eine Funktion eine andere Funktion zurückgibt, nennt man das eine Higher-Order Function. In diesem Fall ist der Aufruf mit Klammern im EventListener plötzlich absolut korrekt und sogar gewollt.

Ein Beispiel zur Verdeutlichung:

Stell dir vor, du hast eine Funktion, die "Lösch-Funktionen" für verschiedene Kategorien erstellt:

function createDeleteHandler(kategorie) {
  // Diese Funktion gibt eine NEUE Funktion zurück
  return function(e) {
  console.log(`Lösche Element aus der Kategorie: ${kategorie}`);
  };}
  // Hier ist der Aufruf MIT Klammern richtig: 
  list.addEventListener("click", createDeleteHandler("Obst"));
      

Was passiert hier technisch?

1. JavaScript sieht createDeleteHandler("Obst") und führt es sofort aus.

2. Diese Funktion "spuckt" eine neue, anonyme Funktion aus (das "Essen").

3. Diese neue Funktion wird dann als Referenz an den EventListener übergeben.

Noch ein Beispiel

Im folgenden Beispiel ist getInfo() eine Callbackfunktion. Die Rückgabe ist die anonyme Funktion function(){}. Wir können anstatt einer Referenz eine anonyme Funktionen dem Eventhandler zuweisen.

• myAlert(a) und getInfo(a) sind Funktionen mit Parameter.
• getInfo() gibt eine anonyme Funktion zurück
• die anonyme Funktion ruft alert() auf
• Das Argument wird von außen (getInfo) nach innen (alert) weitergereicht

<script>
function myAlert(a){
alert(a);
}

function getInfo(b){
return function(){
myAlert(b);
} 
}

document.getElementById("b3").onclick = getInfo("Halli Hallo wie gehts denn so.");
</script>

Zusammenfassung

Man kann einen Funktionsaufruf in den EventListener schreiben, solange er in eine andere Funktion eingebettet ist. Die äußere Funktion dient als "Zeitkapsel", die den Aufruf im Inneren bis zum Klick-Event aufbewahrt.

Warum macht man das selten am Anfang?

Man nennt dieses Konzept oft Currying oder Closures. Es ist sehr elegant, aber für Einsteiger oft verwirrend, weshalb man meistens sagt: "Lass die Klammern weg!".

Callback Beispiel siehe hier

Ich habe noch einen Tipp in AS3 . siehe hier und es gibt noch das oben erwähnte Videotutorial.

Javascript Tipps