JavaScript – Anonyme Funktionen

Schutz vor doppelten Variablennamen

Die Deklaration von Variablen mit dem Schlüsselwort var außerhalb von Funktionen hob die Variable ohne Rücksicht und Skrupel in das globale window-Objekt. Ein weiteres Skript, das denselben Variablennamen benutzt, überschreibt die erste Variable und schon versinken wir in einer Fehlerquelle.

// Deklaration ohne var, let oder const
var init = 42;

Variablen, die in Funktionen definiert werden, leben hingegen in ihrem eigenen abgeschirmten Raum. Anonyme Funktionen ermöglichten schon früh das Kapseln von Variablen in »Closures«. Vor dem Auftritt von let und const waren anonyme Funktionen der einfachste Schutz vor doppelten Variablennamen und versehentlichem Überschreiben.

(function() {
    var init = …

})();

Auch wenn JavaScript heute die Deklaration von Variablen mit let und const bevorzugt, haben anonyme Funktionen weiterhin ihre Vorteile:

• Der Skript-Code wird kompakter
• Sie erleichtern Callbacks und den Umgang mit Event Handlern
• Die Bindung von this ist einfacher

Funktions-Deklarationen

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

function sum(a, b) {
    return a + b;
}

let sum = function(a, b) { 
   return a + b; 
}

(function(a, b) { 
   return a + b; 
})();

let absValue = (number) => {  
  if (number < 0) {
    return -number;
  }
  return number;
}
console.log (absValue(-10)); // 10
console.log (absValue(5));   // 5

const sum = new Function('a','b', 'return a + b');
console.log ( "sum " + sum(10, 20) );

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 deklariert wird und erst durch den Aufruf ausgeführt wird, wertet Javascript anonyme Funktionen direkt an Ort und Stelle aus.

const summe  = 500; 
const betrag = 20;
const satz   = 19;
//console.log('summe ' + summe);
const mytwocents = function (betrag, satz) {
   const mwst = betrag * satz / 100;
   const summe = betrag + mwst;
   return summe;
}

console.log (`mytwocents ${mytwocents(20,19)} – Summe ${summe}`);

[Log] 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 () {
	const autor = 'Pratchett';
	const titel  = 'Schöne Scheine';
	const 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.

Anonyme Funktionen für Callbacks und Event Handler

Weil Callback-Funktionen und Event-Handler nur an einer Stelle benötigt werden, brauchen Sie keine Namen.

setTimeout ( function () {
	console.log ("Komm in zwei Sekunden noch einmal vorbei")
}, 2000);

btn.addEventListener ("click", function () {
	console.log ("Und es hat Klick gemacht");
})

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.