Arrow Functions

Arrow Functions sind eine zweite Schreibweise für dasselbe. Du wirst sie in fremdem Code überall sehen, spätestens ab Abschnitt 6, wo map und filter fast immer eine davon bekommen.

01 / 04Von lang nach kurz

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// Schritt 0: die lange Fassung.
const lang = function (a, b) {
  return a + b;
};

// Schritt 1: function weg, Pfeil hinter die Klammern.
const mitPfeil = (a, b) => {
  return a + b;
};

// Schritt 2: geschweifte Klammern und return weg, weil der Rumpf
// aus einem einzigen Ausdruck besteht.
const kurz = (a, b) => a + b;

console.log(lang(2, 3), mitPfeil(2, 3), kurz(2, 3));

Die Verwandlung geht in zwei Handgriffen.

Erster Handgriff: Das Wort function fällt weg, dafür kommt ein Pfeil => zwischen die Klammern und den Block. Sonst bleibt alles stehen.

Zweiter Handgriff: Besteht der Rumpf aus genau einem Ausdruck, dürfen die geschweiften Klammern und das return weg. Der Ausdruck wird dann automatisch zurückgegeben.

Der zweite Handgriff ist der eigentliche Gewinn. Aus vier Zeilen wird eine, und bei einer Funktion wie (a, b) => a + b sieht man auf einen Blick alles, was sie tut.

Wie grundlegend der Unterschied ist, zeigt eine Aufzeichnung im Reiter Debug. Die ersten beiden Fassungen bekommen je einen Schritt für ihr return a + b, die kurze bekommt keinen. Das ist kein Aussetzer des Werkzeugs, sondern die Auskunft selbst: Der Reiter meldet vor jeder Anweisung, und in der kurzen Fassung steht keine mehr, sondern nur noch ein Ausdruck. Genau das ist der zweite Handgriff. Wenn du also später eine kurze Pfeilfunktion aufzeichnest und ihr Inneres nicht auftaucht, weißt du warum.

Beachte das Semikolon am Ende. Eine Arrow Function wird meistens einer Konstanten zugewiesen, und diese Zuweisung ist eine Anweisung wie jede andere.

02 / 04Welche Klammern wann

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// Zwei Parameter: die runden Klammern müssen stehen.
const summe = (a, b) => a + b;

// Genau ein Parameter: sie dürfen weg. Beides ist erlaubt.
const quadratMit = (n) => n * n;
const quadratOhne = n => n * n;

// Kein Parameter: ein leeres Klammerpaar ist Pflicht.
const wuerfel = () => 4;

console.log(summe(1, 2), quadratMit(5), quadratOhne(5), wuerfel());

// Mehr als eine Anweisung im Rumpf: geschweifte Klammern und
// return sind wieder Pflicht.
const bewerte = (punkte) => {
  const prozent = (punkte / 20) * 100;
  return `${prozent} Prozent`;
};

console.log(bewerte(15));

Zwei verschiedene Klammerpaare, zwei verschiedene Regeln, und beide werden gern durcheinandergebracht.

Die runden Klammern um die Parameter dürfen nur bei genau einem Parameter weg. Bei zwei oder mehr müssen sie stehen, bei null erst recht: () => 4 braucht das leere Paar, sonst wüsste niemand, wo die Funktion anfängt.

Die geschweiften Klammern um den Rumpf dürfen nur weg, wenn der Rumpf ein einziger Ausdruck ist. Sobald du eine Zwischenvariable brauchst oder zwei Dinge tust, kommen sie zurück, und mit ihnen das return.

Ob man die runden Klammern bei einem Parameter setzt, ist Geschmackssache. Dieser Kurs setzt sie immer, weil dann alle Funktionen gleich aussehen und beim Hinzufügen eines zweiten Parameters nichts nachzutragen ist.

03 / 04Die Falle mit dem Objekt

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// Sieht richtig aus und liefert undefined: JavaScript hält die
// geschweiften Klammern für einen Block, nicht für ein Objekt.
// Das wert: darin ist dann eine Sprungmarke und kein Schlüssel.
const punktFalsch = (x) => { wert: x };

