fat arrow Archives | Web Programiranje

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:.

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:

//ES5
var multiply = function(x, y) {
    var tekst = "Ovo je funkcija";
    console.log(tekst);
};

//ES2105
var multiply = (x, y) => {
    var tekst = "Ovo je funkcija";
    console.log(tekst)
};

//ES5

var multiply = function(x, y) {

var tekst = "Ovo je funkcija";

console.log(tekst);

};

//ES2105

var multiply = (x, y) => {

var tekst = "Ovo je funkcija";

console.log(tekst)

};

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

//ES5
var multiply = function(x, y) {
    return x * y;
};


//ES2105
var multiply = (x, y) => x * y;

//ES5

var multiply = function(x, y) {

return x * y;

};

//ES2105

var multiply = (x, y) => x * y;

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

// ES5
var stampa = function () {
  console.log ("Stampa iz obične funkcije");
}

//ES2105
var stampa2 = () => {console.log("Stampa iz arrow funkcije")};

// ES5

var stampa = function () {

console.log ("Stampa iz obične funkcije");

}

//ES2105

var stampa2 = () => {console.log("Stampa iz arrow 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

//ES5
var duplo = function(x) {
    return x * 2;
}

//ES2105
var duplo = x => x * 2;

//ES5

var duplo = function(x) {

return x * 2;

}

//ES2105

var duplo = x => x * 2;

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

Primer

var niz = [1,2,3];

// ES5:
var duplo = function(x) {
  var noviNiz = [];
  for (var x of niz) {
      noviNiz.push(x*2);
    };
   return noviNiz;
}
console.log(duplo(niz));


// ES2105 bez arrow funkcije:
var noviNiz = niz.map (function (clan){
    return clan * 2;
});
console.log(noviNiz);


// ES2015
var noviNiz = niz.map ( clan => clan*2 );
console.log(noviNiz);

var niz = [1,2,3];

// ES5:

var duplo = function(x) {

var noviNiz = [];

for (var x of niz) {

noviNiz.push(x*2);

};

return noviNiz;

}

console.log(duplo(niz));

// ES2105 bez arrow funkcije:

var noviNiz = niz.map (function (clan){

return clan * 2;

});

console.log(noviNiz);

// ES2015

var noviNiz = niz.map ( clan => clan*2 );

console.log(noviNiz);

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

Vraćanje objeknogt literala sa ES5 sintaksom izgleda ovako:

var kvadrat = function(n) {
    return { kvadratBroja: n * n };
};

var kvadrat = function(n) {

return { kvadratBroja: n * n };

};

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

let kvadrat = n => { kvadratBroja: n * n };   // Vraća: undefined

1	let kvadrat = n => { kvadratBroja: n * n }; // Vraća: undefined

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:

let kvadrat = n => ({ kvadratBroja: n * n });
console.log(kvadrat(5));   // Vraća: {kvadratBroja: 25}

1 2	let kvadrat = n => ({ kvadratBroja: n * n }); console.log(kvadrat(5)); // Vraća: {kvadratBroja: 25}