Sintaksa

Arrow funkcija ili tzv.“fat arrow” je nova sintaksa za pisanje JavaScript funkcija. Najbitnija karakteristika arrow funkcije je kraća sintaksa koja implicira bolju preglednost. U zavisnosti od broja parametra i tela funkcije sintaksa ima više različitih načina pisanja koda:.

arrow funkcija

a) Izgled sintakse kada telo funkcije ima više izraza

Kod ovog slučaja sintaksa arrow funkcije je najsličnija običnoj funkciji, a jedina razlika se dobija pri ukidanju ključne reči “function” a dodavanjem “fat arrow”. Ova sintaksa se koristi kada u telo funkcije ima više izraza:

b) Izgled sintakse kada telo funkcije ima jedan izraz

Ukoliko telo ima samo jedan izraz koji je vraćen sa “return” onda možemo da izbacimo i vitičaste zagrade i rezervisanu reč “return”:

Primer

c) Izgled sintakse kada se funkciji ne prosledjuju parametri

Ako se funkciji ne prosledjuju parametri onda moraju da postoje prazne zagrade () u delu rezervisanom za parametre funkcije

d) Izgled sintakse kada se fukciji prosledjuje samo jedan parametar

Ukoliko se funkciji prosedjuje samo jedan parametar onda možemo da izbacimo i zagrade oko parametara:

Primer

Prednost nove sintakse se još bolje vidi kada koristimo nove metode za iteraciju nada nizovima:

Primer

e) Izgled sintakse kada vraća “Object Literal”

Vraćanje objeknogt literala sa ES5 sintaksom izgleda ovako:

Prema dosadašnjim pravilima prethodni zadatak sa arrow funkcijom bi izgledao ovako:

Medjutim ovakava sintaksa nije dobra, a funkcija vraća undefined, jer parser vitičaste zagrade prepozanje kao telo funkcije a ne kao objekt literal. Stoga po njemu sintaksa sa dvotačkom u telu funkcije nije dobra. Da bi parser prepozanao da je u pitanju ES6 sintaksa potrebno je oko objektnog literala staviti obične zagrade:

Domen ključne reči “this”

arrow funkcija

Arrow function umesto da primenjuje neko od 4 standardna pravila za povezivanje this, ona sasvim zaobilazi standardni mehanizam i povezuje this sa okružujućim opsegom vidljivosti (leksički opseg vidljivosti). Kod pozivanja ovih funkcija this nasledjuje značenje this iz okružujuće funkcije. Uprošteno this arrow funkcije se izjednačava sa onim na šta bi ukazivalo this iz spoljne funkcije koja okružuje arrow funkciju (ona unutar sebe ima ugradjen engine koji praktično zamenjuje poznati mehanizam: “self=this”). Kada se koristi arrow funkcija nije bitan način i mesto pozivanja funkcije, već samo na šta ukazuje this iz spoljne funkcije.

NAPOMENA:
Značenje koje je operator this dobio unutar arrow funkcije se ne može kasnije promeniti! Tako da ne može biti pregaženo ni sa predefinisanim metodama bind(), apply() ili call() pa čak ni sa operatorom “new”.

Primer – Problem sa closure

Poznat je problem kada clousure funkcija unutar objekta “izgubi” referencu na taj objekta: :

Rezervisan reč “this” u okviru clousure funkcije spajanjeImena() je izgubila referencu na objekat osoba i ukazuje na globalni objekat. Ovaj problem se može rešiti korišćenjem arrow funkcije, jer će njeno značenje rezervisane reči “this” biti izjednačeno sa značenjem this iz okružujuće funkcije. U ovome slučaju okružujuća funkcija je punoIme(), i ukazuje na objekat osoba. Pa će i this unutar arrow funkcije takodje ukazivati na objekat “osoba”.

Kada koristiti arrow funkciju?

Arrow funkciju ne treba koristiti uvek tj. kao totalnu zamenu za klasičnu deklaraciju funkcije. Postoje slučajevi kad arrow funkcija “zasija” punim sjajom, ali takodje postoje slučajevi kada jednostavno ne može da se koristi.

Preporuka za korišćenje arrow funkcije

Generalno je preporuka da se arrow funkcija koristi kada imamo jednostavne funkcije sastavljene od jednog iskaza, gde je jedini iskaz return ili neka izračunata vrednost a fa se u okviru tela funkcije ne koristi “this”, osim ako nije u pitanju closure.

Primer

Slučajevi kada treba izbegavati arrow funkciju

Arrow funkciju ne treba koristiti:

  • a) Ako se u okviru metode objekta koristi rezervisana reč “this” (ovaj stav ne važi za closure, jer tada je poželjno koristiti arrow funkciju), jer “this” tada ukazuje na globalni objekat
  • b) Ako je u pitanju dinamički kontekst, kao što je callback funkcija u okviru EventListener-a, jer “this” ne ukazuje na objekat na koji je zakačen listener nego na globalni objekat:
  • c) U okviru konstruktorske funkcije, jer “this” bi trebalo da ukazuje na novo generisan objekt:
  • d) Kada je u funkciji potreban “arguments” objekat, jer kada koristimo arrow funkciju nemamo pristup “arguments” objektu.
Podelite:

2 Responses to “Arrow funkcija”

  1. Adam

    Dragoljube, hvala na ovom detaljnom objašnjenju,
    pretražio sam mnoge sajtove i preslušao mnoga YT objašnjenja na temu Arrow i this keyworda ali nigde nije lepo objašnjeno kao ovde, sve na jednom mestu! Tek sada sam skapirao kako funkcioniše this u okviru arrow i obične funkcije.
    Hvala i pozdrav!

Ostavite komentar