JavaScript

Novi tipovi podataka Map, Set & Symbol

by

Symbol

Karakteristike

Symbol je novi tip podataka koji je došao sa ES2015 standardom. Symbol predstavlja jedinstveni token. Simbol se kreira koristeći funkciju Symbol().

Symbol može biti kreiran i sa label-om, koji mu se prosledi kao string. Taj label ne utiče na vrednost symbola, ali je koristan pri debagovanju i može da prikaže koristeći metod toString() nad symbol-om.

Namena: Ključ svojstva objekta

Uglavnom se „symbol“ koristi kao ključ svojstva objekta, kada želimo da zaštitimo to svojstvo. Kada se koristi „symbol“ kao ključ svojstva objekta, potrebno je da se koriste uglaste zagrade za pristup svojstvu (tzv. „bracket notation“). Takva svojstvo imaju sledeće karakteristike:

  • Jedinstveno svojstvo
  • Svojstvo ne može da se nabraja (eng. enumerated) kroz „for…in“ petlju
  • Svosjtvo ignorišu metode: Object.keys(), Object.getOwnPropertyNames() i JSON.stringify()

Treba napomenuti da privatnost ovoga svojstva nije 100%, jer ipak postoji način za pristup svojstvu preko metoda „.getOwnPropertySymbols()“ i .ownKeys():

Read more

Nove karakteristike „string-a“

by

String su iterabilne kolekcije

String tip podataka je od ES2015 standarda postalo iterabilna kolekcija podataka tzv. „iterable“. Sada su string-ovima dostupni svi mehanizmim koji zahtevaju da kolekcija ima implementiran „iterable protokol“. Pa tako sada možemo nad string-ovima koristiti „for..of“:

ili čak da koristimo spread operator koji takodje zahteva iterable kolekciju za kreiranje niza:

Više o ovome pogledajte u delu „Iteratori i Iterable protokol“

Šablonski literali (template literals)

šablonski literali

Šablonski literali (eng. „template literals“) su znakovni nizovi (tzv. string) sa ugradjenim izrazima. Obeležavaju se obrnutim polunavodnicima (eng. backtick).
„Template literal“ predstavlja novi poboljšani način konkatenacije string-ova, koji je pregledniji i jednostavniji za rad. U template literal-u je dozvoljena ugradnja izraza, ukoliko se obeleže sa dolar znakom i vitičastim zagradama. Template podrazumeva tzv. “ “preset format” dok „literal“ predstavlja vrednost koja je napisana tačno onako kako se podrazumeva da se tumači. Stoga svaka nova linija, dodatna praznina (tab) postaju deo tog stringa
Šablonski literali objedinjuju sledeće karakteristike:

  • String interpolation
  • Multi-line string literals tzv. „preset format“, tj. kako je zapisano u kodu tako se i interpretira na izlazu.
Primer

Primer uradjen sa ES5 i konkatenacijom string-ova:

Novi pristup sa šablonskim literalima:

Read more

Spread & Rest operator

by

Spread operator

Sa novim ES2015 standardom je došao novi operator „…“ koji može da razdvoji niz u listu i obrnuto da grupiše listu u niz. U zavisnosti koju funkciju obavlja ovaj parametar ima naziv „spread“ ili „rest“. Ukoliko se operator nalazi ispred iteratibilnog objekta i „širi“ iterator (npr.niz) u pojedinačne vrednosti praveći listu, onda se naziva „spread“.

Transformacija niza u listu argumenata

Ovaj operator je zamena za često korišćen problem kada je potrebno niz prebaciti u listu argumenata. A najbolji primer je „širenje“ niza u listu argumenata funkcije. Ovaj operator se koristi pri pozivanju funkcije:

Deklaracije niza koji sadrži drugi niz

Koristi se u okviru deklaracije niza koji sadrži drugi niz:

Kloniranje objekta

Sa novim standardom je dozvoljeno korišećenje spread operatora u okviru object literala. Ova pogodnost nam omogućava da korišćenjem spread operatora jednostavno kloniramo objekte, bez korišćenja metode Object.assign():

