Die kürzere Art, eine Funktion zu schreiben
Die Arrow Function ist in JavaScript die kompaktere Syntax, um eine Funktion zu definieren. Eingeführt wurde sie mit ES2015, und heute ist sie der Standard für kleine, inline geschriebene Funktionen – vor allem für Callbacks an Array-Methoden, Promise-Handler und Event-Listener.
Der Aufbau ist immer gleich: erst die Parameter, dann =>, danach der Funktionsrumpf.
Gleiches Ergebnis wie bei der klassischen Schreibweise:
const add = function (a, b) {
return a + b;
};
Weniger Tipparbeit ist ganz nett, aber die wirklich spannenden Gründe für Arrow Functions sind das implizite Return und der Umgang mit this. Beides schauen wir uns gleich an.
Implizites Return in JavaScript
Wenn der Funktionskörper aus einem einzigen Ausdruck besteht, kannst du sowohl die geschweiften Klammern als auch das return weglassen. Der Wert des Ausdrucks wird dann automatisch zurückgegeben:
Genau hier spielen Pfeilfunktionen ihre Stärken aus – einzeilige Transformationen lesen sich fast wie mathematische Formeln:
Sobald du mehr als ein Statement brauchst, landest du wieder bei geschweiften Klammern und einem expliziten return:
Einen return innerhalb der geschweiften Klammern zu vergessen, ist wohl der häufigste Stolperstein bei Arrow Functions. x => { x * 2 } gibt undefined zurück – die geschweiften Klammern machen aus dem Body einen Block, und der Ausdruck darin verpufft einfach.
Klammern um Parameter
Bei genau einem Parameter sind die Klammern optional:
Bei null, zwei oder mehr Parametern sind die Klammern Pflicht:
Manche Teams setzen aus Konsistenzgründen immer Klammern. Beide Varianten sind okay – entscheide dich für eine und bleib dabei.
Ein Objekt-Literal zurückgeben
Und jetzt die klassische Stolperfalle. Wenn du ein Objekt per implizitem Return zurückgeben willst, hält JavaScript die geschweiften Klammern für einen Funktionsrumpf:
Das gibt undefined aus. JavaScript interpretiert { name: name } als Block mit einem Label-Statement und nicht als Objektliteral. Damit das Ganze als Ausdruck behandelt wird, musst du das Objekt in Klammern setzen:
Die () um { ... } herum sind die Lösung. Merk dir das gut – du läufst in den ersten Tagen mit Pfeilfunktionen garantiert in diese Falle.
Lexikalisches this in Arrow Functions
Der eigentliche Grund, warum es Arrow Functions gibt, ist nicht die kürzere Syntax. Es geht darum, dass sie kein eigenes this haben. Stattdessen übernehmen sie es aus dem umgebenden Scope.
Warum das wichtig ist, sieht man am besten an einer normalen Funktion, die als Callback verwendet wird:
Innerhalb der function () { ... }, die an setInterval übergeben wird, ist this nicht counter. Normale Funktionen bekommen ihr eigenes this – abhängig davon, wie sie aufgerufen werden. Und setInterval ruft den Callback mit this als undefined auf (im strict mode) bzw. mit dem globalen Objekt.
Eine Arrow Function übernimmt dagegen das this der umgebenden Methode (lexikalisches this):
Innerhalb der Arrow Function ist this nach wie vor counter, denn die Pfeilfunktion bringt kein eigenes this mit. Vor der Einführung von Arrow Functions half man sich mit Tricks wie const self = this; oder .bind(this). Diese Muster funktionieren zwar weiterhin, werden heute aber kaum noch gebraucht.
Was Arrow Functions alles nicht haben
Das lexikalische this ist nur ein Teil eines größeren Musters: Arrow Functions verzichten auf einige Dinge, die normale Funktionen mitbringen.
- Kein eigenes
this– wird aus dem umgebenden Scope übernommen. - Kein
arguments-Objekt – stattdessen Rest-Parameter (...args) verwenden. - Kein
new– eine Arrow Function lässt sich nicht als Konstruktor einsetzen. - Keine
prototype-Eigenschaft – ergibt sich direkt daraus, dass keinnewmöglich ist.
...args liefert dir dieselbe „nimm beliebig viele Argumente entgegen"-Fähigkeit wie früher arguments – mit dem Bonus, dass es ein echtes Array ist. Der Aufruf new Greeter(...) schlägt fehl, weil Arrow Functions keine Konstruktoren sind.
Wann du keine Arrow Function verwenden solltest
Für Callbacks sind Arrow Functions mittlerweile die Standardwahl, aber in ein paar Fällen sind sie genau das Falsche:
Objektmethoden, die mit Arrow-Syntax definiert werden, binden this nicht an das Objekt — sie übernehmen es aus dem Kontext, in dem das Objektliteral geschrieben wurde (meist also das Modul oder der globale Scope). Für Methoden nimmst du deshalb besser die Kurzschreibweise (greet() { ... }).
Dasselbe gilt für Prototyp-Methoden in Klassen, für Event-Handler, bei denen this auf das Element zeigen soll, und für jede Funktion, die du später mit new aufrufen willst. In all diesen Fällen ist die klassische function das richtige Werkzeug.
Faustregel: Arrow Function vs. function
- Kurzer Callback mit nur einem Ausdruck? Pfeilfunktion.
thissoll an den äußeren Scope gebunden bleiben? Pfeilfunktion (Stichwort: lexikalischesthis).- Methode auf einem Objekt oder Klassen-Prototyp? Klassische Funktion bzw. Kurzschreibweise.
- Konstruktor? Klassische Funktion — oder gleich eine
class.
In jeder echten JavaScript-Codebasis wirst du beide Schreibweisen sehen. Wann welche passt, bekommt man nach ein paar Wochen Lesen von fremdem Code automatisch ins Gefühl — danach entscheidet man intuitiv.
Weiter geht's: Parameter und Default-Werte
Pfeilfunktionen und klassische Funktionen teilen sich dieselben Parameter-Features — Default-Werte, Rest-Parameter, destrukturierte Argumente und mehr. Genau darum geht's auf der nächsten Seite, und zwar für jede Funktionsform, die du bisher gesehen hast.
Häufig gestellte Fragen
Was ist eine Arrow Function in JavaScript?
Eine Arrow Function ist eine kürzere Schreibweise für Funktionen, die die =>-Syntax nutzt. const add = (a, b) => a + b; ist zum Beispiel eine Arrow Function, die zwei Argumente entgegennimmt und deren Summe zurückgibt. Neben der kompakteren Syntax haben Arrow Functions kein eigenes this, arguments oder super – diese übernehmen sie aus dem umgebenden Scope.
Worin unterscheiden sich Arrow Functions und normale Funktionen?
Klassische Funktionen mit function haben ein eigenes this, ein eigenes arguments-Objekt und können mit new als Konstruktor verwendet werden. Arrow Functions bringen nichts davon mit – sie erben this aus dem Kontext, in dem sie definiert wurden. Außerdem werden Arrow Functions nicht gehoistet wie Funktionsdeklarationen.
Wann sollte ich eine Arrow Function einsetzen?
Arrow Functions bieten sich für kurze Callbacks an (arr.map(x => x * 2)) und überall dort, wo this an den umgebenden Scope gebunden bleiben soll – etwa wenn du in einer Klassenmethode einen Handler an setTimeout oder einen Event Listener übergibst. Für Objektmethoden, Konstruktoren und eigenständige Top-Level-Funktionen ist eine normale function meist die bessere Wahl.
