Arrow Functions

Arrow Functions sind eine kompaktere Syntax für Funktionen, die mit ES6 eingeführt wurde. In React-Code sind sie allgegenwärtig — als Event-Handler, in Array-Methoden und als Komponentendefinitionen.

Syntax

Eine klassische Funktionsdeklaration sieht so aus:

function addiere(a, b) {
  return a + b;
}

Als Arrow Function wird daraus:

const addiere = (a, b) => {
  return a + b;
};

Die Grundstruktur ist: Parameter => Funktionskörper.

Kurzformen

Arrow Functions bieten mehrere Kurzschreibweisen, die den Code kompakter machen:

Ein Parameter — Klammern optional:

const verdopple = x => {
  return x * 2;
};

Bei null oder mehreren Parametern brauchst du Klammern:

const greet = () => {
  return "Hallo!";
};

const addiere = (a, b) => {
  return a + b;
};

Implizites Return — ohne geschweifte Klammern:

Wenn der Funktionskörper nur aus einem einzigen Ausdruck besteht, kannst du die geschweiften Klammern und das return weglassen:

const verdopple = x => x * 2;

const addiere = (a, b) => a + b;

const greet = () => "Hallo!";

Der Ausdruck rechts vom Pfeil wird automatisch zurückgegeben. Das ist der implizite Return.

Wenn du ein Objekt-Literal implizit zurückgeben willst, musst du es in runde Klammern setzen — sonst verwechselt JavaScript die geschweiften Klammern mit einem Funktionskörper:

// Fehler — JavaScript denkt, das sind geschweifte Klammern eines Blocks
const makeStudent = name => { name: name, fach: "Informatik" };

// Richtig — runde Klammern signalisieren: das ist ein Ausdruck
const makeStudent = name => ({ name: name, fach: "Informatik" });

Mehrzeilige Ausdrücke

Auch längere Ausdrücke können implizit zurückgegeben werden. Setze sie dafür in runde Klammern:

const makeStudent = (name, fach) => (
  name.toUpperCase() + " — " + fach
);

In React-Komponenten gibst du JSX zurück, das sich oft über mehrere Zeilen erstreckt. Der implizite Return mit runden Klammern ist deshalb ein häufiges Muster:

const StudentCard = ({ name, fach }) => (
  <div>
    <h2>{name}</h2>
    <p>{fach}</p>
  </div>
);

Arrow Functions vs. Funktionsdeklarationen

Die beiden Schreibweisen sind in den meisten Fällen austauschbar. Es gibt aber einen wichtigen Unterschied:

Hoisting

Funktionsdeklarationen werden gehoisted — du kannst sie aufrufen, bevor sie im Code stehen:

greet("Dan"); // Funktioniert!

function greet(name) {
  return `Hallo ${name}`;
}

Arrow Functions (und function expressions) werden nicht gehoisted:

greet("Dan"); // Fehler: Cannot access 'greet' before initialization

const greet = (name) => `Hallo ${name}`;

`this`-Verhalten

Funktionsdeklarationen haben ihr eigenes this, das sich je nach Aufrufkontext ändert. Arrow Functions haben kein eigenes this — sie übernehmen das this aus dem umgebenden Scope:

const student = {
  name: "Dan",
  // Funktionsdeklaration: this = student
  greetClassic: function() {
    return `Hallo ${this.name}`;
  },
  // Arrow Function: this = umgebender Scope (NICHT student)
  greetArrow: () => {
    return `Hallo ${this.name}`; // this.name ist undefined!
  },
};

student.greetClassic(); // "Hallo Dan"
student.greetArrow();   // "Hallo undefined"

Typische Verwendung in React

Komponenten definieren:

const StudentCard = ({ name, fach }) => (
  <div>
    <h2>{name}</h2>
    <p>{fach}</p>
  </div>
);

Event-Handler:

<button onClick={() => alert("Klick!")}>Klick mich</button>

Array-Methoden:

const namen = ["Dan", "Sophie", "Max"];

namen.map(name => <li key={name}>{name}</li>);

Funktionen, die Funktionen zurückgeben:

const multipliziere = faktor => zahl => zahl * faktor;

const verdopple = multipliziere(2);
verdopple(5); // 10

In all diesen Fällen macht die kompakte Syntax den Code lesbarer — besonders bei kurzen Inline-Funktionen.