JavaScript — korisne novine koje nedovoljno koristite u praksi

Neke od novih mogućnosti jezika su moćne, ali ne i dovoljno prisutne u praksi.

Milan Dinić - 25. Oktobar, 2017.

Kada je JavaScript 1996. godine lansiran sa ciljem da omogući jednostavnu manipulaciju DOM elemenata, verovatno niko nije slutio koliko će zapravo popularan ovaj jezik postati.

Danas, nakon 21 godine evolucije, gotovo je nemoguće zamisliti internet projekat koji ne uključuje JavaScript.

Koliko je evoluirao ovaj jezik mozda najbolje pokazuje činjenica da on danas pokriva ceo stack. Osim što je poslednjih godina omasovljena upotreba ovog jezika na serverskoj strani, odnedavno je postalo jednostavno da se u njemu pišu i desktop aplikacije.

Upravo je ta rasprostranjenost i popularnost ono što je navelo ECMA (European Computer Manufacturer’s Association) da unapredi standard za skriptne jezike. Ovaj strandard nosi oznaku ES6, odnosno ES2015, kako je nešto kasnije preimenovan. Standard je od tada još dva puta unapređen, 2016. godine završen je ES2016, a u junu 2017.godine objavljena je i poslednja, trenutna verzija ovog standarda — ES2017.

Kao i prilikom uvođenja svakog novog standarda, biće potrebno mnogo vremena da novi standard bude primenjen u potpunosti. Ipak, smatram da svako od nas može da se potrudi da doprinese tome i upozna se sa novim ES2015+ standardom.

Sa porastom tzv. transpiler alata kao što su TypeScript i Babel, postalo je moguće koristiti nove funkcionalnosti ovog standarda mnogo pre nego što web browseri završe implementaciju.

Postoje dve stvari po kojima se odmah može razlikovati ES2015 u odnosu na prethodne standarde, definisanje varijabli sa “let/const” i “arrow function”.

Let/Const

Pre ES2015, JavaScript je bio jako specifičan što se tiče promenljivih i polja dostupnosti (scope) istih u odnosu na ostale jezike. Postojao je (čitaj, postoji ali ga ne treba koristiti) “var” koji je definisao promenljivu na nivou funkcije, a ne na nivou bloka koda kao kod većine jezika.

U suštini je sve moglo da se postigne i sa “var” ali kako bi omogućili lakši prelazak programerima sa drugih jezika napravljeni su “let” i “const”.

Promenljiva definisana sa “let” će biti dostupna samo unutar tog bloka koda, npr. unutar if-a. Čim se napusti dati blok neće biti mogućnosti da se toj promenljivoj pristupi.

“Const” ima isti nivo dostupnosti kao i “let” ali za razliku od njega ne može se promeniti ili predefinisati naknadno. U slučaju kad je promenljiva objekat vrlo često dolazi do pogrešnog razumevanja u smislu da ceo objekat postaje konstantan ali u ovom slučaju jedino je konstantna referenca ka objektu. Da bi se postiglo da ceo objekat postane nepromenjiv, neophodno je koristiti Object.freeze.

Preporuka je da se skroz izbaci “var” jer sa let-om mozemo postignuti sve isto kao i sa var-om dok bi obrnuto bilo malo teže, zato:

Arrow functions

“Arrow function” će nam svima skratiti muke za 6 slova svaki put kada budemo hteli da definišemo funkciju :).

Novi način za definisanje funkcije olakšava i baratanje scope-ovima. Ovakve funkcije nemaju svoje “this”, pa iz tog razloga bindovanje nije potrebno u većini slučajeva gde je to bilo potrebno do sada.

Pored toga, stara funckija je imala dve upotrebe: definisanje funkcija i definisanje konstruktora za novi prototip. “Arrow function” nije samo novi način definisanja, već je strogo orijentisana ka definisanju samo funkcije.

Arrow function:

Class

Za nove prototipe koristi se sintaksna zamena (syntactical sugar) “class”.

