“Object literal” poboljšanja

Written by

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

Sada sa novim standardom možemo ovo da skratimo:

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

var objekat = {
  a,
  b,
  c
};

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);
 }
}

možemo da koristimo skraćenu notaciju:

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

Pa čak i:

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

Modularno programiranje sa ES6

Written by

Karakteristike ES6 modula

es6 modul

Sa novom verzijom JavaScript-a ES6 dolazi integrisana podrška za modularno programiranje.

  • Podržava module koji se smeštaju u datoteke – jedan modul po datoteci
  • Moduli su jedinstveni primerci, svaki modul se izvršava samo jednom (singleton model).
  • ES6 moduli mogu da rade i sinhrono i asihrono.
  • Podržava “cyclic dependencies”.
  • Sintaksa je još kompaktnija od CommonJS
  • ES moduli imaju statičku strukturu. Pošto je struktura modula nepromenjiva, često je dovoljno da se pregleda kod i shvati šta se gde importuje. Ovo nije slučaj kod dinamičke strukture, gde je često potrebno da se kod izvrši da bi se videlo šta se importuje. Eventualne greške mogu da se nadju i u vreme kompajliranja (sa modul bundler-om), jer se sve radnje vezane za import i export modula odredjuju u tom trenutku.
  • Svi uvezeni elementi su nepromenjivi iz modula koji importuje. Svaka operacija dodeljivanja vrednosti uveženom elementu bi prouzrokovala grešku (TypeError).
  • ES6 se ne pravi kopiju svojstva već deli vezu na to svojstvo. Ovo važi čak i za deljenje primitivnih svojstava (“broj” ili “string”). U narednom primeru vidimo da ukoliko matični modul promeni vrednost deljenog svojstva (promena je izvršena metodom iz matičnog modula!), modul koji je importovao to svojsto “vidi” tu promenu.
    PRIMER
    proracun.js
    export let brojac = 1;
export function povecaj() {
  brojac++;
}
    main.js

    Importujemo sve elemente koji su eksportovani iz modula “proracun.js”

    import {brojac} from './proracun';
console.log(proracun.brojac);        // 1
proracun.povecaj();                  // Pozivanje metotde iz uvezenog modula
console.log(proracun.brojac);        // 2

    Ako bi se sada koristila promenjiva “brojač” u nekom “trećem” modulu imala bi vrednost 2.

Continue reading…

Pregled novih JavaScript standarda

Written by

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”