Probabil că ați văzut funcții săgeată scrise în câteva moduri diferite.

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

Unele au paranteze în jurul parametrilor, în timp ce altele nu. Unii folosesc paranteze cretate și return cuvânt cheie, alții nu. Una chiar se întinde pe mai multe linii, în timp ce celelalte constau dintr-o singură linie.

Interesant este că atunci când invocăm funcțiile săgeată de mai sus cu același argument, obținem același rezultat.

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

De unde știi ce sintaxă funcție săgeată să folosești? Asta va descoperi acest articol: cum să declarați o funcție săgeată.

O diferență majoră

Funcțiile săgeți sunt un alt mod – mai concis – de a scrie expresii funcționale. Cu toate acestea, nu au propria lor legătură cu this cuvânt cheie.

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

//Arrow function expression
const addNumbers = (number1, number2) => number1 + number2;

Când invocăm aceste funcții cu aceleași argumente, obținem același rezultat.

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

Există o diferență sintactică importantă de remarcat: funcțiile săgeată folosesc săgeata => in loc de function cuvânt cheie. Există și alte diferențe de care trebuie să fii conștient atunci când scrii funcții săgeată și asta vom explora în continuare.

Paranteze

Unele funcții săgeată au paranteze în jurul parametrilor, iar altele nu.

//Example with parentheses
const addNums = (num1, num2) => num1 + num2;

//Example without parentheses
const addTwo = num => num + 2;

După cum se dovedește, numărul de parametri pe care o funcție săgeată îi determină dacă trebuie sau nu să includem paranteze.

O funcție săgeată cu zero parametri necesită paranteze.

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

O funcție săgeată cu un parametru face nu necesită paranteze. Cu alte cuvinte, parantezele sunt opționale.

const addTwo = num => num + 2;

Deci, putem adăuga paranteze la exemplul de mai sus și funcția săgeată încă funcționează.

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

O funcție săgeată cu parametri multipli necesită paranteze.

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

Funcțiile săgeți acceptă, de asemenea parametrii de odihnă și destructurare. Ambele caracteristici necesită paranteze.

Acesta este un exemplu de funcție săgeată cu parametru rest.

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

Și iată una care folosește destructurare.

const location = {
   country: "Greece",
   city: "Athens"
};

const travel = ({city}) => city;

console.log(travel(location));
//Result: "Athens"

Pentru a rezuma: dacă există un singur parametru – și nu utilizați parametri de repaus sau destructurare – atunci parantezele sunt opționale. În caz contrar, asigurați-vă că le includeți.

Corpul funcțional

Acum că avem regulile de paranteză acoperite, să trecem la corpul funcției unei funcții săgeată.

Un corp funcție săgeată poate avea fie „Corp concis” sau „corp bloc”. Tipul corpului influențează sintaxa.

În primul rând, sintaxa „corpului concis”.

const addTwo = a => a + 2;

Sintaxa „corpului concis” este doar aceasta: este concisă! Nu folosim return cuvânt cheie sau paranteze buclate.

Dacă aveți o funcție de săgeată pe o singură linie (cum ar fi exemplul de mai sus), atunci valoarea este returnată implicit. Deci puteți omite return cuvânt cheie și parantezele crețate.

Acum să ne uităm la sintaxa „blocare corp”.

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

Observați că folosim ambii paranteze cretate și return cuvânt cheie în exemplul de mai sus.

În mod normal, vedeți această sintaxă atunci când corpul funcției este mai mult de o linie. Și acesta este un punct cheie: înfășurați corpul unei funcții de săgeată cu mai multe linii între paranteze bucle și utilizați return cuvânt cheie.

Obiecte și funcții săgeată

Există încă o nuanță de sintaxă de aflat: înfășurați corpul funcției între paranteze când doriți să returnați un obiect expresie literală.

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

Fără paranteze, vom obține o eroare.

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

Dacă găsiți sintaxa funcției săgeată puțin confuză, nu sunteți singur. Este nevoie de ceva timp pentru a vă familiariza cu ea. Dar conștientizarea opțiunilor și cerințelor dvs. sunt pași în această direcție.

Scriu despre învățarea programării și despre cele mai bune modalități de a face acest lucru (amymhaddad.com).