Funkcije strelica vs. Uobičajene funkcije u JavaScriptu

Kao gotovo svaki moderni programski jezik, JavaScript nudi načine za stvaranje funkcija koje omogućuju ponovnu upotrebu koda. Za one koji nisu upoznati s jezikom, postoje dva različita načina za deklariranje funkcije u JavaScriptu.

Izvorno, funkcija korištena je ključna riječ, a kasnije je stvorena sintaksa strelice. Iako se razlikuju u dostupnosti opsega, i ključna riječ funkcije i sintaksa strelice daju slične rezultate.

Nemogućnost razlikovanja između to dvoje može uzrokovati probleme i dovesti do neispravne upotrebe. Za modernog JS programera neophodno je razumjeti kako svaka deklaracija funkcije utječe na opseg i vidljivost.

Što su JavaScriptove funkcije strelica?

JavaScriptove funkcije strelica su alternativni način definiranja funkcija koje ne koriste zadane funkcija ključna riječ:

funkcijalogMessage(poruka) {
konzola.log (poruka);
}
konst logMessage = (poruka) => {
konzola.log (poruka);
}
konst logMessage = poruka =>konzola.log (poruka);

Gore možete vidjeti istu poruku napisanu na tri različita načina. Prvi koristi metodu deklaracije regularne funkcije. Sljedeća dva pokazuju dva načina korištenja funkcija strelica ES6.

JavaScript je prvi put usvojio sintaksu funkcije strelice izdavanjem standarda ECMAScript 2015. Funkcije strelica ponudile su čist i koncizan način za brzo stvaranje funkcija i zanimljivo rješenje za nekoliko dugotrajnih problema s opsegom unutar JavaScripta.

Ove su značajke brzo učinile funkcije strelica hit među mnogim programerima. Programeri koji istražuju modernu JavaScript bazu koda jednako će vjerojatno pronaći funkcije strelica kao i obične funkcije.

Kako se funkcije strelica razlikuju od uobičajenih funkcija u JavaScriptu?

Na prvi pogled, čini se da se funkcije strelica ne razlikuju mnogo od funkcija deklariranih pomoću ključne riječi function. Izvan sintakse, obje enkapsuliraju višekratno upotrebljivi skup radnji koje se mogu pozvati s drugog mjesta u kodu.

Unatoč sličnostima između njih dvoje, postoje neke razlike kojih programeri moraju biti svjesni.

Razlika u opsegu

Kad god je regularna funkcija deklarirana u JavaScriptu, to funkcija funkcionira kao zatvaranje koje stvara vlastiti opseg. To može uzrokovati problem pri korištenju određenih specijaliziranih funkcija kao što je setTimeout i setInterval.

Prije ES6 postojao je značajan broj zaobilaznih rješenja koja bi podigla stavke na više razine opsega za korištenje u povratnim pozivima. Ti su hakovi djelovali, ali često su bili teški za razumijevanje i mogli su uzrokovati probleme s određenim varijablama koje su prebrisane.

Funkcije strelica riješile su oba problema na jednostavan i elegantan način. Kada se funkcija strelice koristi kao dio povratnog poziva, ona ima pristup istom opsegu kao i funkcija iz koje je pozvana.

To je omogućilo da se funkcije koriste kao povratni pozivi bez gubitka pristupa kontekstu u kojem je izvorni događaj pozvan. Kao jednostavan test za prikaz ovog principa na djelu, možete postaviti funkciju odgođenog slanja poruka kao što je ova u nastavku:

funkcijaodgođena poruka(poruka, kašnjenje) {

 setTimeout(funkcija(poruka) {
konzola.log (poruka);
 }, kašnjenje);
}
odgođena poruka("Pozdrav svijete", 1000);

Funkcija je jednostavna, prihvatljiva poruka i odgoditi u milisekundama. Nakon što odgoda prođe, trebala bi zabilježiti poruku u konzolu. Međutim, kada se kôd izvrši, nedefiniran bit će prijavljen na konzolu umjesto poruke koja je proslijeđena.

