Pfeilfunktionen
Sie können Funktionen deklarieren, Argumente übergeben und mit return einen Wert zurückgeben. Viele kleine Helfer wirken mit dem vollen function-Schlüsselwort schwerfällig. JavaScript bietet eine kompaktere Form: die Pfeilfunktion mit =>.
Was eine Pfeilfunktion ist
Es bleibt eine Funktion: Eingaben, Körper, optional ein Ergebnis. Nur die Schreibweise ändert sich. Meist speichern Sie sie in const, listen Parameter, schreiben =>, dann einen kurzen Ausdruck oder einen { }-Block.
Pfeil neben klassischer Funktion
📊 Klassische Funktion vs. Pfeil
| Idee | Klassisch | Pfeil |
|---|---|---|
| benannter Helfer | function add(a, b) { return a + b; } |
const add = (a, b) => a + b; |
| ein Ausdruck zurück | return a + b; in { } |
Ausdruck nach => gibt selbst zurück |
| mehrere Anweisungen | { } plus return |
dieselbe Regel: { } und return |
| ein Parameter | (name) |
name => ... (Klammern optional) |
| keine Parameter | function hi() { ... } |
const hi = () => ... — leere () Pflicht |
| wo sie lebt | Deklaration oder Ausdruck | fast immer in einer Variablen |
Beide Stile können Zahlen und Zeichenketten liefern. Der Pfeil passt gut zu kleinen Helfern mit klarem const-Namen. Eine klassische function bleibt sinnvoll, wenn ein benannter Block auffallen soll — beides ist gültiges JavaScript.
const double = (n) => n * 2;
let answer = double(5);
console.log(answer);
Der Ausdruck nach dem Pfeil liefert selbst
Steht nach => nur ein Ausdruck, wird er ausgewertet und automatisch zurückgegeben — ohne { } und ohne return. Hier wird double(5) zu 10. Ändern Sie das Argument; das Produkt folgt.
const label = (score) => {
if (score < 0) {
return "invalid";
}
return "ok";
};
console.log(label(-1));
console.log(label(8));
Geschweifte Klammern: Return selbst schreiben
Mit { } gibt JavaScript die letzte Zeile nicht von selbst zurück. Schreiben Sie return wie bei einer klassischen Funktion. Frühe Ausstiege und mehrstufige Logik bleiben so lesbar.
const greet = name => "Hello, " + name;
let line = greet("Sara");
console.log(line);
Ein Parameter darf die Klammern weglassen
Bei genau einem Parameter dürfen Sie name => ... ohne ( ) schreiben. Der Aufruf bleibt gleich: greet("Sara"). Bei zwei oder mehr Parametern bleiben die Klammern.
const hello = () => "Hello";
console.log(hello());
Null Parameter brauchen trotzdem ()
Ohne Eingaben schreiben Sie leere Klammern vor =>. Weglassen ist ein Syntaxfehler. Der Aufruf bleibt hello() — das leere Paar bedeutet „keine Parameter“.
const add = (a, b) => a + b;
let total = add(3, 4);
console.log(total);
console.log(add(10, 2));
Benennen, dann aufrufen
const add = (a, b) => a + b legt den Pfeil unter add ab. Der Aufruf ist wie bei jeder Funktion: add(3, 4) liefert 7. Ein Helfer, zwei Aufrufe — ohne den Körper neu zu schreiben.
Pfeil auf der Seite
Bauen Sie einen Willkommenstext mit einem Pfeil, rufen Sie ihn auf und schreiben Sie das Ergebnis in einen Absatz — gleiches Seitenmuster, kürzere Form.
<!DOCTYPE html>
<html>
<head>
<title>arrow — page</title>
</head>
<body>
<p id="msg">…</p>
<script>
const welcome = guest => "Hello, " + guest;
let box = document.getElementById("msg");
box.textContent = welcome("Omar");
</script>
</body>
</html>
Der Absatz zeigt Hello, Omar. Der Pfeil gab die Zeichenkette zurück; die nächste Zeile setzte sie auf die Seite. Ändern Sie nur das Argument, laden Sie neu und lesen Sie die neue Zeile. Als Nächstes kommt Gültigkeitsbereich — wo diese Namen sichtbar sind.
Übungen
- Schreiben Sie
function triple(n) { return n * 3; }alsconst-Pfeil mit Ausdruckskörper um. - Schreiben Sie
const hi = name => "hi " + nameund loggen Siehi("Neda"). - Schreiben Sie
const ping = () => "pong"und rufen Sie einmal auf. - Schreiben Sie einen Block-Pfeil, der bei
n === 0"zero", sonst"nonzero"zurückgibt. - Nach
const add = (a, b) => a + bprüfen Sie, dassadd(6, 1)den Wert7liefert. - Ändern Sie im HTML-Demo nur die Argumentzeichenkette, laden Sie neu und lesen Sie den Absatz.
Typische Stolperfallen
- Nach
=>{ }öffnen undreturnvergessen — der Aufruf liefertundefined ()weglassen, wenn es keine Parameter gibt=>mit Vergleichsoperatoren verwechseln — der Pfeil ist Funktionssyntax, nicht „größer als“- Hier eine volle
this-Lektion erwarten — Bindungsunterschiede gehören auf eine spätere Seite; hier geht es um die kompakte Form - Denken, Pfeile ersetzen
return-Wissen — Ausdrücke geben weiter zurück; Blöcke brauchen weiterreturn
Kurzfassung
- Pfeilfunktionen nutzen
=>und liegen meist inconst - Ein nackter Ausdruck nach
=>gibt automatisch zurück - Ein
{ }-Körper braucht explizitesreturn - Ein Parameter darf
( )weglassen; null Parameter brauchen leere() - Aufruf über den Namen wie bei jeder Funktion
- Seitenupdates können eine zurückgegebene Zeichenkette vom Pfeil nutzen
- Als Nächstes: Gültigkeitsbereich — wo Namen leben
🧠 Testen Sie Ihr Wissen
Testen Sie Ihr Wissen
Fordern Sie sich mit diesem interaktiven Quiz heraus und sehen Sie, wie gut Sie das Thema verstehen
📝 Anweisungen
- Lesen Sie jede Frage sorgfältig
- Wählen Sie die beste Antwort für jede Frage
- Sie können das Quiz so oft wiederholen, wie Sie möchten
- Ihr Fortschritt wird oben angezeigt