Arrow funkcija

Posted on 10/01/2018 at 18:00.Written by Dragoljub Živanović

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}

Pregled novih JavaScript standarda

Posted on 03/01/2017 at 16:46.Written by Dragoljub Živanović

Spisak novosti

eckma-script-standard

U ovome tekstu su izlistane sve novine koje su došle u sklopu novih JavaScript standarda, a obradjene su na sajltu webprogramiranje.org kroz različite članke:

Standard	Novina	Članak
ES2015	Novi način deklarisanja promenjivih sa ključnim rečima let & const	“let & const”
ES2015	Jednostavno definisanje podrazumevanih vrednosti parametara funukcije	“Podrazumevane vrednosti parametara funkcije”
ES2015	Sintaksna poboljšanja objektnog literala	“Object literal” poboljšanja
ES2015	Klase	“Klase u JavaScript-u”
ES2015	Nova petlja za iteraciju kroz iterable objekte: for…of	“Petlje i iteracije u JavaScript-u”
ES2015	Nove metode za rad sa nizovima: Array.from() Array.prototype.find() i Array.prototype.findIndex()	“Nove metode u radu sa nizovima”
ES2015	Nova sintaksa za import/export modula	“Modularno programiranje sa ES6 standardom
ES2015	Promisi	“Promise i asinhrono programiranje”
ES2015	Nova metoda konstruktorske funkcije: Object.assign()	Svojstva i metode konstruktorske f-je Object()
ES2015	Nove karakteristike “string-a”	“Nove karakteristike string-a”
ES2015	Arrow funkcija	“Arrow funkcija”
ES2015	Novi tipovi podataka Map, Set & Symbol	Novi tipovi podataka Map, Set & Symbol
ES2015	Spread & Rest operatori	“Spread & Rest operatori”
ES2015	Destruktuiranje podataka	“Destrukuiranje u JavaScript-u”
ES2015	Iteratori & Generatori	Iteratori i Generatori
ES2016	Nova metoda za rad sa nizovima: Array.prototype.inludes()	“Nove metode u radu sa nizovima”
ES2016	Eksponencijalni operator **	Eksponencijalni operator **
ES2017	Nove metode konstruktorske funkcije: Object.entries, Object.values i Object.getOwnPropertyDescriptors()	Svojstva i metode konstruktorske f-je Object()
ES2017	Async/Await sintaksi	“Async/Await” sintaksa za bolje “Promise”

Značenje operatora “this” u JavaScript-u

Posted on 18/10/2016 at 17:51.Written by Dragoljub Živanović

Uvod

Programeri koriste jedan od ova dva mehanizma:

leksički opseg vidljivosti
“this mehanizam”

Mehanizam koji koristi rezervisanu reč “this” pruža elegantan način za implicitno “prosledjivanje” reference na odredjeni objekat, što dovodi do čistijeg dizajna i olakšava višekratnu upotrebu koda. Programeri koji izbegavaju da koriste this mehanizam, uglavnom to rade zbog ne razumevanja principa rada tog mehanizma.

“This” nije promenjiva već specijalana reč programskog jezika (operator) i predstavlja vezu koja ukazuje na neku referencu (objekat). Aktivira se tj. dobija značenje tek u trenutku kada se pozove (invoke) funkcija koja ga sadrži.

Ne zavisi od mesta gde je funkcija deklarisana, već isključivo od mesta i načina na koji je funkcija pozvana!

Pravila za odredjivanje značenja “this”

Ceo postupak odredjivanja značenja se zasniva na prepoznavanju “ko” i na koji način poziva funkciju koja sadrži “this”. Redosled radnji je sledeći:

Prvo se proverava da li je konstruktorska funkcija pozvana sa operatorom new(). Ukoliko jeste pozvana na ovaj način onda je vrednost “this” objašnjena pod tačkom a) Pozivanje funkcije sa operatorom “new” ali ako nije pozvana na ovaj način onda se vrši…
… kontrola da li je funkcija pozvana uz pomoć metoda call(), apply() (ili bind). Ukoliko jeste pozvana na ovaj način onda je vrednost “this” objašnjena pod tačkom b) Pozivanje sa call(), apply() ili bind(), ali ako nije pozvana na ovaj način onda se vrši …
…kontrola da li je funkcija pozvana kao metoda objekta. Ukoliko jeste pozvana na ovje način onda je vrednost “this” objašnjena pod tačkom c) Pozivanje metode objekta, ali ako nije pozvana na ovaj način onda je…
…podrazumevano povezivanje, koje je objašnjeno pod tačkom d) Podrazumevano povezivanje

Ukoliko je nekim slučajem korišćeno više različitih pravila, primenjuje se prioritet prema redosledu iz prethodno opisanog postupka.