JavaScript Arrow funkcije

Klasična funkcija

U ovom primeru vidimo prost poziv callback funkcije za poziv metoda reduce() nekog niza. Poželeli smo da na ovaj način sve elemente niza spojimo u jedan string.

  var imena = ["Borko", "Miloš", "Ana", "Dušan", "Anđelka"];
  
  var svi = imena.reduce( function(rez,a) {
    return rez + " " + a;
  });
  
  console.log(svi);  // " Borko Miloš Ana Dušan Anđelka"
};

Kao callback metoda reduce() koristimo običnu funkciju kojoj se prosleđuju dva parametra. Prvi je dosadašnji rezultat, a drugi trenutni elemenat niza. Da bismo dobili jedan string od svih članova niza, prosto dodajemo trenutni elemenat niza na dosadašnji rezultat (sa razmakom). Tako "nakupljen" rezultat će na kraju biti i rezultat metoda reduce() i smešten u promenljivu svi.

Arrow funkcija

Sada možemo videti kako izgleda taj isti deo programa, ali kada kao callback koristimo Arrow funkciju.

  var imena = ["Borko", "Miloš", "Ana", "Dušan", "Anđelka"];
  
  var svi = imena.reduce( (rez,a) => rez + " " + a );
  
  console.log(svi);  // " Borko Miloš Ana Dušan Anđelka"
};

Pogledajte koliko je sve kraće zapisano pomoću Arrow funkcije. Najpre su parametri navedeni u zagradi, onda se navodi => strelica i za njom samo izraz koji se vraća kao rezultat (ono što je bilo u return iskazu klasične funkcije).

Reciomo da imamo objekat imena u kome se nalaze svojstva niz (niz nekih imena) i najduze (string u kome će se naći najduže ime iz niza). Tu je i metod calcNajduze() koji prolazi kroz sva imena iz niza i pronalazi najduže ime koje smešta u svojstvo najduze.

Najpre ćemo napraviti ovaj objekat koristeći obične funkcije.

var imena = {
  niz: ["Ana Štilić", "Bojana Najdić", "Aleksandar Radosavljević", "Borko Đorić"],
  najduze: "",

  calcNajduze: function() {
    var _self = this;
    this.niz.forEach( function(x) { 
      if (x.length > _self.najduze.length)
        _self.najduze = x;
    });
  }
};

Veoma nas interesuje sadržaj metoda calcNajduze(). Unutar njega pozivamo metod forEach() za niz. Znamo da forEach() funkcioniše tako što za svaki član niza poziva zadatu callback funkciju u kojoj ispitujemo da li je dužina tog elementa niza veća od najveće dužine.

Međutim, bilo bi pogrešno ako bismo unutar callback funkcije pokušali da koristimo objekat this. U ovom slučaju this bi predstavljao objekat window koji nema svojstvo najduze. Ima više načina da se ovo reši (npr. vezivanjem ispravnog objekta this za funkciju), a ovde smo se odlučili za korišćenje closure mehanizma. U nadfunkciji smo najpre "zapamtili" this u promenljivoj _self, kojoj onda pristupa callback podfunkcija.

Ovo može da bude malo nezgrapno, pošto kao programeri moramo stalno da razmišljamo i o kontekstu izvršavanja svake podfunkcije a posebno može da nas boli glava kod asinhronog izvršavanja kada se callback funkcije izvršavaju ko-zna-kad. Hajde da sada iskoristimo blagodeti ES6 specifikacije.

var imena = {
  niz: ["Ana Štilić", "Bojana Najdić", "Aleksandar Radosavljević", "Borko Đorić"],
  najduze: "",

  calcNajduze() {
    this.niz.forEach( (x) => { 
      if (x.length > this.najduze.length)
        this.najduze = x;
    });
  }
}

U ovom slučaju, kao callback koristimo Arrow funkciju. Pošto ona ne definiše svoj this, objekat this se preuzima iz nadređene funkcije. Ovde je to metod calcNajduze() i samim tim this je upravo objekat imena, kao što nam i treba.

Proširivanje prototipa objekta

Pogledajmo sledeći primer iz programerske prakse: JavaScript stringovi imaju mogućnost iščitavanja znaka na zadatoj poziciji, korišćenjem metode charAt(). Recimo da bismo voleli da postoji i metod setCharAt() kojim bismo mogli da zamenimo znak na nekoj poziciji.

Ništa problematično - JavaScript nam omogućava da bilo kom objektu proširimo prototip i tako dodamo novu funkcionalnost. Evo kako bismo to uradili na klasičan način:

  String.prototype.setCharAt = function(ind, znak) {
    // vraća novu "verziju" stringa sa promenjenim znakom
    return (this.substr(0,ind) + znak + this.substr(ind+1));
  };

  var s = "webxstudy".setCharAt(3, "n");  // s == "webnstudy"

Ovo je jako uprošćen metod - samo da vidimo koncept rada. Nismo vršili proveru indeksa (da nije negativan i da nije veći od dužine stringa), niti smo obezbedili da zadati znak mora biti samo jedan karakter. Kao što vidimo, moramo da se oslanjamo na objekat this, pošto se tu i nalazi sadržaj stringa!

Ako bismo pokušali to isto da uradimo sa Arrow funkcijom, napravili bismo grešku.

  String.prototype.setCharAt = (ind, znak) => this.substr(0,ind) + znak + this.substr(ind+1);

  var s = "webxstudy".setCharAt(3, "n");  // GREŠKA - objekat this nema metod substr()

Pošto Arrow funkcija nema sopstveni this, tačnije this se ne definiše tokom izvršavanja zavisno od konteksta izvršavanja funkcije, this koji pozivamo najverovatnije predstavlja objekat window.

Upravo zbog toga, Arrow funkcije nisu pogodne da njima deklarišemo metode objekata.