Funktionsausdrücke

Funktionsausdrücke sind Funktionen, die dort erstellt werden, wo ein Ausdruck erwartet wird. Funktionsausdrücke sind häufig Werte, die einer Variablen zugewiesen sind. Obwohl für eine Funktionsdeklaration immer ein Name erforderlich ist, können Sie Funktionsausdrücke verwenden, um anonyme Funktionen zu erstellen. Dazu lassen Sie die ID weg und folgen dem Schlüsselwort function mit einem Klammernpaar mit optionalen Parametern:

const myVariable = function() { };

Sie können diese Funktionsausdrücke dann mithilfe der Kennung der Variablen aufrufen:

const myVariable = function() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

Sie können auch Funktionsausdrücke verwenden, um benannte Funktionen mit einer ähnlichen Syntax wie Funktionsdeklarationen zu erstellen:

const myVariable = function myFunction() {
    console.log( "This is my function." );
};

myVariable();
> "This is my function."

Im Gegensatz zu Funktionsdeklarationen kann auf einen benannten Funktionsausdruck jedoch nur innerhalb der Funktion selbst mit dem Funktionsnamen zugegriffen werden:

const myVariable = function myFunction() {
  console.log( `I'm a ${ typeof myFunction }.`);
};

typeof myFunction;
> "undefined"

typeof myVariable;
> "function"

myVariable();
> "I'm a function."

Namen, die mit Funktionsausdrücken verknüpft sind, sind vor allem für die Fehlerbehebung hilfreich. Ein benannter Funktionsausdruck kann sich auch rekursiv aufrufen, obwohl dies in der modernen Entwicklung kein sehr häufiger Anwendungsfall ist:

const myVariable = function myFunction() {
    console.log( "One second elapsed." );
    setTimeout( myFunction, 1000 );
};

setTimeout( myVariable, 1000 );
> "One second elapsed."
> "One second elapsed."
> "One second elapsed."
…

Pfeilfunktionsausdrücke

Pfeilfunktionsausdrücke (oft als „Pfeilfunktionen“ oder, selten auch als „Lambda-Funktionen“ bezeichnet) wurden in ES6 eingeführt, um eine prägnante Syntax zum Erstellen anonymer Funktionsausdrücke mit bestimmten Verhaltensweisen zu bieten.

Sie können überall dort, wo ein Ausdruck erwartet wird, eine Pfeilfunktion erstellen, z. B. als Wert, der einer Variablen zugewiesen ist. In der gebräuchlichsten Form besteht eine Pfeilfunktion aus einem Paar übereinstimmender Klammern mit null oder mehr Parametern, einem Pfeil aus einem Gleichheitszeichen und einem Größer-als-Zeichen (=>) und einem Paar übereinstimmender geschweiften Klammern, die den Funktionstext enthalten:

const myFunction = () => {};

Unter bestimmten Bedingungen können Sie die Syntax noch kompakter gestalten. Wenn Sie nur einen Parameter verwenden, können Sie die Anfangsklammer weglassen:

const myFunction = myParameter => {};

Wenn der Funktionstext den Wert eines einzelnen Ausdrucks zurückgeben soll, müssen Sie den Funktionstext weder in geschweifte Klammern noch in das Keyword return setzen:

const myFunction = () => 2 + 2

myFunction()
> 4

Pfeilfunktionen sind insofern einmalig, als sie keinen eigenen Kontext für die Werte arguments oder this haben. Stattdessen übernehmen sie beide Werte aus der lexisch einschließenden Umgebung der Pfeilfunktion – der nächstgelegenen Funktion, die diese Kontexte bereitstellt.

function myParentFunction() {
    this.myProperty = true;
    let myFunction = () => {
            console.log( this );
    }
    myFunction();
};

let myInstance = new myParentFunction();
> Object { myProperty: true }

Pfeilfunktionen aufrufen

