JavaScript - Arrow Functions

Arrow Functions

Arrow Functions sind eine andere Schreibweise um Funktionen zu definieren.

Die definierten Funktionen funktionieren genau gleich wie herkömmliche JavaScript Funktionen.

Arrow Function Syntax

Im Unterschied zu herkömmlichen Funktionen vergeben wir keinen Namen bei Arrow-Functions.

Man nennt Arrow-Functions deswegen auch anonyme Funktionen, weil ihr Name nicht bekannt ist.

In anderen Programmiersprachen werden Arrow-Functions auch häufig Lambda-Functions genannt.

Arrow Function Syntax (2)

Bei der Definition lassen wir im Vergleich zu herkömmlichen Funktionen das Schlüsselwort function und den Namen der Funktion weg.

Wir beginnen sofort mit der Parameterliste in runden Klammern.

Danach kommt ein Pfeil, dargestellt durch => gefolgt vom Funktionsrumpf.

(number) => {
  return number * 2;
}

Arrow Function Syntax (3)

Besteht der Funktionsrumpf bei Arrow-Functions nur aus einem einzigen Ausdruck, können die geschwungenen Klammern und das return Schlüsselwort auch weggelassen werden.

(number) => number * 2;

Wenn die Arrow-Function nur einen einzelnen Parameter erhält, können auch die runden Klammern der Parameterliste entfallen.

number => number * 2;

Arrow Functions - Verwendung

Der häufigste Anwendungsfall von Arrow-Functions ist die Verwendung mit Higher-Order-Functions, also wenn wir eine Funktion einer anderen Funktion übergeben.

let array = [1, 2, 3];
let doubled = array.map(n => n*2);
let filtered = array.filter(n => n >= 2);

Arrow Functions - Verwendung (2)

Eine Arrow Function kann nicht für sich alleine bestehen.

// korrekt
function double(number) {
  return number * 2;
}

// falsch
(number) => number * 2;

Wenn wir eine Arrow-Function so definieren würden, könnten wir sie ja nie wieder finden, weil wir sie nicht über den Namen ansprechen können.

Arrow Functions - Verwendung (3)

Wir können Arrow Functions aber einer Variable zuweisen um dennoch wieder einen Namen für die Funktion zu haben.

const double = number => number * 2;
const six = double(3);
console.log(six); // -> 6