JavaScript Arrow Functions Grundlagen

Einführung in Arrow Functions

Arrow Functions, eingeführt in ES6 (ECMAScript 2015), sind eine kompakte Möglichkeit, Funktionsausdrücke in JavaScript zu schreiben. Sie sind besonders nützlich für kurze Funktionen und werden überall in modernen JavaScript-Bibliotheken und -Anwendungen eingesetzt — insbesondere als Callbacks, die an Array-Methoden, Timer und Event-Handler übergeben werden.

Eine Arrow Function ist mehr als nur eine kürzere Syntax. Sie verhält sich auch in einem wichtigen Punkt anders als eine reguläre Funktion: Sie erstellt kein eigenes this. Diese Seite behandelt die Syntax und das this-Verhalten; für fortgeschrittene Sonderfälle (kein arguments, kein new, Generatoren) siehe Arrow Functions, vertieft.

Grundlegende Syntax

Die allgemeine Form einer Arrow Function lautet:

let functionName = (param1, param2, ..., paramN) => expression;

Damit wird eine Funktion erstellt, die param1, param2, ..., paramN als Parameter entgegennimmt und das Ergebnis von expression zurückgibt. Das =>-Token wird als „geht zu" oder einfach „Pfeil" gelesen.

Der entsprechende traditionelle Funktionsausdruck sieht so aus — der direkte Vergleich zeigt, was die Pfeil-Syntax weglässt:

Die Pfeil-Version lässt das Schlüsselwort function, die geschweiften Klammern und das explizite return weg. Das Ergebnis ist identisch.

Einzeilige Arrow Functions (implizite Rückgabe)

Wenn der Funktionskörper aus einem einzigen Ausdruck besteht, können die Klammern und das Schlüsselwort return weggelassen werden. Der Wert des Ausdrucks wird automatisch zurückgegeben — dies wird als implizite Rückgabe bezeichnet:

Mehrzeilige Arrow Functions (explizite Rückgabe)

Wenn der Funktionskörper mehr als eine Anweisung benötigt, wird er in geschweifte Klammern {} eingeschlossen. Sobald geschweifte Klammern verwendet werden, entfällt die implizite Rückgabe, daher muss return explizit angegeben werden, wenn ein Wert zurückgegeben werden soll:

Das Vergessen von return innerhalb von geschweiften Klammern ist ein häufiger Anfängerfehler: Die Funktion gibt dann undefined zurück.

Regeln für Klammern

Die Klammern um Parameter folgen einfachen Regeln:

• Ein Parameter: Klammern sind optional — x => x * 2.
• Null Parameter: leere Klammern sind erforderlich — () => 42.
• Zwei oder mehr Parameter: Klammern sind erforderlich — (a, b) => a + b.

Ein Object Literal zurückgeben

Um ein object mit der Syntax für implizite Rückgabe zurückzugeben, muss das object in Klammern eingeschlossen werden. Ohne Klammern liest JavaScript die { als Beginn eines Funktionskörpers und nicht als object Literal — die Funktion führt den Körper aus und gibt undefined zurück:

Vorteile von Arrow Functions

1. Kompaktheit — Arrow Functions haben eine kürzere Syntax als traditionelle Funktionsausdrücke, was Callbacks lesbarer macht.
2. Lexikalisches this — Arrow Functions haben kein eigenes this. Sie übernehmen this aus dem umgebenden (übergeordneten) Scope, wodurch eine ganze Klasse von Fehlern rund um den Verlust von this in Callbacks entfällt.
3. Implizite Rückgabe — Bei der einzeiligen Syntax erfolgt das return automatisch, was kurze Transformationen übersichtlicher macht.

Wie this in Arrow Functions funktioniert

Dies ist der wichtigste Unterschied zwischen Arrow Functions und regulären Funktionen. Eine reguläre Funktion erhält ein eigenes this, das davon abhängt, wie sie aufgerufen wird. Eine Arrow Function hat kein eigenes this — sie sucht this in dem Scope, in dem sie definiert wurde. Dies wird als lexikalisches this bezeichnet.

Das klassische Problem tritt in einer Methode auf, die einen Callback plant. Bei einer regulären Funktion geht das this des Callbacks verloren; bei einer Arrow Function wird this geerbt:

Da die Arrow Function this von startArrow übernimmt (wo this das counter-object ist), liest sie this.value korrekt. Die reguläre Funktion innerhalb von setTimeout wird ohne object-Kontext aufgerufen, daher ist ihr this.value undefined. Einen tieferen Einblick in die Entscheidung über this in regulären Methoden bietet Objekt-Methoden, „this".

Einschränkungen von Arrow Functions

Arrow Functions sind kein vollständiger Ersatz für jede Funktion. Ihr lexikalisches this ist genau das, was sie an manchen Stellen ungeeignet macht.

1. Nicht ideal als Objekt-Methoden — Da eine Arrow Function this aus dem umgebenden Scope erbt statt aus dem object, auf dem sie aufgerufen wird, tut eine Arrow Function als Methode meist nicht das Gewünschte.
2. Können nicht als Konstruktoren verwendet werden — Arrow Functions können nicht mit new verwendet werden und werfen einen Fehler, wenn man es versucht; sie sind keine Konstruktoren.
3. Kein eigenes arguments-object — Innerhalb einer Arrow Function bezieht sich arguments auf das des äußeren Scopes, nicht auf die Argumente der Arrow Function selbst. Verwende stattdessen Rest-Parameter (...args).

Der Methoden-Fallstrick in der Praxis — this zeigt nicht auf das object:

Wann welche Variante verwenden

• Greife auf eine Arrow Function zurück für kurze Callbacks: Array-Methoden, Promises, Timer und Event-Handler, bei denen das umgebende this beibehalten werden soll.
• Greife auf eine reguläre Funktion zurück, wenn eine Methode benötigt wird, die this auf das eigene object bezieht, ein Konstruktor benötigt wird oder Zugriff auf das arguments-object erforderlich ist.

Praktische Beispiele

Array-Methoden

Arrow Functions glänzen bei Array-Methoden wie map, filter und reduce, bei denen jeder Aufruf eine kleine Transformation darstellt:

Event Listener

Arrow Functions sind praktisch für Event Listener, besonders innerhalb einer Klasse oder eines objects, bei denen this auf die umgebende Instanz zeigen soll (dieses Beispiel verwendet den Browser, daher sollte es in einer Seite statt in der Konsole ausgeführt werden):

document.getElementById("myButton").addEventListener("click", () => {
  console.log("Button clicked!");
});

Callbacks und Promises

Sie halten asynchronen Code kompakt, wenn sie als Callbacks verwendet werden:

Fazit

Arrow Functions sind ein vielseitiges, alltägliches Merkmal von modernem JavaScript. Sie bieten eine kompakte Syntax, unterstützen implizite Rückgaben für einzeilige Funktionskörper und erben — am wichtigsten — this aus dem umgebenden Scope, was häufige Kontext-Fehler in Callbacks vermeidet. Sie sind ideal für Array-Methoden, Promises und Event-Handler, aber nicht für Objekt-Methoden, die auf ihr eigenes this angewiesen sind, Konstruktoren oder Code, der das arguments-object benötigt. Zu wissen, wann welche Art von Funktion passt, ist der Schlüssel zur guten Nutzung. Fahre mit Arrow Functions, vertieft fort, um die verbleibenden Sonderfälle kennenzulernen.

Übung