Pfeilfunktionen binden Argumente nicht auf dieselbe Weise wie andere Arten von Funktionen. Ein arguments-Objekt im Text einer Pfeilfunktion übernimmt seinen Wert von der nächstgelegenen lexisch einschließenden Umgebung dieser Pfeilfunktion:

function myFunction() {
    let myArrowFunction = () => {
            console.log( arguments[ 0 ] );
    }
    myArrowFunction( true );
};

myFunction( false );
> false

In diesem Beispiel ruft eine äußere Funktion, die mit dem Argument false aufgerufen wird, eine innere Pfeilfunktion mit dem Argument true auf. Da das arguments-Objekt in der Pfeilfunktion in die Bindung in der äußeren Funktion aufgelöst wird, protokolliert die innere Funktion die false der äußeren Funktion.

Wenn kein arguments-Objekt aus dem übergeordneten Kontext übernommen werden kann, ist das arguments-Objekt der Pfeilfunktion nicht definiert. Der Versuch, darauf zuzugreifen, führt zu einem Fehler:

let myArrowFunction = () => {
    console.log(arguments);
};
myArrowFunction( true );
> Uncaught ReferenceError: arguments is not defined

Sofort aufgerufene Funktionsausdrücke (IIFE)

Ein sofort aufgerufener Funktionsausdruck (IIFE), auch manchmal als "selbstausführende anonyme Funktion" bezeichnet, ist ein Funktionsausdruck, der sofort aufgerufen wird, wenn er definiert ist. Eine IIFE verwendet einen Funktionsausdruck, der dadurch erzeugt wird, dass die Funktion in einen Gruppierungsoperator eingeschlossen wird. Ein zweites übereinstimmendes Klammernpaar ruft dann die Funktion auf, entweder direkt nach der Funktionsdefinition selbst oder direkt nach dem Gruppierungsoperator. Wenn Sie eine Standardfunktion verwenden, gibt es keinen praktischen Unterschied zwischen den beiden Ansätzen:

(function() {
    console.log( "IIFE.")
    }
)();
> "IIFE."

(function() {
    console.log( "IIFE.")
    }
());
> "IIFE."

Im ersten Beispiel wird der gruppierte Funktionsausdruck aufgerufen. Im zweiten Beispiel wird eine Funktionsdeklaration innerhalb der Gruppierungsoperatoren aufgerufen. Das Endergebnis wird dann als gruppierter Ausdruck ausgewertet. Das Ergebnis ist in beiden Fällen das gleiche.

Es gibt jedoch einen Unterschied, ob Ihre IIFE eine Pfeilfunktion ist. In diesem Fall müssen sich die Klammern zum Aufrufen der Funktion außerhalb der Gruppierungsoperatoren befinden, da eine Pfeilfunktion selbst kein Ausdruck ist, aber in einem Kontext erstellt werden muss, in dem ein Ausdruck erwartet wird. Wenn Sie versuchen, die Pfeilfunktion innerhalb des Bereichs der Gruppierungsoperatoren aufzurufen, wird eine Pfeilfunktion aufgerufen, die im Kontext eines Ausdrucks noch nicht erstellt wurde:

( () => {
    console.log( "IIFE." );
}() );
> Uncaught SyntaxError: missing ) in parenthetical

Da die Gruppierungsoperatoren einen Ausdruck erwarten, wird die darin enthaltene Pfeilfunktion definiert. So können die darauffolgenden Klammern den gruppierten Ausdruck aufrufen:

( () => {
    console.log( "IIFE." );
} )();
> "IIFE."

Legacy-Anwendungen, häufig verwendete IIFEs zur Verwaltung des Umfangs, insbesondere um eine Verschmutzung des globalen Geltungsbereichs durch funktionsbezogene Variablen und Funktionsdeklarationen zu vermeiden. Vor der Einführung des Blockumfangs in ES6 war es üblich, ein gesamtes Skript in eine IIFE zu verpacken, um eine versehentliche Verschmutzung des globalen Geltungsbereichs zu verhindern.

Wissen testen