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.


Chrome DevTools

Uvod

chrome devtools

U ovome članku je napravljen pregled specijalizovanih alata u okviru “Chrome” browsera, pod nazivom “DevTools”. Chrome DevTools su nezamenjivi set alatki namenjeni web developerima kao pomoć u svakodnevnom radu. Kroz DevTools je omogućen pregled HTML stranice i rad sa DOM elementima, kao i pristup svim CSS svojstvima elemenata.
U ovom paketu alata je naručita pažnja posvećena delu za debagovanje JavaScript koda. Koristeći ovoj alat je omogućeno definisanje raznih načina prekidanja izvršavanja progamskog koda (tzv. breakpoint), što znatno olakšava rad web developerima pri otklanjanju bagova na vebsajtovima. Pri svakom prekidu je omogućen uvid u vrednosti promenjiva kao i njenih oblasti definisanosti.
Pored ovoga postoje sekcije vezane za praćenje performansi web aplikacije, kao i pregled razmene podadaka izmedju klijenta i servera.

Continue reading…


Tipovi podataka u JavaScriptu

Podela tipova podataka

tipovi podataka u javascriptu

U okviru JavaScript-a ima 7 vrsta podataka. Podaci mogu da se podele u dve grupe:
a) Podaci koji čuvaju primitivni tip vrednosti:

  • 1) string
  • 2) number
  • 3) boolean
  • 4) undefined
  • 5) null
  • 6) symbol (ES2015)

b) Podaci koji čuvaju referentni tip vrednosti:

  • 7) objekat
    • array
    • Map (ES2015)
    • WeekMap (ES2015)
    • Set (ES2015)
    • WeekSet (ES2015)

Continue reading…


JS snippets razno (tips & tricks)

Pozajmljivanje metode iz drugog objekta

Metode call, apply i bind se koriste da definišu značenje rezervisane reči this, medjutim to nam takodje omogućava da sa promenom značenja “this” objekat može da “pozajmi” metodu drugog objekata, kao u sledećem primeru:

Čest je slučaj da se pozamljuje neka od metoda Array-a koji su ugradjenih u njegov prototype objekat.

Na ovaj način smo pozajmili Array-ovu metodu slice nekom objektu.

Continue reading…


Simbioza JavaScripta i njegovog okruženja

Uvod

asnhorni JS okruzenje

JavaScript je skriptni jezik, stoga je neophodno da se “smesti” u neki kontejner koji bi mu omogućio rad, taj kontejner se zove JS Runtime Environment (srp. okruženje). Postoje dva tipa okruženja: browser (za rad na klijentu) i node.js (za rad na serveru). Runtime Environment čine :

  1. JS Engine/Runtime
    • Heap
    • Stack
  2. External API
  3. Queue
  4. Event loop

OBJAŠNJENJE:
JavaScript je “single thread” programski jezik i on sam ne može da izvršava više istovremenih paralelnih radnji. Ipak izvršavanje više paralelnih radnji (tzv. asihrono izvršavanje) je moguće uz medjusobnu saradnju JavaScript-a i njegovog okruženja. Više o ovome prolitajte u članku “Princip rada asinhronog JavaScript-a”.

Continue reading…