Javascript Function Expression / Funktions-Ausdruck

Javascript Funktionen ohne Namen, namenslos, noname Lohengrin und Schwan als Anspielung auf "Nie sollst du mich befragen"

Ein Funktions-Ausdruck oder function expression sieht fast genauso aus wie eine normale Funktion, ist aber ein Objekt erster Ordnung und kann als Argument in einer Funktion übergeben werden, der Rückgabewert von Funktionen sein, kann einer Variablen zugewiesen werden und in einem Objekt oder Array gespeichert werden.

Vor allem ist ein Funktions-Ausdruck außerhalb seines Scopes oder Gültigkeitsbereichs nicht sichtbar – die Javascript-Version von private.

Javascript kennt vier Schreibweisen für Funktionen:

// Funktions-Anweisung oder function statement
function foo() { return 5; }

// Anonymer Funktions-Ausdruck oder anonymous function expression
let foo = function() { return 5; }

// Funktions-Ausdruck oder function expression
let foo = function foo() { return 5; }

// IIFE (Immediately Invoked Function Expression) beginnen mit "("
(function () {
    return 5;
} ());

»Normale« Funktionen

Normale Funktionen (Funktions-Anweisung, Funktions-Deklaration oder function statement), so wie sie Programmierer von vielen Programmiersprachen kennen, folgen einer einfachen Syntax:

  1. Eine »normale« Funktion beginnt mit dem Schlüsselwort function und muss einen Namen haben,
  2. kann null oder mehr Parameter in runden Klammern haben,
  3. der Body wird in geschweifte Klammern gesetzt und enthält null oder mehr Anweisungen.
function brutto (betrag, satz) {
   let mwst = betrag * satz / 100;
   let summe = betrag + mwst;
   return summe;
}

let summe = brutto (betrag, satz);

Funktion einer Variablen zuweisen

In Javascript lassen sich Funktionen auch anders definieren. Wenn das Ergebnis einer Funktion direkt einer Variablen zugewiesen wird, haben wir einen Funktions-Ausdruck oder Function Expression.

Auf den ersten Blick scheint der Unterschied zwischen einer Funktions-Anweisung und einem Funktionsausdruck eher homöopathischer Natur zu sein, aber ein Funktions-Ausdruck muss keinen Namen haben. Alle anderen Punkte bleiben gleich.

        kein Name ---+
                     |
                     V
let brutto = function (betrag, satz) {
   let mwst = betrag * satz / 100;
   let summe = betrag + mwst;
   return summe;
}

Javascript-Funktionen müssen keinen Namen haben

Hat die Funktion einen Namen, kann sie erneut aufgerufen werden, was nicht immer wünschenswert ist. Diese Form der anonymen Funktion stellt sicher, dass sie nur einmal ausgeführt werden kann.

Funktions-Ausdrücke können anonym sein oder einen Namen haben.

// Anonymer Funktions-Ausdruck
let a = function() {
    return 3;
}
 
// Funktions-Ausdruck mit Namen
let a = function foo() {
    return 3;
}
 
// Selbstaufrufender Funktions-Ausdruck
(function sagWas() {
    alert("Hallo!");
})();

Auf jeden Fall: Der Name der Funktion – wenn sie überhaupt einen Namen hat – ist außerhalb ihres Scopes (Geltungsbereich) nicht sichtbar.

Auswertung von Function Expressions

Die einfache Funktions-Anweisung function foo () { … } war zuerst da. Der Funktions-Ausdruck kam erst später dazu. Die Funktions-Anweisung ist tatsächlich die Kurzschreibweise für die Deklaration einer Variablen und die Zuweisung eines Wert (dem Rückgabewert der Funktion).

Hinter den Kulissen wird zur Laufzeit aus

function foo() {}
let foo = function foo () {};

Hinter den Kulissen der fast identischen Schreibweisen:

  1. Der Browser lädt Funktions-Anweisungen (function myfunc() { … }), bevor das Script ausgeführt wird.
  2. Funktions-Ausdrücke (let myVal = function() { … }) werden erst geladen, wenn der Interpreter die entsprechende Zeile im Script anspricht.
  3. Wenn Funktionen als Funktions-Ausdruck geschrieben werden, kann sie erst aufgerufen werden, nachdem der Funktions-Ausdruck definiert wurde.
alert(foo()); // Wirft einen Fehler!
let foo = function() { return 5; }
TypeError: foo is not a function. (In 'foo()', 'foo' is undefined)

Eine banale Regel, um Funktions-Anweisungen von Funktions-Ausdrücken zu unterscheiden ist:

Wenn das erste Wort function ist, dann ist es eine Funktions-Anweisung, sonst ist es ein Funktions-Ausdruck.

Ein Funktions-Ausdruck oder Function Expression erzeugt eine Instanz eines Funktions-Objekts.

Funktionen als Objekte erben von Function.prototype.

L function expression