⏸️ 🆎 👨🏿 5 Tipps zum Schreiben von Qualitätspfeilfunktionen 👨🏻‍💼 🗄️ 🧑🏾‍🤝‍🧑🏼

JavaScript-Pfeilfunktionen sind sehr beliebt. Und sie haben es verdient, da sie sich in der lakonischen Syntax, der lexikalischen Bindung thisund der Tatsache unterscheiden, dass sie sehr bequem als Rückrufe zu verwenden sind. Das Material, dessen Übersetzung wir heute veröffentlichen, enthält 5 Empfehlungen zur Verwendung von Pfeilfunktionen. Wer diese Empfehlungen nutzt, hat die Möglichkeit, das Potenzial solcher Funktionen besser aufzuzeigen.

1. Verwenden Sie die Anzeige der Pfeilfunktionsnamen

JavaScript-Pfeilfunktionen sind anonym: Ihre Eigenschaft nameenthält eine leere Zeichenfolge - ''.

( number => number + 1 ).name; // => ''

Anonyme Funktionen werden als anonymousbeim Debuggen oder bei der Analyse des Aufrufstapels markiert . Leider enthält das Wort anonymouskeinen Hinweis darauf, auf welchen spezifischen Code es sich bezieht.

Hier ist einer der Punkte im Debugging-Code, an denen anonyme Funktionen aufgerufen werden.

Debugging-Code mit anonymen Funktionen

Der Aufrufstapel auf der rechten Seite der Abbildung enthält Verweise auf 2 Funktionen, die als gekennzeichnet sindanonymous. Aus solchen Informationen, die im Aufrufstapel enthalten sind, kann man nichts Nützliches über den Code lernen.

Glücklicherweise verfügt JavaScript über einen Mechanismus zum Ableiten von Funktionsnamen (ES2015-Funktion), mit dem unter bestimmten Bedingungen ein Funktionsname erkannt werden kann. Die Idee der Namensausgabe ist, dass JavaScript den Namen der Pfeilfunktion anhand ihrer syntaktischen Position ermitteln kann, dh basierend auf dem Namen der Variablen, in der der Link zum Funktionsobjekt gespeichert ist.

Schauen wir uns den Mechanismus zum Ableiten von Funktionsnamen in Aktion an:

const increaseNumber = number => number + 1;

increaseNumber.name; // => 'increaseNumber'

Da der Verweis auf die Pfeilfunktion in einer Variablen gespeichert ist increaseNumber, entscheidet JavaScript, dass der Name 'increaseNumber'für die Funktion gut geeignet ist. Dadurch erhält auch die Pfeilfunktion einen solchen Namen.

Es wird empfohlen, den Mechanismus zur Ableitung von Funktionsnamen zum Benennen von Pfeilfunktionen zu verwenden.

Schauen wir uns nun den Debugging-Prozess an, bei dem der Mechanismus zum Ableiten von Funktionsnamen verwendet wird.

Debuggen von Code mit Pfeilfunktionen, denen Namen

zugewiesen wurden Da Pfeilfunktionen jetzt Namen haben, bietet der Aufrufstapel weitere nützliche Informationen zum ausgeführten Code:

Der Name der Funktion handleButtonClickgibt einen Aufruf an den Ereignishandler an click.
Der Name increaseCountergibt einen Aufruf der Funktion an, die den Zähler erhöht.

2. Versuchen Sie nach Möglichkeit, Inline-Funktionen zu schreiben

Eine Inline-Funktion ist eine Funktion, die aus einem einzelnen Ausdruck besteht. Bei Pfeilfunktionen gefällt mir die Tatsache, dass sie sehr praktisch zum Erstellen kurzer Inline-Funktionen sind.

Hier ist zum Beispiel die "vollständige" Form einer Pfeilfunktion:

const array = [1, 2, 3];

array.map((number) => { 
  return number * 2;
});

Diese Funktion kann leicht kompakter gestaltet werden. Da die Funktion nur einen Ausdruck enthält, können Sie nämlich geschweifte Klammern entfernen und return:

const array = [1, 2, 3];

array.map(number => number * 2);

Es wird empfohlen, eine Funktion, die nur einen Ausdruck enthält, inline zu machen.

3. Verwenden Sie vorsichtig Pfeilfunktionen und Vergleichsoperatoren.

Vergleichsoperator >, <, <=und >=sind sehr ähnlich zu dem Pfeil =>durch die Funktionen Pfeil deklariert (wie Pfeile wird auch als „ein dicker Pfeil“ genannt).

Wenn Vergleichsoperatoren in einer Inline-Funktion verwendet werden, ist der resultierende Code möglicherweise nicht sehr klar.

Deklarieren Sie eine Pfeilfunktion, die den Operator verwendet <=:

const negativeToZero = number => number <= 0 ? 0 : number;

Das Vorhandensein in einer Zeichenzeile =>und <=desorientiert den Codeleser.

Um Pfeile klar von Vergleichsoperatoren zu unterscheiden, können verschiedene Ansätze verwendet werden.

Zunächst können Sie den Ausdruck in Klammern setzen:

const negativeToZero = number => (number <= 0 ? 0 : number);

Zweitens können Sie absichtlich eine Pfeilfunktion mit einer längeren Konstruktion deklarieren:

const negativeToZero = number => {
  return number <= 0 ? 0 : number;
};

Diese Transformationen beseitigen die Unsicherheit, die durch die Verwendung des Pfeilsymbols und der Vergleichsoperatoren in einer Zeile verursacht wird.

