Učinkovita uporaba puščičnih funkcij v JavaScriptu

JavaScript se je skozi leta znatno razvil in razvijalcem ponudil vedno zmogljivejša orodja. Ena od najpomembnejših izboljšav v novejših različicah je uvedba Arrow-funkcij (=>) z ES6. Ta nova sintaksa ne le da naredi funkcije bolj kompaktne, temveč tudi razreši težave v zvezi s kontekstom this. V tem priročniku ti bom predstavil osnovno znanje o Arrow-funkcijah in ti pokazal, kako jih lahko smiselno vključiš v svoj kode.

Najpomembnejši zaključki

• Arrow-funkcije ponujajo krajšo sintakso za deklaracijo funkcij in intuitivno zajemajo kontekst this.
• So še posebej koristne pri funkcionalnostih, ki pričakujejo vračanje vrednosti v obliki izrazov.
• Uporaba Arrow-funkcij lahko naredi kodo bolj berljivo in vzdržljivo.

Navodila po korakih

Arrow-funkcije imajo svojo lastno sintakso, ki se razlikuje od tradicionalne deklaracije funkcij. Poglejmo skupaj različne vidike te sintakse, da razumeš, kako deluje in kje jo lahko uporabiš.

Najprej tradicionalne funkcije v JavaScriptu. Tukaj vidiš primer, kako je funkcija dekretirana z uporabo ključne besede function:

To funkcijo na primer predamo setTimeout, da izvedemo anonimno funkcijo po eni sekundi:

To je standardna metoda za uporabo funkcij v JavaScriptu. Vendar pa lahko to sintakso izboljšamo tako, da odstranimo ključno besedo function in namesto tega uporabimo Arrow-funkcijo. Ta doseže enak cilj, vendar potrebuje manj vrstic kode. Sintaksa izgleda tako:

Če vzamemo praktičen primer, da to ponazorimo. Deklariram array, ki vsebuje vrednosti od 1 do 5:

Zdaj lahko uporabimo metodo findIndex, da najdemo indeks določene vrednosti (npr. 3) v arrayu. Pri uporabi tradicionalnih funkcij je koda videti tako:

To deluje, toda poglejmo, kako lahko uporabimo Arrow-funkcijo za izboljšanje kode. Odstranimo ključno besedo function in uporabimo Arrow-sintakso:

Možemo celo še dodatno skrajšati telo funkcije, tako da odstranimo oklepaje in ključno besedo return. Tako dobimo še bolj kompaktno obliko:

To deluje odlično, in dobimo želeni indeks.

Arrow-funkcija je kompaktna in znatno poenostavi sintakso. Še ena prednost je ravnanje s this. Poglejmo primer z objekti. Imaš objekt, ki vsebuje metodo, ki dostopa do lastnosti v objektu:

Ko to metodo kličemo z setTimeout in jo napišemo kot tradicionalno funkcijo, to povzroči težavo. Izhod this ne bo več pričakovan objekt:

this bo neoblikovan. Vendar pa, če ključno besedo function nadomestiš z Arrow-funkcijo, ostane this zasidran v okoliškem kontekstu:

Tukaj bi moral biti izhod pravilen in prikazati tekst v konzoli. Arrow-funkcija je v tem primeru preprečila izgubo konteksta this.

Kje še lahko uporabimo Arrow-funkcije? So še posebej uporabne, ko želiš funkcije predati metodam, kot so map, filter ali reduce. Te metode pričakujejo funkcijo kot argument in se prednostno izkoristijo z krajšo sintakso. Tukaj je preprost primer z map, ki kvadrira elemente arraya:

Še ena uporabna funkcija Arrow-funkcij je, da ne potrebuješ oklepajev, ko tvoja funkcija vrača le en izraz. To še dodatno poenostavi in pregledno kodo:

Vendar pa bodi pozoren, da v določenih situacijah, na primer z večvrstnimi telesi funkcij, ostaja uporaba ključne besede function nujna. Tako da je to odvisno od tebe, da izbereš ustrezen način glede na kontekst.

Povzetek - Arrow-funkcije v JavaScriptu jasno razložene

Arrow-funkcije so dragocena razširitev v JavaScriptu, ki ne le da zmanjša delo pri pisanju, ampak tudi izboljša berljivost kode. Zahvaljujoč svojemu intuitivnemu ravnanju s this so še posebej koristne v sodobnih spletnih aplikacijah. Če Arrow-funkcije uporabljaš na primernih mestih v svoji kodi, lahko koristiš znatno izboljšanje vzdržnosti.