Pfeilfunktionen, die Grundlagen

Es gibt eine weitere sehr einfache und prägnante Syntax zum Erstellen von Funktionen, die oft besser ist als Funktionsausdrücke.

Man nennt es „Pfeilfunktionen“, weil es so aussieht:

 let func = (arg1, arg2, ..., argN) => expression;

Dadurch wird eine Funktion func erstellt, die die Argumente arg1..argN akzeptiert, dann den expression auf der rechten Seite anhand ihrer Verwendung auswertet und ihr Ergebnis zurückgibt.

Mit anderen Worten, es ist die kürzere Version von:

 let func = function(arg1, arg2, ..., argN) {
  Rückgabeausdruck;
};

Sehen wir uns ein konkretes Beispiel an:

 sei sum = (a, b) => a + b;

/* Diese Pfeilfunktion ist eine kürzere Form von:

sei sum = function(a, b) {
  gib a + b zurück;
};
*/

alarm( sum(1, 2) ); // 3

Wie Sie sehen können, bedeutet (a, b) => a + b eine Funktion, die zwei Argumente namens a und b akzeptiert. Bei der Ausführung wertet es den Ausdruck a + b aus und gibt das Ergebnis zurück.

• Wenn wir nur ein Argument haben, können Klammern um Parameter weggelassen werden, was das Ganze noch kürzer macht.

  Zum Beispiel:

   sei double = n => n * 2;
  // ungefähr das Gleiche wie: let double = function(n) { return n * 2 }
  
  alarm( double(3) ); // 6

• Wenn keine Argumente vorhanden sind, sind Klammern leer, müssen aber vorhanden sein:

   let sayHi = () => warning("Hallo!");
  
  sayHi();

Pfeilfunktionen können auf die gleiche Weise wie Funktionsausdrücke verwendet werden.

Um beispielsweise eine Funktion dynamisch zu erstellen:

 let age = prompt("Wie alt sind Sie?", 18);

let willkommen = (Alter < 18) ?
  () => alarm('Hallo!') :
  () => warning("Grüße!");

Willkommen();

Pfeilfunktionen mögen auf den ersten Blick ungewohnt und wenig lesbar erscheinen, doch das ändert sich schnell, wenn sich das Auge an die Struktur gewöhnt.

Sie sind sehr praktisch für einfache einzeilige Aktionen, wenn wir einfach zu faul sind, viele Wörter zu schreiben.

Mehrzeilige Pfeilfunktionen

Die Pfeilfunktionen, die wir bisher gesehen haben, waren sehr einfach. Sie nahmen Argumente von der linken Seite von => , werteten sie aus und gaben den Ausdruck auf der rechten Seite zurück.

Manchmal benötigen wir eine komplexere Funktion mit mehreren Ausdrücken und Anweisungen. In diesem Fall können wir sie in geschweifte Klammern einschließen. Der Hauptunterschied besteht darin, dass geschweifte Klammern einen return erfordern, um einen Wert zurückzugeben (genau wie bei einer regulären Funktion).

So was:

 let sum = (a, b) => { // die geschweifte Klammer öffnet eine mehrzeilige Funktion
  sei Ergebnis = a + b;
  Ergebnis zurückgeben; // wenn wir geschweifte Klammern verwenden, dann brauchen wir ein explizites „return“
};

alarm( sum(1, 2) ); // 3

Weiteres wird folgen

Hier haben wir Pfeilfunktionen wegen ihrer Kürze gelobt. Aber das ist noch nicht alles!

Pfeilfunktionen verfügen über weitere interessante Funktionen.

Um sie eingehend zu studieren, müssen wir zunächst einige andere Aspekte von JavaScript kennenlernen, daher werden wir später im Kapitel „Pfeilfunktionen noch einmal betrachtet“ auf die Pfeilfunktionen zurückkommen.

Derzeit können wir Pfeilfunktionen bereits für einzeilige Aktionen und Rückrufe verwenden.

Zusammenfassung

Pfeilfunktionen sind praktisch für einfache Aktionen, insbesondere für Einzeiler. Es gibt sie in zwei Geschmacksrichtungen:

1. Ohne geschweifte Klammern: (...args) => expression – die rechte Seite ist ein Ausdruck: Die Funktion wertet ihn aus und gibt das Ergebnis zurück. Klammern können weggelassen werden, wenn nur ein einziges Argument vorhanden ist, z. B. n => n*2 .

2. Mit geschweiften Klammern: (...args) => { body } – Klammern ermöglichen es uns, mehrere Anweisungen innerhalb der Funktion zu schreiben, aber wir benötigen eine explizite return , um etwas zurückzugeben.

Aufgaben

Mit Pfeilfunktionen umschreiben

Ersetzen Sie Funktionsausdrücke durch Pfeilfunktionen im folgenden Code:

 Funktion ask(question, ja, nein) {
  if (bestätigen(frage)) ja();
  sonst nein();
}

fragen(
  "Sind Sie einverstanden?",
  function() { Alert("Sie haben zugestimmt."); },
  function() { Alert("Sie haben die Ausführung abgebrochen."); }
);

Lösung

 Funktion ask(question, ja, nein) {
  if (bestätigen(frage)) ja();
  sonst nein();
}

fragen(
  "Sind Sie einverstanden?",
  () => warning("Sie haben zugestimmt."),
  () => warning("Sie haben die Ausführung abgebrochen.")
);

Sieht kurz und sauber aus, oder?