EMZETT.Arrow-Funktionen (Pfeilfunktionen) sind eine kurze Schreibweise für Funktionen, eingeführt in ES2015. Sie werden heute ständig benutzt, vor allem als Argument für map, filter und Co.
Syntax
Ergebnis
5 36 Hallo 6
Passt der Rumpf in einen Ausdruck, kannst du { } und return weglassen. Soll ein Objekt direkt zurückgegeben werden, setze es in runde Klammern:
Ergebnis
{ x: 3, y: 4 }Vergleich: normal und Arrow
Ergebnis
[ 2, 4, 6, 8 ] [ 2, 4, 6, 8 ] [ 2, 4 ] 10
Der Unterschied bei this
Der wichtigste inhaltliche Unterschied: Eine Arrow-Funktion hat kein eigenes `this`, sondern übernimmt es von außen. Das ist in Klassen und Callbacks hilfreich:
Ergebnis
normal: TypeError normal: TypeError normal: TypeError arrow: 3
Weitere Unterschiede: Arrow-Funktionen haben kein arguments, können nicht mit new aufgerufen werden und eignen sich nicht als Objektmethoden, wenn du this brauchst.
Wann was?
- Arrow: Callbacks, kurze Hilfsfunktionen, Funktionen in Methoden
- function-Deklaration: benannte Funktionen auf oberster Ebene, wenn du Hoisting willst
- Methodenschreibweise:
{ methode() { ... } }für Objektmethoden
Funktionen höherer Ordnung
Funktionen, die andere Funktionen aufnehmen oder zurückgeben, heißen Higher-Order-Functions:
Ergebnis
20 30 plus(2,3) = 5
Sofort ausgeführte Funktionen (IIFE)
Ergebnis
43
Merke
(a, b) => a + bist die Kurzform; bei einem Ausdruck entfallen{}undreturn- Objekt zurückgeben:
() => ({ ... }) - Arrow-Funktionen übernehmen
thisvon außen - Sie sind ideal für Callbacks; nicht für Konstruktoren
- Funktionen höherer Ordnung nehmen Funktionen auf oder geben welche zurück
Aufgabe
Schreibe const verdopple = x => ..., wende sie mit map auf [1, 2, 3] an, und baue eine Funktion mal(faktor), die eine Multiplikationsfunktion zurückgibt.