Pfeilfunktionen

JavaScript hat noch eine kürzere Art, Funktionen zu schreiben: Pfeilfunktionen (englisch arrow functions). Du wirst ihnen in fast jedem JavaScript-Programm begegnen, und in der Lektion über Array-Methoden benutzt du sie selbst. Hier ist dieselbe Funktion auf beide Arten geschrieben. Zuerst so, wie du es kennst:

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

Und als Pfeilfunktion:

const addiere = (a, b) => a + b;

Schauen wir uns die Pfeilfunktion Stück für Stück an:

• const addiere =: Eine Pfeilfunktion wird ohne Namen geschrieben, deshalb speichern wir sie in einer Variable, und die Funktion heißt dann wie die Variable. In JavaScript ist eine Funktion ein Wert, genau wie Zahlen und Text, und kann daher in einer Variable gespeichert werden. Wir benutzen const, weil die Variable immer dieselbe Funktion enthalten wird.
• (a, b): die Parameter, wie üblich in runden Klammern.
• =>: der Pfeil, ein Gleichheitszeichen gefolgt von einem Größer-als-Zeichen. Er trennt die Parameter vom Rumpf der Funktion.
• a + b: der Rumpf. Wenn nach dem Pfeil keine geschweiften Klammern stehen, gibt die Funktion den Wert nach dem Pfeil von selbst zurück, ohne return.

Eine Pfeilfunktion rufst du wie jede andere Funktion auf:

const addiere = (a, b) => a + b;

console.log(addiere(2, 3));

Das gibt aus:

5

Wenn eine Funktion mehrere Zeilen braucht, setze ihren Rumpf in geschweifte Klammern, wie bei einer mit function geschriebenen Funktion. Mit geschweiften Klammern musst du return allerdings selbst schreiben:

const rechteckFlaeche = (breite, hoehe) => {
    const flaeche = breite * hoehe;
    return flaeche;
};

console.log(rechteckFlaeche(4, 3));

Das gibt aus:

12

Beachte das Semikolon nach der schließenden }. Die ganze Funktion ist der Wert einer mit const erstellten Variable, und diese Anweisung endet mit einem Semikolon, genau wie const preis = 45;.

Achte auf zwei häufige Fehler:

• Geschweifte Klammern ohne return. const addiere = (a, b) => { a + b }; berechnet die Summe, gibt sie aber nicht zurück, deshalb liefert addiere(2, 3) den Wert undefined.
• Die Funktion oberhalb der Zeile aufrufen, die sie erstellt. Solange diese Zeile nicht ausgeführt wurde, enthält die Variable addiere die Funktion nicht, und du bekommst den Fehler ReferenceError: Cannot access 'addiere' before initialization.

Du triffst vielleicht auch auf eine Pfeilfunktion mit einem Parameter, die ohne Klammern geschrieben ist, etwa zahl => zahl * 2. Sie bedeutet dasselbe wie (zahl) => zahl * 2.