JavaScript-vejledning til pilfunktion - Sådan erklæres en JS-funktion med den nye ES6-syntaks

Du har sandsynligvis set pilefunktioner skrevet et par forskellige måder.

//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; }; 

Nogle har parenteser omkring parametrene, mens andre ikke har det. Nogle bruger krøllede parenteser ogreturnnøgleord, andre ikke. Man spænder endda over flere linjer, mens de andre består af en enkelt linje.

Interessant, når vi påberåber ovenstående pilfunktioner med det samme argument, får vi det samme resultat.

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

Hvordan ved du, hvilken pilfunktion syntaks du skal bruge? Det er, hvad denne artikel vil afdække: hvordan man erklærer en pilefunktion.

En stor forskel

Pilfunktioner er en anden - mere kortfattet - måde at skrive funktionsudtryk på. De har dog ikke deres egen binding til thisnøgleordet.

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

Når vi påberåber disse funktioner med de samme argumenter, får vi det samme resultat.

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

Der er en vigtig syntaktisk forskel at bemærke: pilfunktioner bruger pilen i =>stedet for functionnøgleordet. Der er andre forskelle at være opmærksomme på, når du skriver pilfunktioner, og det er hvad vi vil undersøge næste.

Parenteser

Nogle pilefunktioner har parenteser omkring parametrene, og andre ikke.

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

Som det viser sig, bestemmer antallet af parametre, som en pilfunktion har, om vi skal inkludere parenteser eller ej.

En pilfunktion med nul parametre kræver parenteser.

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

En pilfunktion med en parameter kræver ikke parenteser. Med andre ord er parenteser valgfri.

const addTwo = num => num + 2; 

Så vi kan tilføje parenteser til ovenstående eksempel, og pilfunktionen fungerer stadig.

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

En pilfunktion med flere parametre kræver parenteser.

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

Pile-funktioner understøtter også hvileparametre og destruktion . Begge funktioner kræver parenteser.

Dette er et eksempel på en pilfunktion med en hvileparameter .

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

Og her er en der bruger destrukturer .

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

For at opsummere: hvis der kun er én parameter - og du ikke bruger hvileparametre eller destrukturer - er parenteser valgfri. Ellers skal du sørge for at medtage dem.

Funktionsorganet

Nu hvor vi har fået dækket parentesreglerne, lad os henvende os til funktionsdelen af ​​en pilfunktion.

En pilfunktionslegeme kan enten have en "kortfattet krop" eller "bloklegeme". Kroppstypen påvirker syntaksen.

For det første den "koncise krop" -syntaks.

const addTwo = a => a + 2; 

Den "koncise krop" -syntaks er netop det: den er kortfattet! Vi bruger ikkereturnnøgleord eller krøllede parenteser.

Hvis du har en pilelinjefunktion (som eksemplet ovenfor), returneres værdien implicit. Så du kan udeladereturnnøgleord og krøllede parenteser.

Lad os nu se på "blok krop" -syntaks.

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

Bemærk, at vi bruger både krøllede parenteser og returnnøgleordet i ovenstående eksempel.

Du ser normalt denne syntaks, når funktionens hoveddel er mere end en linje. Og det er et nøglepunkt: vikle kroppen af ​​en flerlinjepilfunktion i krøllede parenteser og brugreturnnøgleord.

Objekter og pilefunktioner

Der er endnu en syntaksnuance at vide om: wrap funktionslegemet i parentes, når du vil returnere et objektets bogstavelige udtryk.

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

Uden parenteserne får vi en fejl.

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

Hvis du finder syntaks af pilfunktionen lidt forvirrende, er du ikke alene. Det tager lidt tid at blive fortrolig med det. Men at være opmærksom på dine muligheder og krav er skridt i den retning.

Jeg skriver om at lære at programmere og de bedste måder at gøre det på ( amymhaddad.com).