Pfeilfunktion JavaScript-Lernprogramm - Deklarieren einer JS-Funktion mit der neuen ES6-Syntax

Sie haben wahrscheinlich Pfeilfunktionen gesehen, die auf verschiedene Arten geschrieben wurden.

//example 1 const addTwo = (num) => {return num + 2;}; //example 2 const addTwo = (num) => num + 2; //example 3 const addTwo = num => num + 2; //example 4 const addTwo = a => { const newValue = a + 2; return newValue; }; 

Einige haben Klammern um die Parameter, andere nicht. Einige verwenden geschweifte Klammern und diereturnSchlüsselwort, andere nicht. Eine erstreckt sich sogar über mehrere Zeilen, während die anderen aus einer einzelnen Zeile bestehen.

Interessanterweise erhalten wir das gleiche Ergebnis, wenn wir die obigen Pfeilfunktionen mit demselben Argument aufrufen.

console.log(addTwo(2)); //Result: 4 

Woher wissen Sie, welche Pfeilfunktionssyntax verwendet werden soll? In diesem Artikel wird Folgendes erläutert: Deklarieren einer Pfeilfunktion.

Ein großer Unterschied

Pfeilfunktionen sind eine weitere - präzisere - Möglichkeit, Funktionsausdrücke zu schreiben. Sie haben jedoch keine eigene Bindung an das thisSchlüsselwort.

//Function expression const addNumbers = function(number1, number2) { return number1 + number2; }; //Arrow function expression const addNumbers = (number1, number2) => number1 + number2; 

Wenn wir diese Funktionen mit denselben Argumenten aufrufen, erhalten wir dasselbe Ergebnis.

console.log(addNumbers(1, 2)); //Result: 3 

Es gibt einen wichtigen syntaktischen Unterschied: Pfeilfunktionen verwenden den Pfeil =>anstelle des functionSchlüsselworts. Es gibt andere Unterschiede, die Sie beachten müssen, wenn Sie Pfeilfunktionen schreiben, und das werden wir als Nächstes untersuchen.

Klammern

Einige Pfeilfunktionen haben Klammern um die Parameter, andere nicht.

//Example with parentheses const addNums = (num1, num2) => num1 + num2; //Example without parentheses const addTwo = num => num + 2; 

Wie sich herausstellt, bestimmt die Anzahl der Parameter einer Pfeilfunktion, ob Klammern eingefügt werden müssen oder nicht.

Eine Pfeilfunktion mit Nullparametern erfordert Klammern.

const hello = () => "hello"; console.log(hello()); //Result: "hello" 

Eine Pfeilfunktion mit einem Parameter erfordert keine Klammern. Mit anderen Worten, Klammern sind optional.

const addTwo = num => num + 2; 

Wir können dem obigen Beispiel also Klammern hinzufügen, und die Pfeilfunktion funktioniert weiterhin.

const addTwo = (num) => num + 2; console.log(addTwo(2)); //Result: 4 

Eine Pfeilfunktion mit mehreren Parametern erfordert Klammern.

const addNums = (num1, num2) => num1 + num2; console.log(addNums(1, 2)); //Result: 3 

Pfeilfunktionen unterstützen auch Ruheparameter und Destrukturierung . Beide Funktionen erfordern Klammern.

Dies ist ein Beispiel für eine Pfeilfunktion mit einem Ruheparameter .

const nums = (first, ...rest) => rest; console.log(nums(1, 2, 3, 4)); //Result: [ 2, 3, 4 ] 

Und hier ist eine, die Destrukturierung verwendet .

const location = { country: "Greece", city: "Athens" }; const travel = ({city}) => city; console.log(travel(location)); //Result: "Athens" 

Zusammenfassend: Wenn es nur einen Parameter gibt und Sie keine Ruheparameter oder Destrukturierungen verwenden, sind Klammern optional. Andernfalls müssen Sie sie unbedingt einschließen.

Der Funktionskörper

Nachdem wir die Regeln für Klammern behandelt haben, wenden wir uns dem Funktionskörper einer Pfeilfunktion zu.

Ein Pfeilfunktionskörper kann entweder einen "prägnanten Körper" oder einen "Blockkörper" haben. Der Körpertyp beeinflusst die Syntax.

Erstens die Syntax „prägnanter Körper“.

const addTwo = a => a + 2; 

Die Syntax „prägnanter Körper“ ist genau das: Sie ist prägnant! Wir benutzen das nichtreturnSchlüsselwort oder geschweifte Klammern.

Wenn Sie eine einzeilige Pfeilfunktion haben (wie im obigen Beispiel), wird der Wert implizit zurückgegeben. So können Sie das weglassenreturnSchlüsselwort und die geschweiften Klammern.

Schauen wir uns nun die Blockkörper-Syntax an.

const addTwo = a => { const total = a + 2; return total; } 

Beachten Sie, dass wir im obigen Beispiel sowohl geschweifte Klammern als auch das returnSchlüsselwort verwenden.

Normalerweise wird diese Syntax angezeigt, wenn der Hauptteil der Funktion mehr als eine Zeile umfasst. Und das ist ein wichtiger Punkt: Wickeln Sie den Körper einer mehrzeiligen Pfeilfunktion in geschweifte Klammern und verwenden Sie diereturnStichwort.

Objekte und Pfeilfunktionen

Es gibt noch eine weitere Syntaxnuance, die Sie kennen sollten: Umschließen Sie den Funktionskörper in Klammern, wenn Sie einen Objektliteralausdruck zurückgeben möchten.

const f = () => ({ city:"Boston" }) console.log(f().city) 

Ohne die Klammern erhalten wir einen Fehler.

const f = () => { city:"Boston" } //Result: error 

Wenn Sie die Syntax der Pfeilfunktion etwas verwirrend finden, sind Sie nicht allein. Es dauert einige Zeit, um sich damit vertraut zu machen. Die Kenntnis Ihrer Optionen und Anforderungen sind jedoch Schritte in diese Richtung.

Ich schreibe über das Programmierenlernen und die besten Methoden ( amymhaddad.com).