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}

“Object literal” poboljšanja

Posted on 07/01/2018 at 15:58.Written by Dragoljub Živanović

Skraćena notacija za dodeljivanja promenjive

Poznato je da je moguće na osnovu promenjive i njene vrednosti, napraviti svojstva nekog objekta, postupak koji se koristio je bio sledeći:

var a = 'foo',
    b = 42,
    c = {};

var objekat = {
  a: a,
  b: b,
  c: c
};
// objekat.a vraća 'foo' ....

var a = 'foo',

b = 42,

c = {};

var objekat = {

a: a,

b: b,

c: c

};

// objekat.a vraća 'foo' ....

Sada sa novim standardom možemo ovo da skratimo:

var a = 'foo',
    b = 42,
    c = {};

var objekat = {
  a,
  b,
  c
};

var a = 'foo',

b = 42,

c = {};

var objekat = {

};

ES2015

Skraćena notacija definisanja metoda

Za definisanje metode objekta nije više potrebna ključna reč function i dvotačka. Tako da sada umesto:

osoba= {
 ime: "Pera",
 stampajIme: function() {
   console.log(this.ime);
 }
}

osoba= {

ime: "Pera",

stampajIme: function() {

console.log(this.ime);

}

možemo da koristimo skraćenu notaciju:

osoba= {
 ime: "Pera",
 stampajIme() {
   console.log(this.ime);
 }
}

osoba= {

ime: "Pera",

stampajIme() {

console.log(this.ime);

}

Dozvoljeno korišćenje computed svojstva

Sa novim standardom je dozvoljeno da se za svojstva koriste computed values:

var i = 0;
var a = {
  ['foo' + ++i]: i,
  ['foo' + ++i]: i,
  ['foo' + ++i]: i
};

console.log(a.foo1); // 1
console.log(a.foo2); // 2
console.log(a.foo3); // 3

var i = 0;

var a = {

['foo' + ++i]: i,

['foo' + ++i]: i

};

console.log(a.foo1); // 1

console.log(a.foo2); // 2

console.log(a.foo3); // 3

Pa čak i:

var param = "size";
var config = {
  ['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4
};

console.log(config); // Vraća {mobileSize: 4}

var param = "size";

var config = {

['mobile' + param.charAt(0).toUpperCase() + param.slice(1)]: 4

};

console.log(config); // Vraća {mobileSize: 4}

Duplirana svojstva nisu više error

Pre standarda ES2015 je kompajler vraćao grešku ukoliko se duplira svojstvo objekata, sa novim standardom je to sada moguće:

var a = { x: 1, x: 2};

console.log(a.x); // Vraća poslednju vrednost a to je broj 2

var a = { x: 1, x: 2};

console.log(a.x); // Vraća poslednju vrednost a to je broj 2

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”