JavaScript – Anonyme Funktionen

Eine anonyme Funktion versteckt ihre Variablen

Anonyme Funktionen sind Funktionen ohne Namen, die sofort ausgeführt werden.

Wenn Funktionen sehr einfach sind, verbessern eine anonyme Funktion die Lesbarkeit. Anonyme Funktionen halten den Code besser zusammen und erzeugen einen abgeschirmten Bereich, ihren Scope.

Sind Variablen traditionell mit dem Schlüsselwort var außerhalb von Funktionen definiert, werden sie ohne Rücksicht und ohne Skrupel in das globale Objekt gepumpt. Wird dann ein weiteres Skript geladen, das denselben Variablennamen benutzt, überschreibt das Script die erste Variable und schon stehen wir mitten in einer klassischen Fehlerquelle.

Hingegen leben Variablen, die in Funktionen definiert werden, in ihrem eigenen abgeschirmten Raum. Vor dem Auftritt des neuen Schlüsselworts let waren anonyme Funktionen der einfachste Schutz vor doppelten Variablennamen und versehentlichem Überschreiben.

Funktions-Deklarationen

ECMAScript gibt ein ganzes Spektrum von Techniken für die Definition von Funktionen vor:

Deklaration
function sum(a, b) {
    return a + b;
}
Anonyme Funktion oder Funktions-Ausdruck
let sum = function(a, b) { 
   return a + b; 
}
Selbst-aufrufende Funktion
(function(a, b) { 
   return a + b; 
})();
Konstruktor-Methode
let sum = new Function('a','b', 'return a + b');
console.log ( "sum " + sum(10, 20) );
Arrow Function
var absValue = (number) => {  
  if (number < 0) {
    return -number;
  }
  return number;
}
console.log (absValue(-10)); // 10
console.log (absValue(5));   // 5

Anonyme Funktion oder Funktions-Ausdruck

Eine anonyme Funktion hat Zugriff auf jede Variable, die bei der Definition der Funktion sichtbar war, einschließlich lokaler Variablen. Das macht anonyme Funktionen so schön einfach.

Während eine Funktion meist einige Zeilen weiter oben oder unten deklariert wird und erst durch den Aufruf ausgeführt wird, wertet Javascript anonyme Funktionen direkt an Ort und Stelle aus.

let summe  = 500; 
let betrag = 20;
let satz   = 19;

let mytwocents = function (betrag, satz) {
   let mwst = betrag * satz / 100;
   let summe = betrag + mwst;
   return summe;
}

console.log ('mytwocents ' + mytwocents(20,19) + ' summe ' + summe);
mytwocents 23.8 summe 500

Anonyme Funktionen ersetzen den Funktionsaufruf, werden aber ansonsten genauso notiert wie normale Funktionen: Zwischen der öffnenden und schliessenden geschweiften Klammer stehen dieselben Anweisungen, die auch in der normalen Funktion gestanden hätten. Da sie innere Funktionen sind, gewähren sie Anweisungen außerhalb der Funktion, in der sie liegen, keinen Zugriff. Variablen innerhalb der Funktion können nicht von außen überschrieben werden.

In der Verarbeitung von Events werden häufig anonyme Funktionen verwendet:

document.getElementById('foo').onclick = function () {
}

Anonyme Funktionen als Parameter von Funktionen kennen wir ebenfalls von den Event Handlern addEventListener.

window.addEventListener ("click", function () {
});

Es geht sogar ohne Zuweisung:

(function () {
	let autor = 'Pratchett';
	let titel  = 'Schöne Scheine';
	let buch = [autor, titel];
	console.log ("buch " + buch.join(','));
})();

Diese Schreibweise erzeugt eine literale Funktion, der kein Name zuwiesen wird. Die umfassenden runden Klammern führen dazu, dass die Funktion sofort ausgeführt wird – so als würde die Funktion an dieser Stelle aufgerufen. Darum spricht man auch von selbst ausführenden Funktionen (besser wäre die Bezeichnung »sofort ausgeführte Funktion«).

Bei der Ausführung erzeugt die Funktion drei Variablen, formatiert sie und gibt sie aus. Sobald die Funktion abgearbeitet ist, werden die Variablen vernichtet und das globale Objekt bleibt unverändert.

Mit Hilfe von anonymen Funktionen schützt sich das Script vor Überschneidungen und Kollision mit anderen Scripten. Aus diesem Grund gehören anonyme und sich selbst ausführende Funktionen heute zu den wichtigen Konventionen der professionellen Programmentwicklung.

Nachteile anonymer Funktionen

  • Testen und debuggen von anonymen Funktionen ist nicht einfach,
  • sie können nicht mehrfach verwendet werden,
  • ohne Namen geben anonyme Funktionen auf dem ersten Blick keine Beschreibung ihrer Aufgabe,
  • Strukturverlust, der Code kann aufgemischt wirken.
rows[i].onmouseover = function() { if (/small/.test( this.parentNode.parentNode.className )) { this.style.backgroundColor = "silver"; } } rows[i].onmouseout = function() { if (/small/.test( this.parentNode.parentNode.className )) { this.style.backgroundColor = "white"; } }