Die Bedeutung von => in JavaScript

1. Pfeilfunktion => in JavaScript
2. Pfeilfunktion ohne Argument
3. Pfeilfunktion mit einem Argument
4. Mehrzeilige Pfeilfunktionen
5. Rufen Sie die Pfeilfunktion in JavaScript auf oder führen Sie sie aus
6. Verwenden Sie Pfeilfunktionen mit Promises und Callbacks
7. Einschränkungen der Pfeilfunktionen

Mit einer Funktion in JavaScript können Sie einen Codeblock schreiben, der eine bestimmte Aufgabe ausführt. Es gibt verschiedene Möglichkeiten, Funktionen in JavaScript zu schreiben.

In diesem Artikel werden wir sehen, was eine Pfeilfunktion in JavaScript ist, wie sie funktioniert und welche Einschränkungen sie hat.

Pfeilfunktion => in JavaScript

Die Pfeilfunktion ist eine Kombination aus Gleichheitszeichen = und Größer-als-Zeichen >. Es wurde in der ES6-Version von JavaScript eingeführt.

Es ist eine kürzere Art, Funktionen in JavaScript zu schreiben, bekannt als Pfeilfunktionen. Der Vorteil der Verwendung der Pfeilfunktion besteht darin, dass sie eine kürzere Syntax als der Ausdruck Funktion hat.

Die Pfeilfunktion wird manchmal auch als anonyme Funktion bezeichnet. Dies liegt daran, dass diese Funktionen keinen Namen haben.

Das folgende Code-Snippet zeigt den Vergleich zwischen der Syntax der normalen Funktion und der Syntax der Pfeilfunktionen.

Codeausschnitt - JavaScript:

// normal fn
function abc() {}

// arrow
() => {}

Die Pfeilfunktion kann entweder keine Argumente oder eine beliebige Anzahl von Argumenten annehmen.

Pfeilfunktion ohne Argument

Das folgende Code-Snippet zeigt eine Pfeilfunktion, die keine Argumente akzeptiert. Auch wenn wir eine Pfeilfunktion mit nur einer einzigen Codezeile haben, können wir die Verwendung der geschweiften Klammern vermeiden, wie unten gezeigt.

Codeausschnitt - JavaScript:

() => console.log('This is a single line arrow fn which takes no arguments')

Pfeilfunktion mit einem Argument

Wenn Sie Argumente an eine Pfeilfunktion übergeben möchten, können Sie diese innerhalb der runden Klammern übergeben. Unten sehen Sie die Pfeilfunktion mit einem Argument.

Codeausschnitt - JavaScript:

(name) => console.log(`Good Morning ${name}`)

Mehrzeilige Pfeilfunktionen

In den obigen Beispielen haben wir eine Pfeilfunktion mit einer einzigen Codezeile gesehen. Wenn Sie jedoch mehrzeiligen Code in eine Pfeilfunktion schreiben möchten, müssen Sie geschweifte Klammern verwenden, wie unten gezeigt.

Codeausschnitt - JavaScript:

() => {
  greetMe();
  loadData();
  console.log('The data is loaded....')
}

Rufen Sie die Pfeilfunktion in JavaScript auf oder führen Sie sie aus

Sie fragen sich vielleicht, wenn eine Pfeilfunktion keinen Namen hat, wie können wir sie dann aufrufen oder ausführen? Die Antwort ist einfach; Wir können die Pfeilfunktion in einer Variablen speichern und dieser Variablen einen Namen geben.

Dann können wir diese Funktion mit den runden Klammern () aufrufen oder ausführen, ähnlich wie wir eine normale Funktion ausführen, wie unten gezeigt. Dies wird als Ausdruck eine Pfeilfunktion genannt.

Codeausschnitt - JavaScript:

const abc = () => {
  console.log('hello');
}

Wenn Sie nur eine Anweisung innerhalb der Pfeilfunktion haben, können Sie die geschweiften Klammern {} entfernen und die Pfeilfunktion direkt in nur eine Zeile schreiben. Dies erhöht die Lesbarkeit des Codes und reduziert die Codezeilen.

Codeausschnitt - JavaScript:

const abc = () => console.log('hello');

Und wenn Sie bei Pfeilfunktionen nach der Funktionsausführung etwas zurückgeben möchten, können Sie anstelle des Schlüsselworts return auch () verwenden. Aber wenn es um normale Funktionen geht, müssen Sie das Schlüsselwort return verwenden.

Codeausschnitt - JavaScript:

(params) => ({key: 'value'})

Ein wichtiger Punkt, den Sie sich merken sollten, ist auch, dass sich das Schlüsselwort this in der regulären Funktion immer auf den Kontext der Funktion bezieht, die in JavaScript aufgerufen wird. Bei Pfeilfunktionen ist dies jedoch nicht der Fall.

Das Schlüsselwort this in Pfeilfunktionen hat keinen Kontext; es bezieht sich auf den Geltungsbereich, in dem die Funktion vorhanden ist.

Verwenden Sie Pfeilfunktionen mit Promises und Callbacks

Das Gute an Pfeilfunktionen ist, dass sie an mehreren Stellen (mit promises) und auf verschiedene Arten (als Callbacks) verwendet werden können.

Codeausschnitt - JavaScript:

new Promise(function(resolve, reject) {
  funReturningPromise().then(data => resolve(data)).catch(err => reject(err));
});

Hier verwenden wir promises, und wie wir wissen, nimmt promise eine Callback-Methode als Argument. Dieser Rückruf benötigt zwei Argumente zum Auflösen und Ablehnen.

Nehmen wir an, wir haben eine Funktion, die ein promise-Objekt zurückgibt. Das Versprechen kann entweder eingelöst oder abgelehnt werden.

Je nachdem, was mit einem promise passieren kann, können wir also zwei Methoden verwenden, then und catch. Wir können die Pfeilfunktionen in diesen Methoden verwenden, wie im obigen Beispiel gezeigt.

Einschränkungen der Pfeilfunktionen

1. Kann nicht als Konstruktoren verwendet werden.
2. Nicht geeignet für die Methoden call, apply und bind.
3. Sie haben keine Bindungen an this, arguments oder super und sollten nicht als Methoden verwendet werden.
4. Sie haben keinen Zugriff auf das Schlüsselwort new.target.