JavaScript lekcija za funkciju strelice - Kako proglasiti JS funkciju novom sintaksom ES6

Vjerojatno ste vidjeli funkcije strelica napisane na nekoliko različitih načina.

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

Neki imaju zagrade oko parametara, dok drugi nemaju. Neki koriste kovrčave zagrade ireturnključna riječ, drugi ne. Jedna se čak proteže na više linija, dok se ostale sastoje od jedne linije.

Zanimljivo je da kada pozivamo gornje funkcije strelice s istim argumentom, dobivamo isti rezultat.

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

Kako znati koju sintaksu funkcije strelice koristiti? To će otkriti ovaj članak: kako proglasiti funkciju strelice.

Glavna razlika

Funkcije strelica su još jedan - sažetiji - način pisanja izraza funkcija. Međutim, oni nemaju svoje vezanje za thisključnu riječ.

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

Kada te funkcije pozivamo s istim argumentima, dobivamo isti rezultat.

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

Važna je sintaksička razlika koju treba primijetiti: funkcije strelice koriste strelicu =>umjesto functionključne riječi. Postoje i druge razlike kojih biste trebali biti svjesni kad pišete funkcije strelica, a to ćemo istražiti dalje.

Zagrade

Neke funkcije strelica imaju zagrade oko parametara, a druge nemaju.

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

Ispostavilo se da broj parametara koje ima funkcija strelice određuje trebamo li uključiti zagrade ili ne.

Funkcija strelice s nula parametara zahtijeva zagrade.

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

Strelica funkcija s jednim parametrom se ne zahtijeva zagrade. Drugim riječima, zagrade nisu obvezne.

const addTwo = num => num + 2; 

Dakle, gornjem primjeru možemo dodati zagrade, a funkcija strelice i dalje radi.

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

Funkcija strelice s više parametara zahtijeva zagrade.

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

Funkcije strelica također podržavaju parametre odmora i destrukturiranje . Obje značajke zahtijevaju zagrade.

Ovo je primjer funkcije strelice s parametrom odmora .

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

I evo jedne koja koristi destrukturiranje .

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

Da rezimiramo: ako postoji samo jedan parametar - a ne koristite parametre ostatka ili destrukturiranje - onda su zagrade neobavezne. Inače ih obavezno uključite.

Tijelo funkcije

Sad kad smo pokrili pravila zagrada, okrenimo se tijelu funkcije funkcije strelice.

Tijelo funkcije strelice može imati ili „koncizno tijelo“ ili „blok tijelo“. Tip tijela utječe na sintaksu.

Prvo, sintaksa "sažetog tijela".

const addTwo = a => a + 2; 

Sintaksa "sažetog tijela" upravo je to: sažeta je! Ne koristimoreturnključne riječi ili kovrčave zagrade.

Ako imate funkciju strelice u jednom retku (poput gornjeg primjera), tada se vrijednost implicitno vraća. Dakle, možete izostavitireturnključna riječ i kovrčave zagrade.

Pogledajmo sada sintaksu "blok tijela".

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

Primijetite da u gornjem primjeru koristimo i kovrčave zagrade i returnključnu riječ.

Ovu sintaksu obično vidite kada je tijelo funkcije više od jednog retka. I to je ključna stvar: omotajte tijelo funkcije više crta strelice u kovrčave zagrade i upotrijebitereturnključna riječ.

Objekti i funkcije strelice

Treba znati još jednu sintaksnu nijansu: zamotajte tijelo funkcije u zagrade kada želite vratiti objektni literalni izraz.

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

Bez zagrada dobivamo pogrešku.

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

If you find the arrow function syntax a bit confusing, you’re not alone. It takes some time to get familiar with it. But being aware of your options and requirements are steps in that direction.

I write about learning to program and the best ways to go about it (amymhaddad.com).