Ovo ne predstavlja uvođenje klasa u JavaScript, iza svega i dalje stoje prototipi, ali kako bi se priblizilo programerima koji se do sada nisu susretali sa prototipima, već uglavnom sa klasama (najviše Java klasama), postoji sintaksna maska sa kojom će sve mogućnosti klasa biti dostupne.

Ono što je dobro — način na koji su tipovi pre funkcionisali — nema potrebe menjati. Potrebno je bilo samo pojednostaviti način na koji će se pisati.

Class:

Template strings

Jedna od manje poznatih novina su template strings.

Da li ste se ikada dvoumili oko toga koju vrstu apostrofa treba da koristite za string? Došlo je vreme da se opredelite za back-tick(`) i prestanete da razmišljate o drugim opcijama.

Template strings donosi neke novine, od kojih su najznačajnije multi-line stringovi i ubacivanje templejta unutar stringa. Nema više potrebe da radite konkatenaciju stringova kako biste ubacili promenljivu u sred rečenice:

Templating:

Array/Set/Map

Izgleda da je ECMA uspela da sagleda dosta koda koji je otvoren i napokon omogućila jednostavno proveravanje da li određeni niz sadrži element. Napokon postoji funkcija includes nad Array-em, nema više “indexOf(x) != -1”.

Takođe je zgodna i funkcija find koja pronalazi prvi element u nizu koji zadovoljava uslov.

Ukoliko je jedan od razloga za ove pozive bio da imate niz jedinstvenih vrednosti, sada za to imate već gotov objekat “Set”.

Pored specijalizovanog Arraya za unikatne vrednosti, poboljšane su i mape. Uveden je objekat Map kod koga, za razliku od “normalnog” JavaScript objekta, key ne mora vise da bude samo string, već može biti bilo kog tipa.

Ukoliko koristite praksu da se pri promenama ne kreira novi objekat, to može biti jako korisno.

Destructuring

Manje poznata opcija u ES2015+ je “destructuring”, to jest destruktuiranje nizova ili objekata.

Pošto je ovo nova opcija nema je mnogo u primeni, ali verujem da će ljudi vremenom smisliti još gomilu načina kako da se iskoristi. Za sada se može koristiti za validaciju strukture objekata, izvlačenje potrebnih podataka iz objekata (videćete često kod require-a i importa) ili uzimanje nepredviđenog ostatka objekta.

Negativna strana je što čitljivost koda može znatno da se zakomplikuje — sličan problem kao i sa regex-om — ali za razliku od regex-a možemo koristiti razmak, novi red, uvlačenje i komentare bez posledica.

Fenomenalno je što se ova opcija moze koristiti i u argumentima funkcija.

Destructuring:

Proxy

Node.js developeri mogu vrlo lako pomešati novu funkciju Proxy sa modulom http-proxy. Ovaj API je zapravo proxy nad objektom.

Ako ste se ikada pitali zašto je Object.observe ukinut, verovatno je jedan od razloga taj što je napravljen Proxy koji ima širu funkcionalnost sa kojom se može uraditi gotovo sve kao i sa Object.observer.

Proxy se može smatrati kao API za definisanje ponašanja nad objektom onako kako vi to želite. Postoje razne primene Proxy-a, od implementacije observable patterna, singletona, prepisivanja operatora in, of, delete, new do kreiranja objekta koji će da pamti svoje promene.

Proxy:

U WorkPuls timu, kojeg sam deo, stalno težimo ka unapređenju koda i proizvoda primenom najnovijih standarda i tehnologija. Uz pomoć TypeScripta i Babel transpajlera počeli smo da koristimo nove funkcionalnosti dosta pre nego što su one bile podržane od strane svih browsera, dok u Node-u i Elektronu koristimo nove opcije bez transpajlera.


WorkPuls ekipa u planu ima širenje, a trenutno zapošljavaju intermediate/senior javascript inženjera.


Pogledaj još i:

12 knjiga koje bi svaki JavaScript developer trebalo da pročita

Funkcionalno programiranje u praksi: Jednostavan život podataka vaših web aplikacija

Funkcionalno programiranje u Javascriptu 2 – uvod u big data algoritme, pretraga velikih struktura podataka