// Mit runden Klammern darum ist es eindeutig ein Objekt.
const punktRichtig = (x) => ({ wert: x });

console.log("Ohne Klammern:", punktFalsch(5));
console.log("Mit Klammern:", punktRichtig(5));

// Mit zwei Eigenschaften kommt nicht einmal ein undefined heraus:
// { x: x, y: y } ergibt als Block gar keinen gültigen Satz, und
// dieser Syntaxfehler nimmt nach Lektion 1.4 die ganze Datei mit.
// Deshalb steht die Zeile hier nur als Kommentar. Nimm die
// Schrägstriche einmal weg und schau in die Console.
// const punktZweiFelder = (x, y) => { x: x, y: y };

// Heißen Eigenschaft und Wert gleich, reicht der Name einmal.
// Das ist dieselbe Rückgabe, nur kürzer geschrieben.
const punktKurz = (x, y) => ({ x, y });

console.log("Kurzschreibweise:", punktKurz(2, 5));

Hier ist die Stelle, an der die Kurzschreibweise beißt.

Willst du ein Objekt zurückgeben, stehen dort geschweifte Klammern. Genau die geschweiften Klammern, die sonst den Rumpf umschließen. JavaScript kann die zwei nicht auseinanderhalten und entscheidet sich für den Rumpf.

(x) => { wert: x } ist deshalb kein Objekt, sondern ein Block. Das wert: darin liest JavaScript als Sprungmarke, das x als Ausdruck, dessen Ergebnis niemand auffängt, und die Funktion liefert undefined.

Die Lösung sind runde Klammern um das Objekt: (x) => ({ wert: x }). Damit steht dort eindeutig ein Ausdruck, und der wird zurückgegeben.

Bei zwei Eigenschaften wird es noch unangenehmer. (x, y) => { x: x, y: y } geht als Block gar nicht mehr auf, und statt eines stillen undefined bekommst du einen SyntaxError. Nach Lektion 1.4 heißt das: die ganze Datei läuft nicht, auch die Zeilen darüber nicht. Im Beispiel steht diese Zeile deshalb auskommentiert, und es lohnt sich, die Schrägstriche einmal wegzunehmen.

Das ist einer der wenigen Fälle, in denen JavaScript wirklich mehrdeutig ist und du nachhelfen musst. Der letzte Block zeigt nebenbei noch eine Abkürzung: Heißen Eigenschaft und Variable gleich, reicht der Name einmal. Um Objekte selbst geht es in Abschnitt 7.

04 / 04Wenn nichts zurückkommt

<h1>Ausgabe</h1>
<p>Was dieses Beispiel tut, steht in der Console.</p>

// Klammern gesetzt, return vergessen. Der Rumpf rechnet, wirft das
// Ergebnis weg und liefert undefined. Kein Fehler, keine Warnung.
const verdoppelnStill = (n) => { n * 2 };

// Ohne Klammern wird der Ausdruck automatisch zurückgegeben.
const verdoppelnKurz = (n) => n * 2;

// Mit Klammern und return ebenfalls richtig, nur länger.
const verdoppelnLang = (n) => {
  return n * 2;
};

console.log(verdoppelnStill(21), verdoppelnKurz(21), verdoppelnLang(21));

Der häufigste Anfängerfehler mit Arrow Functions ist die Mischung aus beidem: geschweifte Klammern gesetzt und return vergessen.

Der Rumpf rechnet dann brav, wirft das Ergebnis weg und liefert undefined. Es gibt keine Fehlermeldung, denn die Zeile ist völlig gültig. Sie tut nur nichts Sichtbares.

Merk dir den Zusammenhang als ein Paar: keine geschweiften Klammern, kein return. Geschweifte Klammern, dann return. Alles andere ist ein stiller undefined-Lieferant.

Zum Schluss ein Unterschied, der hier noch nicht sichtbar ist: Arrow Functions verhalten sich beim Schlüsselwort this anders als normale Funktionen. Das ist der Grund, warum es beide Schreibweisen noch gibt und nicht nur die kürzere. Zeigen lässt es sich erst mit Objekten, deshalb steht es in Lektion 7.3.