Destruktuiranje u JavaScriptu

Uvod

destruktuiranje niza

Pojam “destruktuiranje” podrazumeva “izvlačenje” podataka iz strukture podataka (objekat ili niz) i pravljenje novih manjih struktura kojima se dodeljuju vrednosti na osnovu “izvučenih” podataka.
Pre ES2015 je bilo neophodno da se napiše kod koji bi vršio destruktuiranje ali srećom sa novim JavaScript standardom je došla i sintaksa koja omogućava da JavaScript kompajler ovaj posao automatski izvršava umesto nas. Ova sintaksa se naziva “destructuring assignment”, i upravo predstavlja to što joj sam naziv govori, dodeljuje vrednosti iz neke strukture novim promenjivima.

Primer
“Manuelno” destruktuiranje

Nova ES6 sintaksa

NAPOMENA: [a,b,c] iz prethodnog primera nove sintakse NIJE NIZ ! ! !
Kada se uglaste zagrade (ili vitičaste) nalaze sa leve strane znaka jednakosti, to ukazuje na patern (šablon) za dodeljivanje promenjivih. One nam omogućavaju da definišemo JavaScript kompajleru kako i pod kojim nazivom varijabli da sačuva destrukturisane vrednosti.

Continue reading…


Novi tipovi podataka Map, Set & Symbol

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():

Continue reading…


Nove karakteristike “string-a”

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:

Continue reading…


Spread & Rest operator

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:

Continue reading…


Nove metode za rad sa nizovima

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.

Continue reading…


“Object literal” poboljšanja

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:

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:

možemo da koristimo skraćenu notaciju:

Dozvoljeno korišćenje computed svojstva

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

Pa čak i:

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:



Podrazumevane vrednosti parametara funkcije

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 došla i jednostavnija sintaksa za definisanje podrazumevanih vrednosti sa sledećim pravilom:

Podrazumevano definisana vrednost se primenjuje u slučaju kada je argument izostao ili je nedefinisan, a “null” je validna vrednost!

podrazumevani parametri funkcije

Definisanje podrazumevane vrednosti parametra dobro radi i u saradnji sa destruktuiranjem:

Osim pomenutog izostanka vrednosti ili “undefined”, podrazumevana vrednost može biti bilo šta drugo, pa čak i druga funkcija:



let & const

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.

let & const

Nema hoistovanja promenjive pri kompajliranju

Promenjive deklarisane sa “let/const” se ne hoist-uju na vrh bloka, kao što to rade promenjive deklarisane sa “var”.

Ne prave globalne promenjive

Treba napomenuti da ključne reči “let/const” ne prave globalne promenjive čak i kada se nalazi u globalnom domenu:

Specifičnosti “let” ključne reči

Block scope

Promenjiva može da se deklariše sa ključnom reči “let” i van vitičastih zagrada, pri čemu će ipak pripadi domenu koji prave te vitičaste zagrade. Ovaj izuzetak važi za slučaj kada se promenjiva deklariše u okviru izraza vezanog za iteraciju:

Redeklarisanje promenjive u istom bloku pravi Syntax Error

Za razliku od deklaracije promenjive sa ključnom reči “var” gde je dozvoljeno ponovno redaklarisanje promenjive, redeklarisanje promenjive u istom domenu sa ključnom “let” nije dozvoljeno, i izbacuje grešku.

Zbog ovoga treba obratiti pažnju da se ne koristi u okviru “switch” izraza jer je sve jedan domen:

Ovaj problem može da se prevazidje na sledeći način:

Rešava problem iteracije i setTimeout() metode

Korišćenjem ključne reči “let” umesto “var”, u okviru “for…petlje”, jednostvno rešavamo poznati problem vezan za iteraciju u okviru setTimeout metode.

Pošto ključna reč “let” ponovo definiše novu promenjivu “i” pri svakoj iteraciji petlje, onda se dobija očekivani rezultat:

Više o ovome problemu pogledajte u članku “(Ne)moguće greške u JavaScriptu”.

Specifičnost “const” ključne reči

Promenjive deklarisane sa ključnom reči “const” generiše konstantu. Konstante u JavaScriptu su “nepromenljive varijable”, tj. varijable kojima se ne može ponovo dodeliti novi sadržaj.

Promenjivost sadržaja konstante!?

Treba napomenuti da nepromenjivost važi samo za promenjivu, ali ne i za nepromenjivost sadržaja konstante!

ili kao u sledećem primeru dodavanje novih članova nizu neće napraviti grešku:

Prava konstanta sa nepromenjivim sadržajem

Ako bi smo hteli da i sadržaj bude nepromenjiv onda je potrebno da koristimo i metodu Object.freeze():

Pogledajte više o “Object.freeze()” u članku “Object() & Object.prototype”


Prikupljanje podataka iz forme sa FormData interfejsom

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.

Continue reading…


“Async/Await” sintaksa za bolje “Promise”

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.