ES2015 – Teil 2: Pfeilfunktionen

Nachdem wir uns um die Vorarbeit und Vorgeschichte von ES2015 im letzten Artikel gekümmert haben steigen wir nun voll in die Features ein. In diesem Artikel geht es um eine neue Syntax zur Deklaration anonymer Funktionen – zum Beispiel für Callbacks: die Pfeilfunktionen.

Was sind Pfeilfunktionen?

Pfeilfunktionen in ES2015 sind eine Art Abkürzung für das Definieren von anonymen Funktionen. Anonyme Funktionen verwenden wir beispielsweise in Callbacks.

Das ist natürlich ein total langweiliges Beispiel aber die Funktionsweise ist hoffentlich klar:

  1. Wir rufen die Funktion doSomething() auf und geben ihr eine anonyme Funktion mit
  2. Wir definieren eine Variable innerhalb der Funktion
  3. Falls die anonyme Funktion übergeben wurde rufen wir sie mit dem Wert der Variablen auf
  4. Die anonyme Funktion gibt den Wert der Variablen aus

Wie würde dieses Beispiel jetzt mit Pfeilfunktionen in ES2015 aussehen? Schauen wir es uns an.

 

 

Die Deklaration der Funktion doSomething() bleibt dieselbe weshalb ich die hier weggelassen habe. Der Aufruf allerdings lässt sich auf diese Zeile zusammenschrumpfen.
Doch was passiert hier jetzt genau? Brechen wir es ein wenig auf.

  1. result – der Anfang einer Pfeilfunktion sind die Parameter. In diesem Beispiel haben wir nur einen, nämlich result. Was bei mehreren (oder keinen) Parametern passiert klären wir später noch auf.
  2. => – der Pfeil von dem die Pfeilfunktion ihren Namen bekommt. Dies ist der entscheidende Faktor, dass wir hier eine anonyme Funktion deklarieren.
  3. console.log(‚Das Ergebnis ist: ‚ + result) – der Funktionskörper oder auch: Was innerhalb der Funktion passiert. Da wir hier nur einen einzigen Befehl ausführen können wir uns alles andere sparen, auch hier klären wir natürlich längere Funktionen noch später auf.

 

Parameter in der Pfeilfunktion

Im Beispiel oben hatten wir nur einen Parameter in unserer Pfeilfunktion – result. Doch was, wenn wir eine Funktion mit mehreren Parametern haben? Machen wir ein Beispiel anhand der JavaScript Funktion map(). Diese iteriert über ein Array, ruft eine Funktion für jeden Wert auf und ersetzt den Wert im Array durch den Rückgabewert der Funktion.

Folgendes ES5 Beispiel:

Wir haben ein Array mit drei Zahlen und rufen map() für jede Zahl auf. Die map() Funktion bekommt dabei die aktuelle Zahl sowie den Index im Array als Parameter übergeben. Nun quadrieren wir jede Zahl und geben das Quadrat zurück – wodurch hinterher in der Variable numbers ein Array mit allen Quadraten gespeichert ist.

Übersetzen wir das nun in ES2015 mit Pfeilfunktionen.

 

 

Wieder konnten wir das Ganze auf eine Zeile reduzieren. Sehen wir uns die Besonderheiten in diesem Beispiel an:

  • Wir haben nun mehrere Parameter in der Pfeilfunktion, nämlich number und index. Diese werden einfach durch ein Komma getrennt und (wichtig!) in Klammern eingefasst.
  • Im Funktionskörper haben wir das return Statement weggelassen. Eine einzeilige Pfeilfunktion hat dieses bereits impliziert, das bedeutet wird ein Wert erzeugt (was bei einer Multiplikation beispielsweise passiert) wird dieser automatisch auch zurückgegeben.

Was ist nun, wenn wir keine Parameter in der Pfeilfunktion haben?

Ganz einfach, dann können wir leere Klammern vor den Pfeil setzen wie hier zu sehen.

 

 

Mehrzeilige Funktionen

Nun hatten wir bisher immer nur einzeilige Pfeilfunktionen, aber Callbacks haben ja oft mehr als nur eine simple Aufgabe. Natürlich können wir auch bei Pfeilfunktionen einfach einen echten Funktionskörper angeben indem wir geschweifte Klammern setzen:

Beachte hier das return Statement. Die implizite Rückgabe von Werten gilt ausschließlich für einzeilige Funktionskörper ohne die geschweiften Klammern!

 

 

this Kontext in Pfeilfunktionen

Ein wichtiger Unterschied von Pfeilfunktionen zu normalen anonymen Funktionen liegt im this. Diese spezielle Variable zeigt in JavaScript auf die Umgebung – je nachdem von wo man das nun benutzt.
Der große Unterschied zwischen Pfeilfunktionen und anonymen Funktionen liegt darin, dass Pfeilfunktionen sich ihren this Kontext immer mit ihrem umgebenden Code teilen, anonyme Funktionen allerdings einen eigenen Kontext haben.

Sehen wir uns ein Vergleichsbeispiel an. Zuerst in ES5 und danach wie immer dasselbe in ES2015.

In diesem ES5 Beispiel bekommen wir einen Fehler. Innerhalb der add() Funktion zeigt this auf unser aktuelles Objekt, also test. Doch die Callback Funktion im forEach() hat ein eigenes this weshalb wir nicht mehr auf die Variable a zugreifen können.
Wie würde das jetzt in ES2015 aussehen?

Die Änderung ist minimal, die anonyme Funktion wurde nur durch eine Pfeilfunktion ausgetauscht aber schon funktioniert es und die add() Funktion gibt plötzlich 11, 12 und 13 aus. Da die Pfeilfunktion sich innerhalb der add() Funktion befindet hat sie auch denselben Zugriff auf unser test Objekt.

 

Was hälst du von den neuen Pfeilfunktionen? Findest du sie übersichtlicher als die alte Syntax oder verwirren sie dich nur?
Lass es uns doch in den Kommentaren wissen!

2 Kommentare zu “ES2015 – Teil 2: Pfeilfunktionen

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

*