Arrow Functions sind eine kürzere Syntax für Funktionen in JavaScript.
Sie wurden mit ES6 (ECMAScript 2015) eingeführt und haben einige Besonderheiten:
- Kürzere Schreibweise (
=>) - Kein eigenes
this,arguments,superodernew.target(können nicht mitnewerzeugt werden) - Praktisch für Callbacks und Kurzfunktionen
Übersicht:
| Thema | Normale Funktion | Arrow Function | Besonderheit |
|---|---|---|---|
| Syntax | function name() {} | const name = () => {} | Kürzer, kein function-Keyword |
| Parameter | function(x) | (x) => oder x => | Klammern bei einem Parameter optional |
| Kein Parameter | function() | () => | Immer Klammern nötig |
| Return | return x + y; | x + y (implizit) | Bei einer Zeile ohne {} wird automatisch zurückgegeben |
| this-Bindung | Hat eigenes this | Erbt this vom umgebenden Kontext | Wichtig bei Methoden & Event-Handlern |
| Konstruktor | Kann mit new verwendet werden | ❌ Nicht möglich | Arrow Functions sind keine Konstruktoren |
| arguments-Objekt | Verfügbar | ❌ Nicht verfügbar | Stattdessen Rest-Parameter (...args) nutzen |
Beispiele:
// Normale Funktion
function add(a, b) {
return a + b;
}
// Arrow Function (Langform)
const add = (a, b) => {
return a + b;
};
// Arrow Function (Kurzform mit implizitem return)
const add = (a, b) => a + b;
// Nur ein Parameter (Klammern optional)
const square = x => x * x;
// Kein Parameter (leere Klammern nötig)
const greet = () => console.log("Hallo!");
// Mehrzeilige Funktion (geschweifte Klammern + return nötig)
const sum = (a, b) => {
const result = a + b;
return result;
};MDN-Website: Arrow-Funktionen