Kada se izvrši funkcija povratnog poziva, opseg se mijenja i izvorna poruka više nije dostupna. Korištenje poruke unutar zatvarača zahtijeva da se poruka podigne na globalnu varijablu, što može rezultirati prebrisavanjem prije povratnog poziva.

Funkcija strelice ispravno je rješenje za ovaj problem. Ako zamijenite prvi argument za setTimeout, opseg se može održavati, a funkcija će imati pristup poruci koja je proslijeđena odgođena poruka.

funkcijaodgođena poruka(poruka, kašnjenje) {

 setTimeout(() => {
konzola.log (poruka);
 }, kašnjenje);
}
odgođena poruka("Pozdrav svijete", 1000);

Sada, kada se izvrši, odgođena poruka funkcija će zabilježiti poruku. Dodatno, to omogućuje da više poruka bude stavljeno u red čekanja s različitim odgodama, a sve će se i dalje pojaviti u točno vrijeme.

To je zbog činjenice da svaki put odgođena poruka koristi, generira vlastiti opseg s vlastitom kopijom interne funkcije strelice.

Čitljivost koda

Iako su funkcije strelica korisne kao povratni pozivi, one se također koriste za održavanje čistoće i konciznosti koda. U gornjem odjeljku možete vidjeti da pomoću funkcije strelice postaje jasno što će se dogoditi kada se odgođena poruka funkcija se zove.

Kako funkcije postaju složenije, malo jasnoće može kod učiniti mnogo čitljivijim. Prilikom sastavljanja objekata, ovo može pojednostaviti kod pri dodavanju kratkih funkcija:

razredabrojač{
 _broj = 0;
 prirast = () => {
ovaj._count += 1;
 }
 dekrement = () => {
ovaj._brojiti -= 1;
 }
 brojati = () => {
povratakovaj._računati;
 }
}
neka ct = novi brojač();

Uloga u objektno orijentiranom programiranju

Iako su JavaScriptove funkcije strelica sastavni dio funkcionalnog programiranja, one također imaju svoje mjesto u njemu objektno orijentirano programiranje. Funkcije strelica mogu se koristiti unutar deklaracija klasa:

razredaOrderLineItem{
 _LineItemID = 0;
 _Proizvod = {};
 _Kol = 1;
konstruktor(proizvod) {
ovaj._LineItemID = crypto.randomUUID();
ovaj._Proizvod = proizvod
 }
 promijeniLineItemQuantity = (newQty) => {
ovaj._Qty = newQty;
 }
}

Korištenje funkcije strelice za deklariranje metoda unutar deklaracije klase ne mijenja ponašanje funkcije unutar klase. Izvan klase, međutim, izlaže funkciju, dopuštajući da je koriste druge klase.

Običnim funkcijama ne može se pristupiti izvan deklaracije klase bez pozivanja. To znači da dok druge deklaracije klasa mogu naslijediti ove funkcije, njima se ne može izravno pristupiti za sastavljanje drugih klasa.

Kada biste trebali koristiti JavaScriptove funkcije strelica?

JavaScriptove funkcije strelica nevjerojatno su moćna značajka koja programerima daje daleko veću kontrolu nad opsegom kojem funkcija ima pristup. Znanje kada povratni poziv treba imati pristup nadređenom opsegu, a kada ne, može pomoći razvojnom programeru da odredi koju vrstu deklaracije koristiti.

Funkcije strelica programerima daju jasan i koncizan način pisanja povratnih poziva bez izlaganja dijelova opsega koji bi trebali biti skriveni. Oni također omogućuju stvaranje čistih i jednostavnih kompozicija, dodatno omogućujući funkcionalno programiranje u JavaScriptu.

JS programeri moraju biti svjesni razlika između dviju sintaksa i voditi računa o tome koja je sintaksa prikladna kada deklariraju svoje funkcije.