Arrow Functions in JavaScript

Arrow Functions (Pfeilfunktionen) sind seit 2015 die kompakteste Art, Funktionen in JavaScript zu schreiben – und in modernem Code die häufigste. Dieses Kapitel zeigt die Syntax-Varianten und einen zentralen Verhaltensunterschied zu normalen Funktionen.

Grundsyntax

// Function Expression:
const verdoppleA = function (wert) {
  return wert * 2;
};

// Arrow Function, äquivalent:
const verdoppleB = (wert) => {
  return wert * 2;
};

console.log(verdoppleA(21), verdoppleB(21)); // 42 42

Verkürzte Formen

Arrow Functions erlauben mehrere Abkürzungen, je nach Anzahl der Parameter und Körper-Länge:

// Ein einziger Parameter: Klammern optional
const verdopple = wert => wert * 2;

// Genau EIN Ausdruck als Körper: geschweifte Klammern und 'return' entfallen (implizites return)
const istEinnahme = betrag => betrag > 0;

// Kein Parameter: leere Klammern PFLICHT
const aktuellesJahr = () => 2026;

// Mehrere Parameter: Klammern PFLICHT
const addiere = (a, b) => a + b;

Achtung: Soll ein OBJEKT-LITERAL implizit zurückgegeben werden, muss es in runde Klammern gesetzt werden – sonst interpretiert JavaScript die geschweiften Klammern als Funktionskörper, nicht als Objekt: const macheTransaktion = betrag => ({ betrag, typ: 'ausgabe' }); OHNE die runden Klammern würde ein Syntaxfehler entstehen.

Der zentrale Unterschied: Arrow Functions haben kein eigenes this

Normale Funktionen erhalten bei jedem Aufruf ein NEUES this, abhängig davon, WIE sie aufgerufen wurden (Details in Kapitel 17). Arrow Functions dagegen haben KEIN eigenes this – sie übernehmen das this aus ihrem UMGEBENDEN Kontext ("lexikalisches this"). Das folgende Beispiel demonstriert den Unterschied direkt am Haushaltsbuch:

const konto = {
  kontostand: 1500,
  buchungen: [100, -50, 200],

  // Normale Funktion als Methode: 'this' zeigt korrekt auf 'konto'
  zeigeKontostandNormal: function () {
    console.log(this.kontostand); // 1500 - 'this' ist 'konto'
  },

  // Arrow Function als Methode: 'this' zeigt NICHT auf 'konto'!
  zeigeKontostandArrow: () => {
    console.log(this.kontostand); // undefined - 'this' kommt vom UMGEBENDEN Kontext, nicht von 'konto'
  },
};

konto.zeigeKontostandNormal(); // 1500
konto.zeigeKontostandArrow();  // undefined

Achtung: Verwenden Sie deshalb NIEMALS eine Arrow Function als direkte Objekt-METHODE, wenn diese this braucht. Arrow Functions sind ideal für Callbacks INNERHALB einer Methode (siehe unten) – dort ist das geerbte this aus der umgebenden Methode genau das gewünschte Verhalten.

Arrow Functions als Callback: wo sie glänzen

const betraege = [2400, -850, -120, -60];

const ausgaben = betraege.filter(betrag => betrag < 0);
console.log(ausgaben); // [-850, -120, -60]

Mehr zu filter() und weiteren Array-Methoden, die typischerweise mit Arrow Functions kombiniert werden, in Kapitel 11.

Weitere Einschränkung: kein eigenes arguments-Objekt

Normale Funktionen haben Zugriff auf ein automatisches arguments-Objekt (alle übergebenen Argumente, unabhängig von deklarierten Parametern). Arrow Functions haben das NICHT – der moderne Ersatz dafür sind ohnehin Rest-Parameter (...args) aus Kapitel 8, die in BEIDEN Funktionsformen funktionieren.

Tipp: Faustregel: Arrow Functions als STANDARD für alles Kurze und für Callbacks. Normale function-Syntax nur dort, wo this dynamisch vom Aufrufer bestimmt werden soll (z. B. echte Objekt-Methoden) oder ein eigenes arguments-Objekt gebraucht wird.