Pfeilfunktionen in Javascript

Pfeilfunktionen – auch „fette Pfeilfunktionen“ genannt, sind eine relativ neue Art, prägnante Funktionen in JavaScript zu schreiben. Sie wurden mit den ECMAScript 6-Spezifikationen eingeführt und sind seither das beliebteste ES6-Feature. Pfeilfunktionen ermöglichen es uns, den fetten Pfeil =>-Operator zu verwenden, um schnell JavaScript-Funktionen mit oder ohne Parameter zu definieren. Bei der Erstellung einer neuen JavaScript-Funktion können wir die geschweiften Klammern sowie die Schlüsselwörter function und return weglassen und so eine kürzere Funktionssyntax schreiben. Das spart nicht nur Zeit, sondern führt auch zu sauberen und besser lesbaren Funktionen.

In diesem Artikel wollen wir uns einige reale Szenarien für die Erstellung von Pfeilfunktionen ansehen – unter Verwendung von ES6 im Vergleich zur älteren ECMAScript 5-Notation, damit wir sehen können, wie die beiden Syntaxen im Vergleich zueinander aussehen.

Die einfachste Syntax für Pfeilfunktionen ist die, bei der die Funktion keine Parameter hat. Im folgenden Beispiel deklariert die ECMAScript 5-Syntax einen Funktionsausdruck und weist ihn der Variablen birthday zu. Es wird eine einfache Textzeichenfolge auf der Konsole ausgegeben, die besagt „Happy birthday!“:

In der Pfeilfunktionssyntax verschwinden die geschweiften Klammern sowie die Schlüsselwörter function und return. Die gesamte Funktion besteht nur noch aus einer einzigen Zeile. Die leeren Klammern zeigen an, dass die Funktion keine Parameter hat und der fette Pfeil bindet den Funktionskörper an die (derzeit nicht vorhandenen) Parameter:

Ein Parameter

Erweitern wir das vorherige Beispiel um einen Parameter, nämlich name. Die alte ES5-Syntax nimmt einen Parameter auf und hängt seinen Wert an die zurückzugebende Zeichenkette an:

Die Syntax der Pfeilfunktion tut im Wesentlichen das Gleiche. Wir müssen den Namensparameter in die Klammern vor dem fetten Pfeil einschließen und das Rückgabeschlüsselwort im Funktionsblock weglassen:

Zwei Parameter

Wir können Pfeilfunktionen mit so vielen Parametern verwenden, wie wir wollen. Hier ist zum Beispiel das gleiche Beispiel mit zwei Parametern, Alter und Name. Die Funktion birthday() benötigt nun zwei Eingaben, um die Zeichenkette zurückzugeben. Zunächst verwenden wir ECMAScript 5:

Und hier ist der gleiche Code mit der neuen ES6-Notation:

Objektliterale

Wir können die Pfeilfunktionssyntax auch verwenden, um Setter-Funktionen zu deklarieren, mit denen Benutzer den Wert von Objektliteralen setzen können. Die folgende setBirthday()-Funktion ermöglicht es dem Benutzer, den Namen und das Alter der Person, die Geburtstag hat, zu setzen:

Durch die Verwendung der Pfeilfunktionsnotation wird nur eine Zeile benötigt, um dieselbe Setter-Funktion zu definieren:

Array Manipulation

Wir können Pfeilfunktionen auch zur Manipulation von JavaScript-Arrays verwenden. Schauen wir uns zum Beispiel das Personen-Array an, das drei Objektliterale enthält, die jeweils einen Namen und eine Alterseigenschaft haben:

Mit der eingebauten map()-Methode von JavaScript können wir dieselbe Funktion für jedes Element des Arrays aufrufen. Mit der traditionellen ES5-Notation können wir die Namenseigenschaft jeder Person auf folgende Weise zurückgeben:

Mit der Notation der Pfeilfunktion können wir dieselbe Aufgabe in einer Zeile ausführen:

When Not To Use Arrow Functions

Obwohl Pfeilfunktionen viele Anwendungsfälle haben, sind sie auch mit einigen Einschränkungen verbunden. Es gibt einige Szenarien, in denen man die Pfeilfunktionssyntax nicht verwenden kann oder sollte.

Am wichtigsten ist, dass man mit Pfeilfunktionen keine Konstruktoren erstellen kann. Wenn wir das Schlüsselwort new zusammen mit der fetten Pfeil-Syntax verwenden, gibt die Konsole einen Fehler aus. Das liegt daran, dass JavaScript Pfeilfunktionen genauso behandelt wie Objektmethoden. Folglich können sie keine eigenen Methoden haben, was eine wesentliche Eigenschaft von JavaScript-Objekten wäre. Außerdem können wir die ES6-Syntax nicht verwenden, um Objektliterale und Callback-Funktionen zu deklarieren, die Methoden enthalten, die das this-Schlüsselwort verwenden, da Pfeilfunktionen dies anders behandeln.

Fazit

Pfeilfunktionen bieten Entwicklern eine nützliche Kurzschrift, um Funktionsausdrücke in JavaScript zu schreiben. Die Fat-Prow-Syntax hat viele Anwendungsfälle, so dass sie schnell zum beliebtesten ES6-Feature der JavaScript-Community geworden ist. Bei konsequenter Anwendung kann die neue kompakte Notation viel Zeit und Bandbreite sparen und die Lesbarkeit des Codes verbessern.

Danke fürs Lesen.