Funcții săgeată în Javascript

Funcțiile săgeată – numite și funcții „săgeată grasă”, sunt o modalitate relativ nouă de a scrie funcții concise în JavaScript. Ele au fost introduse de specificațiile ECMAScript 6 și de atunci au devenit cea mai populară funcție ES6. Funcțiile săgeată ne permit să folosim operatorul fat arrow => pentru a defini rapid funcții JavaScript, cu sau fără parametri. Avem posibilitatea de a omite acoladele curly brace și cuvintele cheie function și return atunci când creăm o nouă funcție JavaScript pentru a scrie o sintaxă mai scurtă a funcțiilor. Acestea nu numai că economisesc timp, dar produc, de asemenea, funcții curate și mai ușor de citit.

În acest articol, să analizăm câteva scenarii din lumea reală pentru a crea funcții săgeată – folosind ES6 față de mai vechea notație ECMAScript 5, astfel încât să vedem cum se compară cele două sintaxe între ele.

Cea mai simplă sintaxă a funcțiilor săgeată este atunci când funcția nu are parametri. În exemplul de mai jos, sintaxa ECMAScript 5 declară o expresie de funcție și o atribuie variabilei birthday. Aceasta emite un simplu șir de text pe consolă, spunând „La mulți ani!”:

În sintaxa funcției săgeată, parantezele curly brackets și cuvintele cheie function și return dispar. Acum, întreaga funcție ocupă doar o singură linie. Parantezele goale indică faptul că funcția nu are niciun parametru, iar săgeata grasă leagă corpul funcției de parametrii (momentan inexistenți):

Un singur parametru

Să extindem exemplul anterior cu un singur parametru, mai exact numele. Vechea sintaxă ES5 primește un parametru și adaugă valoarea acestuia la șirul care urmează să fie returnat:

Sintaxa funcției săgeată face, în esență, același lucru. Trebuie să închidem numele parametrului între paranteze înainte de săgeata grasă și să omitem cuvântul cheie return în blocul de funcții:

Doi parametri

Potem folosi funcții săgeată cu oricât de mulți parametri dorim. De exemplu, iată același exemplu cu doi parametri, vârstă și nume. Acum, funcția birthday() are nevoie de două intrări pentru a returna șirul. Mai întâi, să folosim ECMAScript 5:

Și, iată același cod cu noua notație ES6:

Literali de obiect

De asemenea, putem utiliza sintaxa funcției săgeată pentru a declara funcții setter care permit utilizatorilor să stabilească valoarea unor literali de obiect. Funcția setBirthday() de mai jos permite utilizatorilor să seteze numele și vârsta persoanei care își aniversează ziua de naștere:

Utilizând notația arrow function, este nevoie de o singură linie pentru a defini aceeași funcție setter:

Manipulare array

Potem folosi funcții săgeată și pentru a manipula array-uri JavaScript. De exemplu, să ne uităm la array-ul persons care include trei literali de obiect, fiecare având o proprietate nume și vârstă:

Metoda map() încorporată în JavaScript ne permite să apelăm aceeași funcție pe fiecare element al matricei. Utilizând notația tradițională ES5, putem returna proprietatea nume a fiecărei persoane în felul următor:

Cu ajutorul notației funcției săgeată, putem efectua aceeași sarcină într-o singură linie:

Când să nu folosiți funcțiile săgeată

Deși funcțiile săgeată au multe cazuri de utilizare, ele vin și cu unele limitări. Există câteva scenarii în care nu putem sau nu ar trebui să folosim sintaxa funcțiilor săgeată.

Cel mai important, nu putem crea constructori cu funcții săgeată. Dacă folosim cuvântul cheie new împreună cu sintaxa fat arrow, consola va arunca o eroare. Acest lucru se întâmplă deoarece JavaScript tratează funcțiile arrow în același mod ca și metodele obiect. Ca urmare, acestea nu pot avea propriile metode, ceea ce ar fi o caracteristică esențială a obiectelor JavaScript. În plus, nu putem folosi sintaxa ES6 pentru a declara literali de obiect și funcții callback care conțin metode care utilizează cuvântul cheie this, deoarece funcțiile săgeată tratează acest lucru într-un mod diferit.

Concluzie

Funcțiile săgeată oferă dezvoltatorilor o prescurtare utilă pentru a scrie expresii de funcții în JavaScript. Sintaxa fat arrow are multe cazuri de utilizare, astfel încât a devenit rapid caracteristica ES6 favorită a comunității JavaScript. Dacă este utilizată în mod consecvent, noua notație compactă poate economisi mult timp și lățime de bandă și poate îmbunătăți lizibilitatea codului.

Vă mulțumim că ați citit.

.