Arrow-Funktionen in

Über Arrow-Funktionen

Neben Funktionsdeklarationen und Funktionsausdrücken gibt es in JavaScript noch eine weitere, sehr kompakte Syntax, um eine Funktion zu definieren. Diese Funktionen heißen Pfeilfunktionen.

In diesem Konzept schauen wir uns die Syntax an, mit der du eine Pfeilfunktion schreibst. Es gibt Unterschiede darin, wie eine Pfeilfunktion funktioniert, etwa die this-Bindung, die wir in anderen Konzepten behandeln.

Hier siehst du einen Vergleich zwischen einer Funktionsdeklaration und einer Pfeilfunktion.

function addUpTwoNumbers(num1, num2) {
  return num1 + num2;
}

// function keyword removed and => added
const addUpTwoNumbers = (num1, num2) => {
  return num1 + num2;
};

Oben siehst du, dass die Syntax einer Pfeilfunktion drei Dinge tut:

1. Sie entfernt das Schlüsselwort function.
2. Sie deklariert den Bezeichner addUpTwoNumbers als const.
3. Sie fügt einen dicken Pfeil => hinzu.

Wenn der Funktionskörper nur eine return-Anweisung enthält, wie im Beispiel oben, kannst du die {} und das Schlüsselwort return weglassen.

const addUpTwoNumbers = (num1, num2) => { return num1 + num2 };

// can be shortened to
const addUpTwoNumbers = (num1, num2) => num1 + num2;
// braces {} and return removed

Wenn du aus einer Pfeilfunktion nur ein Objekt zurückgeben willst, brauchst du runde Klammern um das Objekt, damit du die return-Anweisung weglassen kannst.

// explicit return of object
const addUpTwoNumbers = (num1, num2) => {
  return { num1, num2 };
};

// implicit return of object
const addUpTwoNumbers = (num1, num2) => ({ num1, num2 });

Ob du runde Klammern um die Parameter setzt, hängt von der Anzahl der Parameter ab.

// one parameter does not need parenthesis
const square = num => num * num;

// two or more parameters need to be wrapped in parenthesis
const addUpTwoNumbers = (num1, num2) => num1 + num2;

Auch andere Konzepte wie Rest-Parameter und Destrukturierung kannst du mit einer Pfeilfunktion verwenden.