Es wird empfohlen, wenn einzeilige Funktion Eines Pfeil - Anweisungen enthält >, <, <=und >=den entsprechenden Ausdruck in Klammern zu schließen oder eine Multi-Form - Anzeigen Funktionen Pfeil verwenden.

4. Verwenden Sie beim Erstellen einfacher Objekte in Pfeilfunktionen Klammern oder mehrzeilige Strukturen

Die Verwendung eines Objektliteral in einer eingebetteten Pfeilfunktion führt zu einem Syntaxfehler:

const array = [1, 2, 3];

//  SyntaxError!
array.map(number => { 'number': number });

JavaScript betrachtet geschweifte Klammern als Codeblock und nicht als Objektliteral.

Wenn Sie das Objektliteral in Klammern setzen, wird dieses Problem gelöst:

const array = [1, 2, 3];

// !
array.map(number => ({ 'number': number }));

Wenn ein Objektliteral viele Eigenschaften hat, können Sie hier sogar Zeilenvorschübe verwenden. Die Pfeilfunktion bleibt weiterhin eingebettet:

const array = [1, 2, 3];

// !
array.map(number => ({
  'number': number
  'propA': 'value A',
  'propB': 'value B'
}));

Wenn Objektliterale in Inline-Funktionen verwendet werden, wird empfohlen, sie in Klammern zu setzen.

5. Achten Sie darauf, zu tief zu nisten.

Pfeilfunktionen unterscheiden sich in der lakonischen Syntax. Das ist gut. Aus diesem Grund können viele ineinander eingebettete Pfeilfunktionen schwer lesbare Strukturen bilden.

Stellen Sie sich das folgende Szenario vor. Wenn sie auf die Schaltfläche klicken, wird eine Anforderung an den Server ausgeführt. Wenn eine Serverantwort mit einer Reihe bestimmter Elemente empfangen wird, werden die Namen dieser Elemente in der Konsole angezeigt:

myButton.addEventListener('click', () => {
  fetch('/items.json')
    .then(response => response.json())
    .then(json => {
      json.forEach(item => {
        console.log(item.name);
      });
    });
});

Hier sehen wir drei Ebenen von Verschachtelungspfeilfunktionen. Um zu erfahren, was in diesem Code passiert, müssen Sie einige Zeit aufwenden.

Es können verschiedene Ansätze verwendet werden, um die Lesbarkeit verschachtelter Funktionen zu verbessern.

Der erste Ansatz besteht darin, Funktionsreferenzen auf Variablen zu schreiben. Variablennamen sollten kurz das Wesentliche der Funktion beschreiben (siehe Empfehlung Nr. 1 zur Ableitung von Funktionsnamen).

const readItemsJson = json => {
  json.forEach(item => console.log(item.name));
};

const handleButtonClick = () => {
  fetch('/items.json')
    .then(response => response.json());
    .then(readItemsJson);
};

myButton.addEventListener('click', handleButtonClick);

Während des Refactorings haben wir verschachtelte Pfeilfunktionen extrahiert und in die Variablen readItemsJsonund geschrieben handleButtonClick. Die Verschachtelungsebene des Codes wurde von 3 auf 2 verringert. Jetzt ist der Code verständlicher geworden.

Eine weitere Option zum Umgestalten dieses Codes besteht darin, die gesamte Funktion in ein Format zu übersetzen async/await. Dies ist eine großartige Möglichkeit, das Problem verschachtelter Funktionen zu lösen:

const handleButtonClick = async () => {
  const response = await fetch('/items.json');
  const json = await response.json();
  json.forEach(item => console.log(item.name));
};

myButton.addEventListener('click', handleButtonClick);

Es wird empfohlen, zu tiefe Verschachtelungsebenen von Pfeilfunktionen zu vermeiden, sie als separate Funktionen in Variablen zu extrahieren oder wenn möglich die Syntax zu verwenden async/await.

Zusammenfassung

JavaScript-Pfeilfunktionen sind anonym. Um das Debuggen von Code produktiver zu gestalten, wird empfohlen, Variablen zu verwenden, in denen Funktionsreferenzen gespeichert sind. Dadurch kann JavaScript Funktionsnamen anzeigen.

Eingebettete Pfeilfunktionen sind nützlich, wenn der Funktionskörper nur einen Ausdruck enthält. Die

Betreiber >, <, <=und >=wie ein Pfeil =>, der verwendet wird , wenn die Funktionsschalter zu deklarieren. Wenn diese Operatoren im Hauptteil einer einbettbaren Pfeilfunktion verwendet werden, sollten Sie die Codekonvertierung in Betracht ziehen.

Die Syntax von Objektliteralen { prop: 'value' }ähnelt einem Codeblock {}. Wenn ein Objektliteral in eine eingebettete Pfeilfunktion eingefügt wird, muss es daher in Klammern eingeschlossen werden:() => ({ prop: 'value' }).

Zu hohe Verschachtelungsebenen von Funktionen verwirren denjenigen, der den Code liest. Es wird empfohlen, die Verschachtelungsebene von Funktionen zu reduzieren, indem Sie sie extrahieren und in Variablen schreiben. Ein anderer Ansatz zur Reduzierung der Verschachtelungsebene besteht in der Verwendung eines Konstrukts async/await.

Liebe Leser! Kennen Sie interessante Tricks zur Verwendung von Pfeilfunktionen?