Spajanje dva objekta

Korišećenjem spread operatora je olakšano spajanje dva objekta bez dupliranja svojstava:

Read more

Arrow funkcija

by

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

arrow funkcija

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:

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

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

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

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

Primer

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

Vraćanje objeknogt literala sa ES5 sintaksom izgleda ovako:

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

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:

Read more

Nove metode za rad sa nizovima

by

Array.from()

Korišćenjem metode „from()“ možemo od „array-like“ ili „iterable“ napraviti niz:

ES2015

Array.prototype.find()

Ova metoda vraća prvi član niza koji zadovoljava uslov (uslov u okviru callback funkcije). Callback funkciji metoda prosledjuje tri parametra:

  • vrednost člana niza
  • indeks člana niza
  • niz (nad kojim se izvršava metoda)

Pored callback funkcije može (opciono) da se prosledi i argument thisArg, koji definiše na šta će da ukazuje rezervisana reč this u okviru callback funkcije.

Primer

Metoda findIndex() radi sličnu stvar, stim što umesto prvog elementa koji je zadovoljio uslov, vraća njegov index u nizu.

Read more

„Object literal“ poboljšanja

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:

Sada sa novim standardom možemo ovo da skratimo:

Skraćena notacija definisanja metoda Za definisanje metode objekta nije više potrebna ključna reč function i dvotačka. Tako da … Read more

Podrazumevane vrednosti parametara funkcije

by

Uvod U dosadašnjoj praksi (ES5) se koristio sledeći pristup definisanju podrazumevanih vrednosti parametara funkcje:

Problem se javlja kada se prosledi neka vrednost koju kompajler implicitno konvertuje u logičku vrednost „false“ (npr. nula), pa zbog toga umesto nje uzima podrazumevanu vrednost:

Stoga je potrebno da poboljšamo uslov:

ES2015 sintaksa Uz novi standard je … Read more

let & const

by

Zajedničke karakteristike Block scope Ključne reči let i const ispred promenjive deklariše promenjivu, koja je dostupna jedino u svom lokalnom domenu tzv. „block scope“. Kada se promenjiva deklariše sa let/const u okviru vitičaste zagrade, onda su vitičaste zagrade ivice njenog domena.

Nema hoistovanja promenjive pri kompajliranju Promenjive deklarisane sa „let/const“ se ne hoist-uju na … Read more

Prikupljanje podataka iz forme sa FormData interfejsom

by

Uvod

js this

Korišćenje FormData interfejsa prilično olakšava rad sa formama, jer je u stanju da jednostavno pokupi sve vrednosti input-a u formi i sačuva ih u objektu u vidu key/value parova.
Dodatna prednost nad standardnim metodom vezana je za olakšano pisanje serverskog koda. Sa standardnim metodom moramo dodati određeni kod na strani servera koji bi dolazne podatke obradio na specijalizovan način, dok sa FormData to nije potrebno, jer je poslati kod standardizovan i debug-ovan! Treba naglasiti da u formi svi HTML input tag-ovi moraju da imaju atribut ‘name’, jer FormData preko njega ima pristup vrednostima input-a.

Read more

„Async/Await“ sintaksa za bolje „Promise“

by

Uvod

asyn/await

Korišćenje samo jednog promisa je jasno i jednostavno, medjutim kada se program zakomplikuje asinhronom logikom, rad sa promisima se rapidno otežava. Sa ES2017 standardnom je stigla i nova sintaksa „async/await“, koja olakšava rad sa promisima, i omogućava jednostavnije predstavljanje serije asinhronih promisa. Korišćenje „async/await“ sintakse nam omogućava da višestruke medjusobno zavisne asinhrone radnje, prikažemo čitljivije i tako izbegnemo tzv. „promise hell“. Treba napomenuti da se uz async funcije ne mogu koristiti „obične“ callback funkcije.

„Async/await“ sintaksa ne isključuje promise, nego menja način „konzumacije“ promisa. Async/Await sintaksa nam omogućava da pišemo asinhroni kod prema sekvencijalnom redosledu izvršavanja tako da liči na sinhroni kod.