Forem: Slaven Bunijevac

Razlika između 'type' i 'interface' u TypeScriptu

Slaven Bunijevac — Sat, 13 Apr 2024 12:52:47 +0000

TypeScript je sjajan alat koji donosi nove mogućnosti, koje ne postoje u JavaScriptu. Glavna stvar koju TypeScript razlikuje od JavaScripta je to što možemo definisati tipove podataka sa kojim radimo.

Jedan od načina da se definiše tip podataka je korištenje tipa, odnosno `type` aliasa, a drugi je korištenje interfejsa, odnosno `interface`. Upravo razlika između ova dva načina je tema ovog teksta.

Uvod

U ovom uvodu ću da postavim osnovno okruženje i kontekst koji će biti isti za sve sljedeće primjere, da se ne bi ponavljao u narednim poglavljima.

Recimo na primjer da imam neku komponentu User koja će dobiti podatke o korisniku u props objektu koji ćemo prema TypeScript konvenciji opisati/definisati sa UserProps.

Ako pokušam da opišem objekat sa UserProps, a taj UserProps ne postoji nigdje TypeScript će me upozoriti.

Osnovna sintaksa

Postoje dvije osnovne sintaksičke razlike. Tip koristi ključnu riječ type, a interfejs interface.

Druga razlika je što tip koristi znak jednakosti, a interfejs ne koristi.

U narednim primjerima ću nazive tipova počinjati sa slovom 'T', a interfejse sa slovom 'I'. Ovo se može pronaći negdje kao konvencija, ali nije neophodno raditi.

Proširivanje i naslijeđivanje

Recimo na primjer da imam nekog korisnika kog sam definisao preko tipa kao TUserProps, ali kasnije dodajem definiciju za administratora koji ima sva svojstva kao i korisnik, plus još neka.

Kod tipova se ovo zove ukrštanje ili preklapanje (ENG: 'intersection'), odnosno dva tipa se preklapaju po nekim svojstvima. Znak ampersand ('&') sam iskoristio da spojim već definisani TUserProps i nova svojstva koja želim da dodati administratoru.

Interfejs sa druge strane koristi ključnu riječ extends da spoji dvije definicije. Ova sintaksa će biti poznata ljudima koji koriste klase u JavaScriptu/TypeScriptu.

Kod interfejsa se ova tehnika zove naslijeđivanje. Dakle, objekat IAdminProps će naslijediti sva svojstva koja postoje u objektu IUserProps ime i godine, pa sam mu dodao ulogu.

Objekti i sve ostalo

Interfejsom se mogu definisati samo objekti, dok se tipom mogu definisati objekti, ali i sve ostalo.

Ako želim da definišem objekat mogu koristiti interfejs ili tip.

Međutim, ako želim da definišem bilo šta drugo moram koristiti tip.

Nije moguće koristiti interfejs za definisanje primitivnih tipova.

Unije

Tipove je moguće koristiti da definisanje unija (skupova). Lako se može dogoditi na primjer da želimo da pohranimo neku primitivnu vrijednost, ali i da eventualno pratimo niz takvih vrijednosti.

Utility tipovi

U TypeScriptu postoje 'utility' tipovi koji nam omogućuju neke posebne funkcionalnosti. Recimo da npr. želim da iskoristim Omit utility tip kako bi izostavio neko svojstvo objekta.

Sa type aliasom bi to izgledalo ovako.

Ovo je tehnički moguće uraditi i sa interfejsom, ali uz mnogo ružniju sintaksu.

Morao sam iskoristiti ključnu riječ extends, a morao sam staviti i prazne vitičaste zagrade na kraju deklaracije.

Tuple

Tupl (ENG. Tuple) je specijalna vrsta niza u TypeScriptu. To je niz koji ima fiksno definisanu dužinu. Dužina tupla se ne može naknadno mijenjati.

Ako bi želio definisati neki tip kao tupl preko type aliasa, to je lako uraditi.

Kao što se vidi iz primjera korištenje interfejsa je mnogo obimnije i teže za čitanje. Tip je za ove situacije mnogo bolje rješenje.

Izvlačenje

Tip se može iskoristiti da se izvuče neka struktura iz objekta. Recimo na primjer da imam neki objekat stan. Ako želim da izvučem npr. svojstvo 'specifikacije' iz tog objekta tip je sjajno rješene.

Iskoristio sam svojstvo iz objekta kako bi definisao tip.

Ovo je moguće i sa interfejsom, ali kao što se vidi iz primjera sa unijama i tuplovima mora se koristiti ključna riječ extends, tako da je pristup sa tipovima mnogo bolji.

Spajanje i ponovna deklaracija

Jedna od situacija na koje se sasvim realno može naići je da se na projektu nađu definisane dvije strukture sa istim imenom. Ako se to dogodi sa interfejsom one će jednostavno biti spojene.

Kao što se vidi u primjeru sva svojstva iz svakog interfejsa su obavezna u novom objektu user. Ovo može biti korisno, ako se na primjer koristi neka biblioteka iz koje dobijamo neki interfejs, pa želimo da ga proširimo.

Međutim, može biti i veoma loše jer lako može doći do neželjenih izmjena interfejsa.

Sa tipovima ovo nije moguće. TypeScript će odmah izbaciti grešku ukoliko se pojave dva tipa sa istim nazivom.

Klase

Postoji jedno pogrešno mišljenje na koje se može naići kada se radi sa TypeScriptom, a to je da je klase moguće opisati/definisati samo pomoću interfejsa.

Klasu je najnormalnije moguće definisati sa tipom.

Bilo koja od ove dvije opcije je validna.

Ukratko

Interfejs može definisati samo objekte, tip može objekte i sve ostalo.
Sintaksa za proširivanje, unije, utility tipove je mnogo bolja ako se koristi type alias.
Interfejsi su otvoreni i podložni neželjenim izmjenama, dok su tipovi zatvoreni.
Nije tačno da se klase mogu definisati samo pomoću interfejsa. Klase bez problema mogu biti definisane tipom.

Samo nešto malo o 'useEffect' u Reactu

Slaven Bunijevac — Fri, 05 Apr 2024 08:06:25 +0000

Tokom svog životnog ciklusa komponenta će često koristiti neke eksterne sisteme ili API-eve radi funkcionalnosti koju oni donose.

S obzirom da te konekcije često zavise od dinamičnih dijelova aplikacije ili komponente, npr. state-a koji se mijenja, potrebno je omogućiti komponenti da prati te dijelove, te da se u skladu sa potrebama reaguje, da se ponovo izvrši poziv na eksterni sistem ili eventualno da se prekine konekcija sa nekim eksternim sistemom.

Tu na scenu stupa `useEffect` hook.

NAPOMENA: Termin 'eksterni sistem' sam pozajmio iz React-ove dokumentacije. Oni 'eksternim sistemom' smatraju sve šta nije pod kontrolom React-a. To podrazumjeva dodavanje eventListenera, setInterval() metoda, te eventualni poziv na neki REST API resurs.

Šta možete ovdje pročitati?

Šta je useEffect hook?
Koji su parametri u useEffect hook?
Primitivni i referentni tipovi.
Šta radi return dio?
Zaključak.

Šta je `useEffect` hook?

Jedna od specijalnih funkcija koje komponenta ima na raspolaganju je useEffect. Ove specijalne funkcije se u React-u zovu hooks, pa ću ih i ja u ovom tekstu tako zvati.
Ova funkcija nam omogućuje da pratim bilo kakve sporedne efekte u komponenti. Svaki put kada pokušamo da se konektujemo na neki eksterni sistem vjerovatno će biti potrebno koristiti useEffect.
Svaki put kada se promijeni neki dinamični dio, npr. state, komponente/aplikacije useEffect će se koristiti da se prati da li treba nešto uraditi na osnovu izmijenjenih vrijednosti.
Kao i svaki hook u React-u, useEffect je neophodno koristiti, unutar komponente, na najvišem nivou (top level).

Koji su parametri u `useEffect` hook?

Prvi parametar je funkcija koja će biti pozvana jednom sigurno, kada se komponenta prvi put postavi. U ovoj funkciji je sva funkcionalnost koju želim da obavim kada useEffect registruje promjenu. U ovoj funkciji mogu da spojim komponentu nekim eksternim sistemom.

Ovo su samo neke od stvari koje se mogu uraditi unutar useEffect hook-a, s tim da neke od njih dolaze i sa određenim 'dodatnim objašnjenima'. Npr. slanje zahtjeva na neki API resurs (red 9) bi trebalo da se razdvoji od same logike komponente ili kroz neki drugi hook ili korištenjem neke dodatne biblioteke, ali o tome u nekom drugom tekstu.
Drugo objašnjenje je što svaki put kada se postavi neki 'event listener' (red 6) isti taj 'event listener' bi treblao skinuti kada se komponenta ukloni sa stranice. Više o tome u dijelu 'Šta radi return dio?'.

Drugi parametan prilikom pozivanja useEffect hooka je niz 'dependency-a' (red 12).

NAPOMENA: Riječ 'zavisnost' jeste nezgodan prevod za 'dependency' u ovom kontekstu, ali ona odlično označava ono šta te vrijednosti predstavljaju i za šta služe. Više o tome u daljem tekstu. Treba imati u vidu da se u ovom tekstu mogu naći obije verzije, 'dependency' i 'zavisnost'.

Prvo šta treba naglasiti je da drugi parametar, niz dependency-a, nije neophodno navesti, kao što se vidi u ovom primjeru.

Nedostatak ovog niza će značiti da će funkcija koja je prvi parametar biti pozvana svaki put kada se komponenta ponovo renderuje. U velikoj većini slučajeva, ako ne i uvijek, to ne želimo. Hook useEffect se bavi sporednim efektima, situacijama kada želimo da izađemo iz React-ovog ekosistema, te bi bilo previše da se to svaki put radi kada se komponenta renderuje.

Druga opcija za ovaj niz je da se ostavi prazan. Dakle, useEffect nema nikakvih dependency-a. Evo primjera:

U slučaju kada postavimo prazan niz, funkcija koja je prvi parametar će biti pozvana samo jednom, kada komponenta bude prvi put renderovana. Evo jednog primjera gdje imam count varijablu čiju vrijednost povećavam za jedan kada kliknem na button. Pored toga imam i useEffect sa praznim nizom dependency-a.

Kao što sam naveo u komentarima u primjeru, promjena state-a će uzrokovati da se komponenta ponovo renderuje, ali useEffect funkcija neće biti ponovo pozvana zato što je niz dependecy-a prazan.

Sada se postavlja pitanje šta se može staviti u ovaj niz? Odgovor je bilo šta, odnosno bilo koju vrijednost/varijablu koju želim da useEffect prati. Kao što prevod 'zavisnost' govori, u tom slučaju moj useEffect će zavisiti od te vrijednosti/varijable. Iskoristiću gore navedeni primjer i postaviti da varijablu count kao zavisnost u useEffect.

U ovom slučaju useEffect zavisi od varijable count i pozvaće svoju funkciju prvi put kada se komponenta prvi put renderuje, te svaki put kada registruje promjenu u vrijednosti varijable count.

Prilikom postavljanja vrijednosti u niz dependency-a treba obratiti pažnju da sama funkcija ne mijenja tu varijablu. Jer ako funkcija mijenja varijablu od koje useEffect zavisi to će uzrokovati beskonačnu petlju.

Primitivni i referentni tipovi

U JavaScriptu postoje dvije vrste tipova podataka. Svi koji koriste React vjerovatno su u poznati sa referentnim i primitivnim tipovima. Detaljnije o razlikama između ova dva tipa sam pisao u tekstu koji možete pročitati ovdje.

Evo kratkog sažetka razlike koja nam je bitna za današnju temu.

Primitivni tipovi u Javascriptu su string, boolean, number, null, undefined. Oni se porede po vrijednosti. Ako na primjer imam dvije varijable i obije nose vrijednost npr. broja 4 i probam da ih uporedim dobiću true. Evo još nekoliko primjera:

Ovo je očekivano ponašanje. Međutim, referentni tipovi se prilikom poređenja ponašaju malo drugačije. Referentni tipovi u JavaScriptu su objekti, nizovi i funkcije. Recimo npr. da imam dva objekta u primjeru dole:

Poređenje dva objekta koji su po sadržaju identični daje false jer se objekti ne porede po vrijednosti/sadržaju, nego po referenci. Referenca upućuje na njihovu lokaciju u memoriji, a lokacija u memoriji dva objekta nije ista. Ovo je izuzetno važna poenta prilikom korištenja useEffect hook-a.

U ovom primjeru useEffect će biti pozvan svaki put kada promijenim 'count' iako taj useEffect uopšte ne koristi count, odnosno ne zavisi od njega. To se dešava zato što će se komponenta svaki put ponovo renderovati kada se promijeni state. Svaki put kada se komponenta ponovo renderuje ona će kreirati novi objekat person, sa novom referencom.

Prilikom novog renderovanja komponente useEffect će uporediti prethodnu vrijednost objekta i novu vrijednost objekta i oni će biti drugačiji. Biće drugačiji jer su to dva različita objekta po referenci. Kao što sam rekao, njihov sadržaj se nije promijenio, ali referenca jeste. Objekti po tome nisu isti i useEffect će bit ponovo pozvan.

Rješenje za ovo je da se pobrinemo da naš useEffect zavisi isključivo od primitivnih vrijednosti, koje se porede po vrijednosti, a ne po referenci.

U ovom slučaju iako je objekat person kreiran svaki put kada se komponenta ponovo renderuje, useEffect ne zavisi od objekta nego od primitivne vrijednosti name unutar tog objekta. Ako se vrijenost za name ne promijeni funkcija u useEffect neće biti pozvana prilikom novog renderovanja komponente.

Šta radi `return` dio?

Kao i svaka funkcija, funkcija koja je prvi parametar unutar useEffect ima svoju return vrijednost. Postavljanje return dijela nije obavezno. To je funkcija koja će biti pozvana kada se komponenta skine/obriše (unmount).

Upravo u ovoj funkciji će se skinuti eventListener o kom sam govorio u ranijem dijelu ovog teksta. Ovdje se može prekinuti konekcija sa nekom sobom za chat ili će se zaustaviti neki postavljeni interval.

Zaključak

Iako na prvi pogled djeluje kao da su useEffect i neki drugi 'hooksi' zamjena za ono šta rade metode životnog ciklusa u class komponentama, najbolje je razmišljati o njima kao potpuno drugačiji pristup životnom ciklusu metoda. Oba pristupa imaju svoju primjenu u zavisnosti koje komponente se koriste. Više o osnovnim razlikama između funkcijskih i class komponenti u React-u sam pisao u tekstu koji možete pročitati ovdje.

U kratkim crtama:

Obavezno navedite niz dependecy-a/zavisnosti, makar on bio prazan.
Nemojte stavljati objekte u niz dependecy-a.
Ne dozvolite da useEffect zavisi od vrijednosti/varijable koju sam mijenja.
Uvijek očistite/uklonite konekciju sa eksternim sistemom prije skidnaja komponente.

Ukratko o useState hook u Reactu

Slaven Bunijevac — Tue, 26 Mar 2024 07:21:06 +0000

Pitanje kontrole state-a u Reactu je jedno od najvažnijih kada radimo sa ovom bibliotekom. U ovom tekstu ću se baviti `useState` funkcionalnošću, koja je donijela kontrolu state-a (state management) u funkcijske komponente koju do uvođenja `hooks-a` nije imala mogućnost postavljanja i kontrole state-a.

Šta možete ovdje pročitati:

Šta je useState hook?
Osnovna upotreba.
Promjena statea.

Šta je `useState` hook?

Ovaj useState hook je funkcionalnost koja nam omogućuje da postavljamo i kontrolišemo (mijenjamo) state u funkcijskim kompoentama.
State u suštini čine svi podaci u komponenti koji se će možda mijenjati vremenom, odnosno od jednog rendera do drugog.

Osnovna upotreba

Prva stvar koju treba istaći vezano za useState hook je da on može biti korišten samo u funkcijskim komponentama. Class komponente imaju drugačiji način postavljanja i kontrole statea i to kroz this.state objekat u konstruktoru.
Više o osnovnim razlikama, uključujući i state, između funkcijskih i class komponenti možete pročitati u ovom tekstu.

VAŽNA NAPOMENA: Veoma važna stavka za korištenje bilo kog hooks-a, pa samim time i useState, je da njih obavezno treba pozivati na vrhu komponente, odnosno na najvišem nivou. Hooks-i se nikako ne mogu koristiti unutar petlji, funkcija, uslovno ili unutar bilo kog drugog bloka koda. Isključivo u najvišem nivou komponente.

Da bi se koristio useState potrebno ga je uvesti iz react biblioteke. Najčešća konvencija je da to bude na vrhu fajla u kom se koristi (red 1).

Prilikom postavljanja statea u funkcijskim komponentama useState se poziva kao funkcija koja može dobija jedan argument. Ja sam u ovom primjeru kao kao taj argument postavio prazan string (red 4). Upravo taj argument će biti inicijalna vrijednost varijable name.

Ista ta funkcija vraća dvije vrijednosti, koje sam destrukturisanjem izvukao u jedan niz. Detaljnije o destrukturisanju u JavaScriptu sam pisao u tekstu koji možete pročitati ovdje.

Postoji i drugi način korištenja useState hooka, a to je da se veže direktno na React objekat kao React.useState(). Ja lično smatram da je sintaksa sa uvozom mnogo ljepša za korištenje i čitanje.

Inicijalna vrijednost može biti bilo šta, string, broj, boolean, objekat ili niz. Inicijalna vrijednost može čak biti i rezultat pozivanja neke funkcije. Na primjer ovako:

Imam jedan jednostavan primjer funkcije (red 4) koja vraća prazan string. Onda sam tu funkciju jednostavno pozvao unutar useState funkcije da dobijem gore navedeni prazan string kao inicijalnu vrijednost mog statea (red 9).

Međutim, ovakva inicijalizacija statea nosi jedan problem. Taj problem je što je pozivanje ove funkcije customNameSetter potencijalno skupa/spora operacija. To je problem jer će ova funkcija biti pozivana svaki put kada se komponenta renderuje. Ne želimo da se potencijalno skupa operacija ponavlja svaki put kada se komponenta renderuje, ako nema potrebe za tim.

Rješenje za to je da se umjesto skupe operacije kao argument proslijedi obična funkcija koja će vratiti rezultat pozivanja skupe operacije.

Ovo će osigurati da potencijalno skupa funkcija customNameSetter bude pozvana samo jednom, kada se komponenta prvi put renderuje.

Promjena statea

Jedna od osnovnih karakteristika statea u Reactu je da će se vremenom mijenjati. Upravo zato je default ponašanje useState hook-a da vrati i drugu vrijednost u našem nizu, a to je funkcija kojom se mijenja state.

Kako bi na najbolji način prikazao promjenu statea, primijeniću primjer. Neću više koristiti varijablu name nego count, dakle neki brojač koji se stalno mijenja. Postaviću njegovu početnu vrijednost na nulu.

Funkcija setCount će biti pozvana svaki put kad želim da promijenim vrijednost za count. To ću uraditi tako što ću na klik tastera '+' povećati vrijednost varijable count za jedan.

U gornjem primjeru vidim da ću trenutnoj vrijednosti za count dodati jedan. Dakle nula plus jedan je jednako jedan. Jedan će onda biti prikazano na ekranu.
Ovakav pristup je sasvim ispravan, ali postoji jedna začkoljica. Ako pokušam, iz bilo kog razloga, da vežem više ovih promjena state jednu za drugom to neće funkcionisati.

Ovo neće promijeniti vrijednost count varijable za četiri kako bi se moglo očekivati jer sam četiri puta pozvao setCount. Vrijednost count koja će biti prikazana na ekranu će biti 1.

Ovo se dešava jer React sakuplja sve ove pozive zajedno i svi pozivi setCount funkcije mijenjaju state za sljedeći render.
Svaki poziv setCount funkcije koristi inicijalnu vrijednost varijable count koju povećava za jedan. Operacija će uvijek biti nula plus jedan daje jedan.

Da bi se ovo izbjeglo potrebno je koristiti funkcijsku verziju izmjene statea. Proslijedim 'updater' funkciju u setCount i unutar nje mijenjam state na osnovu prethodnog statea. Ta funkcija ima automatski jedan parametar, taj parametar je prethodna vrijednost state, odnosno u našem primjeru varijable count.

Ovdje je razlika u tome što React ne sakuplja ove 'updater' funkckije nego će ih u sljedećem renderu pozvait istim redoslijedom.

Imam funkciju koja vraća prethodni count uvećan za jedan. Na ovaj način svaki sljedeći poziv setCount funkcije će koristiti 'najsvježiju', odnosno posljednju vrijednost za count. Kada prvi poziv setCount poveća count za jedan, sljedeći poziv će uzeti rezultat prethodnog poziva i njega uvećati za jedan, itd. itd.

Još jedna stvar kod izmjene statea na koju moramo obratiti pažnju je izmjena objekata i nizova. Recimo na primjer da imam state koji nosi podatke za jednog korisnika, user.

Postavio sam inicijalnu vrijednost varijable da bude objekat koji ima dva elementa name i age. Obije ove vrijednosti će biti ispravno prikazane u ovom primjeru.

Međutim, ako pokušam na klik tastera da promijenim age na 35, ne mogu jednostavno pozvati setUser i promijeniti age na 35.

Ovo ne mogu uraditi jer ću izgubiti name iz svog statea. Mora se navesti ostatak objekta, pa onda dodati svojstvo koje mijenjam. Da bi to postigao moram ponovo koristiti funkcijsku verziju izmjene statea. Koristiću funkciju koja kao parametar dobija prethovnu verziju statea.

Iskoristio sam spread (...) operator kojim sam sačuvao sva neizmjenjena svojstva, pa ih zajedno sa izmijenjenim vratio kao jedan objekat. Ovdje sam za primjer koristio objekat, ali sva ista pravila važe i za nizove.

U ranijem primjeru promjene count varijable, kao i u ovom posljednjem primjeru sa promjenom user varijable vidi se jedan zajednički obrazac kog se treba pridržavati kad je promjena statea u Reactu u pitanju. Taj obrazac je da se uvijek koristi funkcijska verzija izmjene statea kada nova zavisi od toga koja je bila prethodna vrijednost.

Na osnovu ovog se lako može postaviti pitanje zašto ne bi uvijek koristili funkcijsku verziju izmjene statea da bi bili sigurni. To se svakako može uraditi, ali u nekiim situacijama zaista nema potrebe. Ako nova vrijednost ne zavisi od stare ne mora se koristiti funkcijska verzija izmjena statea.

Class komponente i funkcijske komponente u Reactu

Slaven Bunijevac — Mon, 26 Feb 2024 21:08:46 +0000

Komponente su osnovni element React biblioteke. Međutim, kada je u pitanju kreiranje komponenti u Reactu, postoje dva pristupa: class komponente i funkcijske kompontente.

U ovom tekstu ću objasniti osnovne razlike između ova dva načina kreiranja komponenti.

Napomena: Kada je React u pitanju često će se istovremeno koriste termini biblioteka i 'framework'. React-ova dokumentacija ga navodi kao biblioteka, tako da ću ja u ovom tekstu koristiti taj termin. Međutim, često se može naći da React nazivaju 'framework'.

Osnovna sintaksa

Prva razlika između class i funkcijskih komponenti je način na koji se kreiraju.
Class komponenta je obična klasa iz JavaScripta koja ima render() metodu koja vraća jsx u return dijelu.

Treba obratiti pažnju na to da class komponenta koristi osnovnu komponentu Component koja se uvozi iz 'reacta'. U funkcijskim komponentama ovo nije potrebno.

Funkcijska komponenta je obična JavaScript funkcija koja vraća jsx. Treba obratiti pažnju da u funkcijskim komponentama nema render() metode.

State

Druga značajna razlika je način na koji se postavlja i koristi state.

U class komponentama state mora biti definisan unutar konstruktor metode.

Da bi se koristio state u class komponentama potrebno mu je pristupiti kao i svakom drugom objektu uz korištenje ključne riječi this.

Promjena 'state-a' u class komponentama donosi nove 'probleme'.

Kao što može da se vidi potrebno je prvo kreirati funkciju koja mijenja godine sa 33 na 34. Ali ono šta je neophodno uraditi nakon toga je vezati tu funkciju za tu instancu klase. To se radi pomoću .bind() metode unutar konstruktora.

Ako želite da saznate više o bind metodi, pisao sam o njoj u tekstu koji možete pročidati ovdje.

Kod funkcijskih komponenti definisanje i korištenje state-a je mnogo elegantnije. Prije svega funkcijske komponente nemaju konstruktor jer nisu klasa. State se definiše uz pomoć useState hook-a u vidu obične varijable.

Vrijedi naglasiti da se state u funkcijskim komponentama ne mora navoditi pojedinačno kao u vom primjeru, nego sve može da se stavi u jedan npr. objekat. To je čak i preferirani način ako su podaci koji se deklarišu usko povezani.

Kao što se vidi pozivanje useState hook-a vraća dvije vrijednosti. Prva vrijednost je varijabla (ili konstanta) koju mogu koristiti u drugim dijelovima komponente, druga vrijendost je funkcija koja mijenja prvu vrijednost. Te dvije vrijednosti sam destrukturisanjem definisao u jednom redu.

U praktičnim okolnostima pozivanje setGodine metode najčešće neće biti obavljeno direktno u onClick 'event-u', nego će biti kreirana posebna funkcija unutar koje će se mijenjati 'state', pa onda tu novokreiranu funkciju dodati na onClick event.

Props

Props objekat je skup informacija koje komponente koriste da komuniciraju međusobno, da razmjenjuju podatke. Svaka 'parent' komponenta može proslijediti svojoj 'child' komponenti neke atribute sa vrijednostima, a ti atributi i vrijednosti će biti dostupni 'child' komponenti u objektu 'props'.

Recimo na primjer da imamo ovakvu 'parent' komponentu, koja isto tako može biti class komponenta ili funkcijska komponenta.

Vidimo da ova 'parent' komponenta na identičan način proslijeđuje props svojim 'child' komponentama, bez obzira da li su one class ili funkcijska komponenta.

Korištenje objekta props je, međutim, drugačije među ove dvije verzije komponenti u React-u.

Class komponente dobijaju props objekat kao parametar u konstruktor metodi. Kao i kod state-a objekat props se koristi pomoću ključne riječi this.

U funkcijskim komponentama props objekat je automatski parametar u funkciji. Kao i kod state-a, nema potrebe da se koristi ključna riječ this.

Kod funkcijskih komponenti korisno je to što se props objekat, kao i u bilo kojoj drugoj funkciji, može odmah destrukturisati direktno.

Destrukturisanje objekta props nije moguće u klasama u JavaScriptu, pa samim tim nije moguće ni u React-ovim class komponentama.

'Lifecycle' metode i hooks

U suštini sve komponente, kako class tako i funkcijske komponente, imaju svoj takozvani životni ciklus. To su faze kroz koju komponenta prolazi dok je prikazana u aplikaciji (riječ na Engleskom je 'mount'). Te faze najprostije rečeno su kada se komponenta postavi (mounted), kada se komponenta ažurira (updated) i kada se komponenta ukloni (unmounted).

Class komponente imaju na raspolaganju nešto što se zove 'lifecycle' metode, odnosno metode životnog ciklusa. One se koriste da bi se pratilo u kojoj fazi životnog ciklusa se nalazi. Shodno tome unutar tih metoda se može raditi nešto što želimo da se desi u bilo kojoj od tih faza.
Te metode su, između ostalih: componentDidMount, componentDidUpdate, shouldComponentUpdate, componentWillUnmount.

Ovo su samo neke od metoda. Ima dosta drugih metoda, od kojih su neke čak i statičke metode. Čak constructor i render metode koje smo vidili ranije dio su životnog ciklusa komponente.

Funkcijske komponente, s druge strane, nemaju na raspolaganju ove metode za praćenje životnog ciklusa. U ranijim verzijama React-a funkcijske komponente su bile samo prezentacijske komponente, te nije bilo potrebe da se bilo šta radi u njihovom životnom ciklusu.
Nisu imale svoj 'state', pa nije bilo potrebe da se prati da li je 'state' promijenjen, pa da se poziva nešto šta bi ličilo na npr. shouldComponentUpdate ili componentDidUpdate. Funkcijske komponente su se mijenjale samo kada se promijenio njihov props objekat koji su dobijale od svoje 'parent' komponente.

Međutim, dolaskom hooks-a i ovo se promijenilo. Funkcijske komponente mogu nositi/držati svoj 'state', ali što je još važnije došao je useEffect hook.

Ovaj useEffect hook, može da se iskoristi da se uradi nešto kada se komponenta postavi ili da se prate neki sporedni efekti koji se prate.

Hook useEffect dobija dva paremetra. Prvi parametar je funkcija koja će bit pozvana minimalno jednom, kada se komponenta prvi put postavi. Drugi parametar je niz koji će pratiti vrijednosti nakon čije promjene će funkcija iz prvog parametra biti ponovo pozvana. Ako niz ostane prazan, funkcija iz prvog parametra će biti pozvana samo jednom, na početku života komponente, kada se postavi.

Važno je naglasiti da useEffect, kao ni druge hooks-e, ne treba posmatrati kao zamjenu za metode životnog ciklusa u class komponentama, nego kao jedan drugi način posmatranja životnog ciklusa komponente.

Zaključak

Funkcijske komponente su budućnost React-a. Čak i u React-ovoj dokumentaciji rijetko ili nikako nećete naići na class komponente. To ne znači da class komponente ne treba naučiti koristiti, jer postoji vjerovatnoća da ćete nekada naići na neki 'legacy' kod na kom treba raditi.

Class komponente su zaostavština iz ranijih verzija React-a kada su samo class komponente mogle nositi state, a funkcijske komponente su služile samo za prezentaciju.

Verzija React-a 16.8 je po prvi put uvela pojam/ideju 'hooks'. Hooks-i su, najprostije rečeno, funkcije koje omogućavaju funkcijskim komponentama da koriste neke funkcionalnosti React-a koje su do tog trenutka bile dostupne samo class komponentama. Dva takva 'hooks-a' sam pominjao u ovom tekstu to su useState hook koji omogućava funkcijskim komponentama da nose/drže state, te usEffect koji služi sa praćenje takozvanih sporednih efekata.

Neki drugi hooks-i su useContext, useCallback, useMemo, itd. Međutim, svaki od ovih hooks-a je tema za sebe, pa ću se njima baviti u zasebnim tekstovima.

Kopiranje i kloniranje objekata u JavaScriptu. Jedan 'novi' trik za pomoć svima nama.

Slaven Bunijevac — Thu, 16 Mar 2023 13:52:56 +0000

Kada se radi sa JavaScriptom, u bilo kom okruženju, jedan od prijedloga ili nepisanih pravila je da se ne mutira/mijenja originalni objekat. Najčešće je u pitanju npr. neki objekat koji je došao sa nekog endpointa, ali ne nužno. Može biti u pitanju bilo koji objekat, sa bilo kog izvora. Razlog je jednostavno u tome što je moguće da će neki drugi dio aplikacije odnosno programa koristiti isti taj objekat i nije dobro da se on mijenja.

Rješenje za takvo nešto je da se, naizgled jednostavno, napravi kopija tog objekta i da se mutira/mijenja ta kopija. Ali ovdje se radi o JavaScriptu, objekti su referentni tipovi, te stoga njihovo kopiranje nije tako jednostavna tema.

Šta ćete ovdje pročitati?

Kako se objekti kopiraju u JavaScriptu?
Kombinacija metoda JSON.stringify i JSON.parse.
Spread (...) operator.
Nova metoda structuredClone().

Kako se objekti kopiraju u Javascriptu?

Objekti u JavaScriptu su referentni tipovi podataka (za razliku od primitivnih; više o tipovima možete pričitati u ovom tekstu). Jedna od karakteristika referentnih tipova je da se oni kopiraju po referenci. Odnosno kada kopiramo jedan objekat u drugi, to znači da nismo kopirali njegov sadržaj u drugi objekat nego njegovu lokaciju u memoriji.

Ovdje smo kopirali objekat osoba1 u osoba2 ali smo kopirali njegovu referencu na lokaciju u memoriji. Ova dva objekta dijele sada tu referencu. Zato ako pokušamo da promijenimo jedan od ovih objekata automatski ćemo promijeniti i drugi. Zato što smo promijenili objekat u memoriji, a oba ova objekta upućuju na istu lokaciju u memoriji.

Promjena godina u objektu osoba2 je promijenila godine i u objektu osoba1.

Dakle, u pokušaju da se pridržavamo pravila da ne mutiramo originalni objekat pravljenje obične kopije tog objekta neće funkcionisati. Zato je potrebno napraviti klon tog objekta, objekat koji ima sva svojstva kao i originalni objekat, ali koji ne dijeli njegovu referencu.

Kombinacija metoda `JSON.stringify` i `JSON.parse`

Jedno od rješenja za pravljenje klon objekta u JavaScriptu je kombinovanje metoda JSON.stringify i JSON.parse.
JSON.stringify metoda u JavaScriptu će uzeti objekat i pretvoriti ga u obični tekst, a JSON.parse metoda će ga vratiti iz teksta u obični JavaScript objekat. Koristićemo naš postojeći objekat osoba1.

Ova kombinacija metoda funkcioniše za neke osnovne potrebe. Međutim, problem kod ovog pristupa je što ne funkcioniše sa npr. datumima.

Kao što možemo viditi iz ovog primjera primjena metoda stringify i parse na datumu je promijenila taj datum. Naime, stringify metoda je pretvorila datum u string u punom formatu, ali parse metoda nije vratila taj string u puni datum, nego u ISO format.

Dakle, JSON.stringify metoda je dobra kada radimo sa primitivnim tipovima kao što su string, 'number' ili 'boolean'.
Evo nekliko primjera čudnog ponašanja:

Kada JSON.stringify ne zna šta da radi sa nekim podacima može se lako dogoditi ili da izgubimo neke podatke ili da dobijemo nešto potpuno drugačije.

Spread `(...)` operator

Sa ES6 standardom JavaScripta došao je jedan odličan operator koji se može koristiti za kloniranje objekata. To je 'spread' (...) operator. Kao što se vidi on izgleda kao obične tri tačke. Koristi se tako što se jednostavno postave tri tačke ispred objekta koji želimo da kopiramo i to dodamo kao vrijednost novom objektu.

Kao što se vidi iz osnovnog primjera moguće je koristiti i druge vrijednosti sa kojim smo imali problema u prethodnim primjerima. Vrijednosti su prenesene u drugi objekat onakve kakve su bile i u originalnom objektu. Datumi su u formatu koji smo imali i u originalnom objektu.

Naravno, ako promijenimo nešto u kloniranom objektu ta promjena se neće viditi u originalnom objektu.

Međutim, spread operator ima jednu, ali prilično veliku manu kada je kloniranje objekata u pitanju. Ta mana je što on pravi samo takozvane plitke kopije objekata. To znači da, ako neki objekat ima svojstvo koje je opet objekat, samo referenca tog 'unutrašnjeg' objekta će biti kopirana. Samim tim bilo koja promjena u tom unutrašnjem objektu će se odraziti i u unutrašnjem objektu originalnog objekta.

Ovo je veoma važna razlika jer ćete u stvarnosti često raditi sa objektima koji imaju više nivoa.

U ovom primjeru se vidi da objekat osoba1 ima svojstvo adresa koji je i sam objekat, sa svojim svojstvima. Kada smo klonirali objekat osoba1, objekat adresa nije kloniran nego je samo kopirana njegova referenca. Zato, kada smo promijenili broj na adresi u kloniranom objektu, promijenili smo i broj na adresi u originalnom objektu.

S obzirom da je spread operator lično moj omiljeni način za kloniranje objekata, uvijek moram biti svjestan njegovog jednog velikog nedostatka i misliti na to koju će strukturu imati moj originalni objekat.

Nova metoda `structuredClone()`

Nešto što se dugo čekalo u JavaScriptu je metoda structured Clone. Ova metoda je ugrađena u JavaScript u svim okruženjima. Koristi se tako što joj se kao parametar dodijeli objekat koji želimo da kopiramo i to se dodijeli kao vrijednost novom objekutu.

Kao što se vidi iz primjera structuredClone može da se koristi sa specijalnim podacima kao što su Date, Set, sa funkcijama.

Metoda structuredClone automatski pravi duboki klon datog objekta, bez obzira koliko nivoa je dubog objekat.

Svakako postoje i drugi načini koji se mogu koristiti za kopiranje objekata.

Može se koristiti Object.assign() pristup. Ovo međutim takođe pravi plitku kopiju objekta.
Može se koristiti neka od biblioteka koje imaju rješenje za ovo. Jedna od njih je lodash. Ona ima svoju metodu cloneDeep koja može da posluži za kloniranje. Jedini problem je što morate uvesti cijelu biblioteku samo da bi dobili jednu metodu. Ako ne koristite ništa više iz biblioteke lodash postoje bolja rješenja.

Call, apply i bind metode u JavaScriptu

Slaven Bunijevac — Mon, 06 Mar 2023 20:06:14 +0000

Šta možete pročitati ovdje?

Uvod i ključna riječ this.
Metoda .call().
Metoda .apply().
Metoda .bind().

Uvod i ključna riječ `this`

U drugim izričito objektno orijentisanim jezicima ključna riječ this se uvijek odnosi na trenutnu instancu klase. U JavaScriptu this se ponaša malo drugačije. Vrijednost riječi this zavisi od toga kako/gdje je funkcija pozvana.

U svrhu ovog teksta jednostavno ćemo reći da se this u JavaScriptu odnosi na objekat koji je pozvao metodu. Vizuelno će to biti objekat koji se nalazi lijevo od tačke prilikom pozivanja metode.

Recimo npr. da imamo objekat osoba sa određenim svojstvima i jednom metodom koja koristi svojstva iz tog objekta.

Dakle, pozvali smo metodu reciKoSi iz objekta osoba. Objekat se nalazi lijevo od tačke i na njega se odnosi ključna riječ this. Zato metoda reciKoSi ima pristup svojstvima ime i godine iz objekta osoba. Ovo je očekivano ponašanje.

Međutim, šta ako pokušamo da dodijelimo ovu metodu kao vrijednost nekoj varijabli?

Ovo je potpuno validna JavaScript sintaksa, ali problem je nastupio kada smo pokušali da je pozovemo. Zašto ova metoda nema pristup svojstvima ime i godine? Zato što je nismo pozvali na osoba objektu. Pozvali smo je bez reference na bilo koji objekat. To automatski znači da se this odnosi na globalni window objekat, a taj objekat nema svojstva ime i godine.

Upravo ovo je jedna od situacija zbog kojih kažemo da referenca ključne riječi this zavisi od toga kako je pozvana funkcija.

Ovakvo ponašanje ključne riječi this je jedan od razloga zbog kog je this izvor velike zabune u JavaScriptu, pa se njeno korištenje često i izbjegava.

Kao što sam već rekao ovo je samo jedan od razloga. Ključna riječ this je izuzetno složena tema sama za sebe i više nego dovoljna da bude tema jednog odvojenog teksta. No, u svrhu današnje teme dovoljno je shvatiti da se this odnosi na objekat koji je pozvao metodu, odnosno vizuelno objekat koji se nalazi lijevo od tačke prilikom pozivanja metode.

Metoda `.call()`

Jedna od tri veoma važne metode u JavaScriptu u objektno orijentisanom pristupu je .call() metoda.

Recimo npr. da imamo dva objekta osoba1 i osoba2.

Objekat osoba1 ima metodu reciKoSi kojom može da se predstavi tako što će reći ime i godine. Ali šta ako bilo gdje u aplikaciji želimo da se neka druga osoba predstavi. Objekat osoba2 nema metodu reciKoSi, ali želimo da je iskoristimo. Da bi izbjegli dupliciranje koda tako što bi samo kopirali istu metodu reciKoSi u objekat osoba2 itd., itd. sa bilo kojim drugim objektom kojem bi mogla koristiti da funkcija, tu na snagu stupa .call() metoda.

Sintaksa je takva da ćemo jednostavno pozvati reciKoSi metodu iz objekta osoba1 i onda vezati .call metodu. Prvi argument je objekat na koji želim da se odnosi ključna riječi this. Objekat kojim mijenjamo kontekst za this.

Šta se ovdje dogodilo? Pozvali smo .call metodu, ali sa drugim kontekstom. Sa objektom osoba2 kao argumentom promijenili smo kontekst za ključnu riječ this, odnosno promijenili smo na šta se odnosi this. Rekli smo pozovi reciKoSi metodu, ali this će da se odnosi na objekat osoba2.

Pored prvog argumenta koji mijenja kontekst za this, .call metoda može da dobije i bilo koji broj drugih argumenata, baš kao i svaka druga funkcija. Ti argumenti će biti uneseni poslije objekta jedan za drugim.

Recimo npr. da u našem primjeru objekti imaju svojstvo omiljeniSlatkiši, koje je predstavljeno kao niz stringova. Metoda za dodavanje novih omiljenih slatkiša će biti dodajSlatkiš.

Poslije objekta smo unijeli sve argumente koje metoda dodajSlatkiš ima na raspolaganju.

Metoda `.apply()`

Metoda .apply() je identična po ponašanju kao i .call metoda. Jedina razlika je u argumentima koji se unose poslije objekta.

Dakle, sintaksa je slična kao i kod .call() metode. Jedina razlika je što se argumenti poslije objekta unose u jednom nizu, umjesto jedan za drugim kao što je u .call() metodi. Kao i kod .call() metode možemo navesti koliko god želimo argumenata.

Metoda `.bind()`

Slično kao i u prethodna dva slučaja u .bind() metodi možemo da promijenimo kontekst za this.

Razlika je u tome što bind metoda neće odmah pozvati metodu, što je slučaj ko call i apply metoda. Bind funkcioniše tako što će vratiti funkciju, sa datim kontekstom i parametrima/argumentima, koja može kasnije biti pozvana.

Dakle ovo neće imati nikakav uticaj na objekat osoba2:

Ovdje funkcija/metoda dodajSlatkiš nije pozvana. Međutim, možemo referencu na ovu metodu staviti u neku varijablu za kasnije pozivanje.

Ili možda čak i primjer gdje argumente dodajemo prilikom pozivanja funkcije dodajIskriSlatkiš.

Ova ova primjera će za donijeti isti rezultat.

Dakle, .bind() poziv nam je dao na raspolaganje funkciju sa osoba2 kontekstom i parametrima. Tu vrijednost smo proslijedili varijabli dodajIskriSlatkiš da bi je kasnije mogli pozvati. Iako izgleda da smo pozvali funkciju dodajIskriSlatkiš iz globalnog objekta, ona nije preuzela njegov kontekst, nego ima kontekst koji smo joj naveli u .bind() metodi.

Upravo .bind metoda je rješenje za naš problem sa početka ovog teksta kada smo izgubili kontekst za objekat osoba prilikom proslijeđivanja njegove metode reciKoSi u varijablu za kasnije pozivanje.

Neke druge teme o kojim sam pisao na temu JavaScripta, web developmenta, možete pronaći ovdje.

Tipovi u JavaScriptu

Slaven Bunijevac — Fri, 17 Feb 2023 18:36:37 +0000

Šta se može pročitati u ovom tekstu?

Primitivni vs referentni tipovi.
Koji su primitivni tipovi u JavaScriptu?
Referentni tipovi.

Primitivni vs referentni tipovi.

Kada pričamo o osnovnoj i glavnoj podjeli tipova može se reći da u JavaScriptu postoje primitivni i referentni tipovi. Primitivni tipovi imaju fiksnu veličinu u memoriji i kopiraju se po vrijednosti.

Dakle, ime1 i ime2 imaju istu vrijednost i logično je da njihovo poređenje vraća true, pored činjenice da su ovo dvije različite lokacije u memoriji, dvije odvojene varijable. Njihove vrijednosti su identične.

Šta ako bi probali da kopiramo jednu varijablu u drugu.

Ovo poređenje takođe vraća true zato što smo samo kopirali 'vrijednost' varijable ime1 u varijablu ime2. Treba obratiti pažnju da je kopirana samo njena vrijednost. Ove dvije varijable imaju dvije različite lokacije u memoriji, ali i dalje identičnu vrijednost.

Upravo kod ova dva aspekta je razlika između primitivnih i referentnih tipova. Referentni tipovi nemaju fiksnu veličinu u memoriji, jer se njihova svojstva mogu mijenjati i kopiraju se po 'referenci', kopira se samo njihova lokacija u memoriji.

Ovo poređenje vraća false zato što su ova dva objekta dvije različite lokacije u memoriji. Očigledno je da imaju istu vrijednost, ali se ne porede po vrijednosti, nego po lokaciji u memoriji i zato su različiti.

Šta ako kopiramo jedan objekat u drugi?

Sada se rezultat poređenja promijenio i vraća true. To je zato što smo prilikom kopiranja jednog objekta u drugi u stvari kopirali njegovu referencu, odnosno njegovu lokaciju u memoriji. Ova dva objekta upućuju na istu lokaciju u memoriji i kada se uporedi njihova lokacija ona je ista. Zato vraća true.

Još jedna posljedica ovakvog ponašanja referentnih tipova je to da ako promijenim jedan od ova dva objekta, automatski ću promijeniti i drugi, zato što se nalaze u istoj lokaciji u memoriji.

Ovo je česta pojava kada se radi u JavaScript okruženju. Često će se raditi sa manipulisanjem objektima i treba paziti kada je u pitanju izmjena originalnog objekta, jer može izazvati neželjene posljedice.

Ako ste se pitali kako je moguće mijenjati (mutirati) objekat koji je definisan sa const, to i još više sam objasnio u ovom tekstu o različitom načinu definisanja varijabli u JavaScriptu.

Koji su primitivni tipovi u JavaScriptu?

Jednostavno rečeno u JavaScriptu postoji sedam primitivnih tipova podataka. To su:
string, number, bigint, boolean, undefined, null, symbol.

Napomena: tokom ovog teksta koristiću operator typeof koji će mi poslužiti da pokažem koji tip je određeni podatak. Operator typeof vraća string vrijednost koja označava tip podatka.

String

String je primitivni tip u JavaScriptu koji predstavlja tekstualnu vrijednost. Dakle, obični tekst. Predstavljen je pod jednostrukim, dvostrukim navodnicima.

Postoji i treći način predstavljanja stringova a to su obrnuti apostrofi. Ova tehnika se zove 'template strings' i uvedena je sa ES6 standardom JavaScripta. Ovaj način kreiranja stringova je dobar za ubacivanje dinamičnih vrijednosti u tekstualni sadržaj.

Operator typeof na string vrijednosti će nam dati 'string' kao rezultat.

Number

Number (broj) je numerički primitivni tip u JavaScriptu koji predstavlja bilo koji broj.

Kao što se može viditi iz navedenih primjera, u JavaScriptu number predstavlja i cijele i decimalne brojeve.

Operator typeof na number vrijednosti će nam dati 'number' kao rezultat.

BigInt

BigInt je takođe numerički primitivni tip koji predstavlja bilo koji broj koji je 'prevelik' da bude prikazan običnim number tipom. Ovaj tip je uveden sa ES2020 standardom JavaScripta.

U JavaScriptu postoji ograničenje koliko veliki brojevi mogu biti definisani običnim 'number' tipom i tu na snagu stupa BigInt.

Jedan od načina da se definiše bigInt je da se doda 'n' na neki veliki broj.

Drugi način je da se iskoristi konstruktor BigInt(). Vrijednost koja se proslijeđuje ovom konstruktoru je broj u brojčanoj ili string verziji.

Jedna stvar na koju treba obratiti kod bigint vrijednosti je to što se ona koristi samo za cijele brojeve, nikako decimalne.

Boolean

Boolean je primitivni tip u JavaScriptu koji može imati samo dvije vrijednosti true ili false.

Ova vrijednost se uglavnom koristi za poređenje, da provjerimo koji dio koda će biti izvršen, a koji neće. Rezultat poređenja nekih vrijednosti će uvijek biti boolean vrijednost.

Zašto jedno od ovih poređenja vraća false, a drugo true je pitanje strogog poređenja u JavaScriptu, ali to je tema za neki drugi tekst.

Upravo ovakvo poređenje će najčešće biti uslov u if izjavi kada pitamo da li nešto da se uradi.

Rezultat poređenja u if izjavi će biti true i zato će kod koji je unutar vitičastih zagrada biti izvršen.

Null

Null je primitivni tip u JavaScriptu koji predstavlja odsustvo bilo kakve vrijednosti. Dakle, namjerno odsustvo vrijedsnoti. Za razliku od undefined, on nikada neće biti automatski dodijeljen kao vrijednost.

Najčešće ćemo null upotrijebiti za neku varijablu koja kasnije može dobiti svoju pravu vrijednost.

Tako se null često postavlja kao rezultat vraćanja sa nekog poziva na API gdje se očekuje objekat, ali nijedan nije pronađen.

Ako upotrijebimo typeof operator na null dobićemo 'object'.

Činjenica da je null tipa 'object' je jedan od poznatijih bug-ova u JavaScriptu koji je nastao prilikom njegovog kreiranja i velika je vjerovatnoća da nikada neće biti ispravljen iz prostog razloga što mnogo aplikacija zavisi od toga.

Undefined

Undefined je drugi primitivni tip u JavaScriptu koji predstavlja odsustvo vrijednosti (pored null). Izuzev par istaknutih razlika, vrlo je sličan po ponašanju tipu null i zato je razlika između ovo dvoje izvor velike zabune.

Prilikom inicijalnog kreiranja varijabli, prije nego što se varijabli dodijeli vrijednost njena vrijednost je undefined. Upravo iz ovog razloga sve varijable kojim se nikad ne dodijeli vrijednost u stvari imaju vrijednost undefined.

Varijabla ime nikada nije dobila vrijednost i zato je njena vrijednost ostala ona inicijalna undefined.

Funkcije koje ne vraćaju ništa, u stvari dobijaju automatsku return vrijednost undefined.

Ova funkcija ne vraća ništa, ali zato ako pokušamo da izlogujemo njenu return vrijednost dobićemo undefined.

Ako uporedimo null i undefined, u zavisnosti koji operator za poređenje smo koristili dobićemo različite rezultate.

Ovdje se opet radi o razlici između obične i stroge jednakosti, ali to je tekst za neki drugi put.

Ako pozovemo operator typeof na undefined dobićemo 'undefined'.

Symbol

Simbol je specijalni tip u JavaScriptu koji je došao sa ES6 standardom JavaScripta. On je rezultat pozivanja konstruktora Symbol(). Ovaj konstruktor uvijek vraća jedinstvenu vrijednost. Drugim riječima, simbol je uvijek jedinstvena vrijednost.

Iako je vrijednost koja je proslijeđena konstruktoru kao argument identična u oba slučaja ime1 i ime2, ove dvije vrijednosti nisu iste, jer simbol je uvijek jedinstvena vrijednost.

Pozivanje operatora typeof na simbol vrijednost vraća 'symbol'.

Referentni tipovi

Kada govorimo o referentnim tipovima u JavaScriptu u stvari se govori o objektima. Objekti su prosto govoreći jedini ne-primitivni tip u JavaScriptu.

Kada želimo da neka varijabla bude objekat, definisaćemo je kao parove svojstava (termini na engleskom su property/key) i vrijednosti (value) razdvojene zarezom.

Vrijednosti koje se daju kao svojstvima u objektu mogu biti bilo koji drugi tip: string, number itd., pa čak i drugi objekat.

Objekti mogu imati i funkcije u sebi. Kada neka funkcija unutar objekta najčešće će se koristiti termin 'metoda'. Ona je svojstvo kao i bilo koje drugo i može se pozvati kao i bilo koja druga funkcija/metoda.

U slučaju da želimo da pristupimo nekom svojstvu u objektu, postoje dva načina da se to uradi.

Prvi način je preko tačke. Prvo upišemo objekat, pa onda poslije tačke svojstvo kom želimo da pristupimo.

Drugi način je preko uglastih zagrada. Prvo objekat, pa onda u uglastim zagradama pod navodnicima svojstvo kom želimo da pristupimo.

Treba obratiti pažnju kod korištenja uglastih zagrada na obavezno korištenje navodnika (bilo kojih) prilikom pisanja svojstva.

Objektima se mogu naknadno dodavati i uklanjati svojstva. Dodavanje svojstava se takođe vrši preko tačke ili uglastih zagrada.

Prvobitno objekat person nije imao ni godine niti admin, ali smo ih naknadno dodali.

Ako želimo da obrišemo neko svojstvo iz objekta moramo dodati ključnu riječ delete ispred tog svojstva.

Sa ovom praksom treba biti izuzetno oprezan jer neki drugi dijelovi aplikacije mogu koristiti ovo svojstvo.

Još jedna druga struktura podataka u JavaScriptu koja je tipa 'object' je niz - array. Niz se definiše tako što se unutar uglastih zagrada stave vrijednosti razdvojene zarezom. Ove vrijednosti mogu biti bilo kod drugog tipa: tekst, brojevi, pa čak i drugi objekti ili nizovi.

Kao što se može viditi iz primjera vrijednostima unutar niza se pristupa putem indeksa. Svaka vrijednost ima svoj indeks, odnosno poziciju na kojoj se nalazi. Treba obratiti pažnju da je prvi indeks u nizu na nula (0).

Pozivanje operatora typeof na bilo kom objektu ili nizu vratiće 'object';

Svaki pojedinačni tip u JavaScriptu je dovoljno složena tema sam za sebe tako da nisam previše detalja iznosio o svakom, nego samo stvari za osnovno upoznavanje sa tipovima u JavaScriptu.

Ako želite da pročitate još neke tekstove na temu JavaScripta, Frontend Web Developmenta možete ih naći ovdje.

Definisanje varijabli u JavaScriptu - var, let ili const

Slaven Bunijevac — Wed, 28 Dec 2022 17:00:13 +0000

Postoji više načina da se definiše varijabla u JavaScriptu. Nešto stariji način je korištenjem ključne riječi var. Međutim, ES6 standard JavaScripta je donio dvije nove ključne riječi za definisanje varijabli - let i const. U ovom tekstu ćete pročitati najosnovnije razlike između ova tri pristupa.

Kratka napomena: Tokom cijelog ovog teksta ću koristiti riječ varijabla, čak i u slučaju kada pričam o vrijednosti koja je ona definisana sa const koja u suštini znači da je definisana vrijednost u suštini konstanta. Više o razlici između to dvoje u četvrtom poglavlju ovog teksta.

Šta će se sve moći pročitati u ovom tekstu?

Razlika između var i let u opsegu
Razlika između var i let u hoistingu
Razlika u ponovnom deklarisanju
Razlika između let i const

Razlika između `var` i `let` u opsegu (scope)

Šta je opseg?

Opseg je okruženje u kom je neka deklarisana vrijednost vidljiva. U JavaScriptu postoje tri opsega: globalni, funkcijski i blok.

Sve vrijednosti koje su deklarisane u globalnom opsegu su dostupne u cijelom programu. Bez obzira koja ključna riječ je korištena prilikom deklarisanja ta vrijednost će biti vidljiva u cijelom programu.

Dakle, bilo gdje u kodu imate pristup varijabli name jer je ona ima globalni opseg. Funkcija logName i console.log imaju pristup varijabli name.

Generalno govoreći treba izbjegavati deklarisanje globalnih varijabli, jer to otvara prostor za pojavljivanje različitih preklapanja i/ili poništavanja za drugim skriptama i bibliotekama.

U ovom kontekstu važno je naglasiti da će svaka varijabla koja je deklarisana bez ključne riječi automatski postati globalna varijabla.

Razlika između var i let dolazi u tome kada one nisu globalne varijable. Varijable deklarisane sa var imaju opseg funkcije u kojoj su deklarisane.

Šta se dešava? Kada pozovete funkciju logName ona vidi varijablu ime jer opseg varijable ime je ta funkcija. Međutim, kada pokušate da pristupite toj varijabli u console.log(ime) tu ste već u globalnom opsegu i nemate pristup (ne vidite) varijabli ime, te ćete zato dobiti grešku.

Za razliku od ovoga varijable deklarisane sa let imaju opseg bloka koda. Blok koda u JavaScriptu je jednostavno rečeno sve što se nalazi unutar vitičastih zagrada {}. To može biti if-else izjava, switch izjava, bilo koja petlja...

Šta se dešava? Imam if izjavu (blok koda) unutar koje je deklarisanja varijabla ime. Unutar istog tog bloka koda console.log(ime) će viditi tu varijablu jer opseg te varijable je taj blok koda. Međutim, izvan ovog bloka ste u globalnom opsegu i nemate pristup varijabli ime.

Varijabla deklarisana sa var ovdje ne bi izbacila grešku.

Varijabla ime bi u ovom slučaju imala globalni opseg i bila bi dostupna (vidljiva) drugoj console.log(ime) izjavi.

Razlika između `var` i `let` u hoistingu

Još jedna od razlika između var i let ključne riječi je u ponašanju tokom takozvanog hoisting-a (podizanje). Ovo je mehanizam u kom su deklaracije funkcija i varijabli naizgled pomjerene na vrh (hoist) njihovog opsega. Upravo zbog ovog mehanizma možete imati pristup varijablama ili funkcijama prije njihovog deklarisanja.

Dakle, funkcija logName ima pristup varijabli ime zato što je varijabla ime naizgled podignuta na vrh opsega (scope - global), ali treba obratiti pažnju na to da joj je vrijednost undefined.

Upravo ovdje nastupa razlika između var i let. Ovaj princip hoisting-a će funkcionisati samo sa varijablama koje su deklarisane sa var. Ukoliko bi pokušali iskoristiti let za deklarisanje varijable dobićete grešku zato što varijable deklarisane sa let neće biti podignute.

Riječ 'naizgled' je namjerno označena jer upravo tu dolazi objašnjenje. Ništa se ne podiže, prilikom egzekucije koda nijedna linija koda neće u stvari biti pomjerena. Podizanje je samo 'naizgled'.

Šta JavaScript engine radi kada čita kod?

Kada neki engine (komponenta koja je zadužena za izvršenje JavaScript koda) čita JavaScript kod on obavlja dva koraka: faza kreacije (creation phase) i faza izvršenja (execution phase).

U fazi kreiranja 'engine' deklariše svaku varijablu, dodijeli joj prostor u memoriji i početnu vrijednost undefined. Tada je varijabla deklarisana. Ovo je deklaracija varijable.
U fazi izvršenja varijabla će dobiti vrijednost koja joj je dodijeljena u kodu. Npr. kada napišete var ime = 'Slaven' Ovo je inicijalizacija varijable.

Mehanizam podizanja će podići samo deklaraciju varijable, ali ne i inicijalizaciju. Upravo zbog ovoga varijable deklarisane sa var imaju vrijednost undefined kada pokušate da ih iskoristite prije inicijalizacije.

Međutim varijablama koje su deklarisane sa let ne možete pristupiti prije inicijalizacije (drugi korak) i zato ćete dobiti grešku ReferenceError ako pokušate da je iskoristite prije inicijalizacije. U suštini 'engine' vam govori: 'Vidim varijablu, deklarisana je, ali nije inicijalizovana i zato joj ne možete pristupiti'.

Napomena: Strogo govoreći varijable deklarisane sa let i const između ova dva koraka završavaju u nečemu što se zove 'temporal dead zone' (vremenska mrtva zona), objašnjenje toga bi zahtjevalo malo dublje obješanjenje faze kreacije i egzekucije (izvršenja), te sam smatrao da bi to trebalo biti tema za neki drugi tekst.

Razlika u ponovnom deklarisanju

Još jedna od razlika je u tome što varijable deklarisane sa var mogu biti ponovo deklarisane sa istim imenom.

Ovo je validna JavaScript sintaksa ako se koristi var. Druga deklaracija će poništiti prvu i zato će varijabla ime nositi vrijednost 'John'.

Očigledno je koliko je ovo potencijalno problematično. Ne želite se naći u situaciji gdje nakon izvjesnog vremena pokušate ponovo deklarisati varijablu zato što ste možda zaboravili da već imate varijablu sa istim imenom.

Promjenu u ovom kontekstu došle su sa let (kao i const). Varijable deklarisane sa let ne mogu biti ponovo deklarisane i dobićete grešku.

Ovo će izbaciti grešku SyntaxError istog trenutka kada dođe do ponovo deklarisane varijable.

Razlika između `let` i `const`

Varijable deklarisane sa let i const ponašaju identično u svim slučajevima o kojim sam govorio do sada (opseg, podizanje, ponovna deklaracija).

Razlika između ove dvije ključne riječi je u tome što varijablama koje su deklarisane sa let mogu dodijeliti novu vrijednost negdje drugo dok varijable koje su deklarisane sa const to ne dozvoljavaju i to je svrha njihovog uvođenja.

Ovo ne treba pomiješati sa onim što sam govorio u prethodnom poglavlju da let varijable ne mogu biti ponovo deklarisane. Ovdje varijabla ime nije ponovo deklarisana nego joj je samo dodijeljena druga vrijednost.

Međutim, ključna riječ const ovo ne dozvoljava.

Ovo nije dozvoljeno i dobićete grešku istog trenutka kada dođe do ponovnog dodjeljivanja vrijednosti. Kao što navedena greška kaže, nije dozvoljeno dodjeljivati vrijednost konstantama.

Jedna stvar na koju treba obratiti pažnju kod const varijabli je to kako se one ponašaju kada nose vrijednost referentnih tipova podataka, kao što su objekti ili nizovi. Iako ni ovdje nije dozvoljeno ponovo dodjeljivati vrijednost, dozvoljeno je mijenjati same elemente unutar te vrijednosti.

Ovdje imamo objekat korisnik koji ima dva svojstva. Nakon toga je promijenjeno svojstvo godine u tom objektu.

Ovo je dozvoljeno u JavaScriptu čak i sa const varijablama. Ovo se naziva mutacija varijabli. Dakle, dozvoljeno je mijenjati pojedinačna svojstva unutar objekta, ali nije dozvoljeno ponovo dodijeliti vrijednost cijeloj varijabli.

Postoje načini da se zamrznu neka svojstva u objektima, ali to je tema koju vrijedi ispitadi u zasebnom tekstu.

Zaključak

Izbjegavajte korištenje globalnih varijabli. Ovo otvara previše prostora za preklapanje naziva varijabli iz različitih skripti ili biblioteka.
Uglavnom bi trebalo izbjeći korištenje var ključne riječi za deklarisanje varijabli sada kada imamo na raspolaganju let i const. Varijable sa var prljaju globalni (window) objekat, a to je poželjno izbjeći.
Koristite const za deklarisanje varijabli ako možete predviditi da ta varijabla neće dobijati drugu vrijednost. Ako imate razloga da mislite da će nekad tokom njenog korištenja ta varijabla dobiti drugu vrijednost slobodno možete koristiti let ključnu riječ.

Destrukturisanje u JavaScriptu - tvoj dobar drugar

Slaven Bunijevac — Tue, 15 Nov 2022 10:20:35 +0000

Šta možete pročitati u ovom članku?

Šta je destrukturisanje i za šta je dobro?
Destrukturisanje sa objektima.
Destukturisanje sa nizovima.

Šta je destrukturisanje i za šta je dobro?

Destrukturisanje (ja sam ovako 'preveo' engleski termin destructuring) je sintaksa sa izvlačenje vrijednosti iz objekata i nizova koja je došla sa ES6 (ES2015) standardom JavaScripta.

Recimo da imam objekat user i u njemu neka osnovna svojstva. Prije ES6 standarda način na koji se izvlačila neka vrijednost iz objekta je bio da se koristi notacija sa tačkom ili sa uglastom zagradom ako imam neku dinamičnu vrijednost. Da bi iz ovog objekta izvukao vrijednost najvjerovatniji pristup je:

Ovo nije nikakav problem ako izvlačite samo jedno svojstvo koje namjeravate da koristite. Međutim, šta ako se nađete u situaciji da izvlačite više svojstava (properties) iz objekta. Ako bi htjeo izvući i godine korisnika morao bih uraditi ovo:

I tako za svako svojstvo koje želite da izdvojite iz objekta, koliko god da ih ima, a može ih biti mnogo.

Tu na snagu stupa destrukturisanje.

Destrukturisanje sa objektima

Dakle, sintaksa je takva da se sa lijeve strane operatora postavlja varijabla koju želite da izvučete iz objekta ali unutar vitičastih zagrada jer izvlačite svojstvo iz objekta. Sa desne strane operatora je objekat iz kog izvlačite svojstvo.

Može se primjetiti da su u navedenim primjerima korišteni nazivi svojstava tačno onako kako su oni deklarisani u objektu. Međutim, moguće je izdvojiti ova svojstva iz objekta i staviti ih u neku varijablu drugačijeg naziva.

Jednostavno korištenjem dvotačke na desnoj strani svojstva unesem bilo koji naziv koji želim da koristim. U navedenom primjeru, svojstvo name je izdvojeno iz objekta i stavljeno u varijablu 'ime', a svojstvo age je izdvojeno iz objekta i stavljeno u varijablu 'godine'.

Možete nekada doći u situaciju da ne znate nužno da li će neka svojstva postojati u objektu. Korištenje ove metode nam lako omogućava da koristimo default vrijednosti u slučaju da ne bude nekog svojstva. U suprotnom korištenje nekog svojstva koje ne postoji naravno daje vrijednost undefined.

Ukoliko objekat user nema svojstvo name dodijeliće mu se vrijednost 'Mike'. Ukoliko objekat ima to svojstvo koristiće se vrijednosti tog svojstva, a vrijednost 'Mike' će biti ignorisana.

Oprez: undefined vs null:
Default vrijednost će biti primijenjena samo ako vrijednost koju tražite bude undefined. U slučaju da vrijednost iz nekog razloga bude null default vrijednost neće biti primijenjena nego ćete dobiti upravo taj null.

Destrukturisanje sa objektima je korisno u situacijama kada se proslijeđuje objekat kao argument u funkciji.

Prilikom pozivanja funkcije proslijedi se objekat, ali se unutar same funkcije direktno odmah izvrši destrukturisanje dijelova objekta koje želite da koristite u toj funkciji. Ne zaboravite, u objektu koji se proslijeđuje može biti mnogo svojstava. Vi prilikom korištenja funkcije samo izdvojite sebi ona svojstva koja vam trebaju u toj funkciji. Ako hoćete možete sva ostala svojstva staviti u jedan objekat korištenjem rest(...) operatora, ali to je tema za neki drugi post.

Ovakvu primjenu prepoznaće React developeri. Ovo je korisno prilikom korištenja props objekta u nekoj komponenti.

Prilikom kreiranja komponente Navbar odmah izdvojite iz objekta props sve što ćete koristiti u toj komponenti.

Ponekad objekat sa kojim radite može imati više nivoa, objekat unutar objekta itd, itd. Destrukturisanje može pomoći i u tim situacijama.

Sa lijeve strane dvotačke je svojstvo u objektu na prvom nivou, a sa desne su svojstva unutar tog objekta koja izdvajam.

Destrukturisanje sa nizovoma

Procedura kod destrukturisanja sa nizovima je vrlo slična uz, naravno, određene razlike.

Kod nizova se takođe sa desne strane operatora koristi niz iz kog izdvajam vrijednosti, a sa lijeve strane definisana varijabla (konstanta) u koju je pohranjena izdvojena vrijednost.

Jedna od razlika je ta što se koriste uglaste zagrade umjesto vitičastih zato što se radi o nizu.

Druga razlika je što se mora paziti na redoslijed elemenata u nizu. S obzirom da je u nizu redoslijed elemenata važan, isto tako je važno kojim redoslijedom se izdvajaju vrijednosti. Prvi izdvojeni element će imati vrijednost prvog elementa u originalnom nizu, drugi vrijednost drugog itd, itd...

Za razliku od objekata kod destrukturisanja sa nizovima imate punu slobodu u nazivanju varijabli. Naziv elemenata nije ono na šta se oslanja ovaj princip, naravno zato što ih u nizovima nema, nego njihov redoslijed u nizu.

Dobra stvar sa nizovima je to što se mogu slobodno preskakati elementi u nizu. Recimo da imate niz od tri elementa, ali želite da iskoristite samo prvi i treći. Drugi možete definisati, ali i ne morate. Dovoljno je unijeti prazan prostor kao vrijednost na drugoj poziciji, jasno razdvojenu zarezima.

Ovakav način izdvajanja vrijednosti iz niza prepoznaće React developeri jer je ovo često rezultat različitih hooks-a.

To je to što se tiče osnova destrukturisanja.

Definitivno tu ima još stvari koje bi se mogle pomenuti, kao što je rest operator, pa onda kako se ponašaju destrukturisane varijable kreirane sa let u odnosu na one kreirane sa const. Međutim, smatrao sam da su to teme koje je najbolje obrađivati u odvojenim tekstovima.

Forem: Slaven Bunijevac

Razlika između 'type' i 'interface' u TypeScriptu

TypeScript je sjajan alat koji donosi nove mogućnosti, koje ne postoje u JavaScriptu. Glavna stvar koju TypeScript razlikuje od JavaScripta je to što možemo definisati tipove podataka sa kojim radimo.

Jedan od načina da se definiše tip podataka je korištenje tipa, odnosno type aliasa, a drugi je korištenje interfejsa, odnosno interface. Upravo razlika između ova dva načina je tema ovog teksta.

Uvod

Osnovna sintaksa

Proširivanje i naslijeđivanje

Objekti i sve ostalo

Unije

Utility tipovi

Tuple

Izvlačenje

Spajanje i ponovna deklaracija

Klase

Ukratko

Samo nešto malo o 'useEffect' u Reactu

Tokom svog životnog ciklusa komponenta će često koristiti neke eksterne sisteme ili API-eve radi funkcionalnosti koju oni donose.

Tu na scenu stupa useEffect hook.

Šta možete ovdje pročitati?

Šta je useEffect hook?

Koji su parametri u useEffect hook?

Primitivni i referentni tipovi

Šta radi return dio?

Zaključak

U kratkim crtama:

Ukratko o useState hook u Reactu

Šta možete ovdje pročitati:

Šta je useState hook?

Osnovna upotreba

Promjena statea

Class komponente i funkcijske komponente u Reactu

Komponente su osnovni element React biblioteke. Međutim, kada je u pitanju kreiranje komponenti u Reactu, postoje dva pristupa: class komponente i funkcijske kompontente.

U ovom tekstu ću objasniti osnovne razlike između ova dva načina kreiranja komponenti.

Osnovna sintaksa

State

Props

'Lifecycle' metode i hooks

Zaključak

Kopiranje i kloniranje objekata u JavaScriptu. Jedan 'novi' trik za pomoć svima nama.

Šta ćete ovdje pročitati?

Kako se objekti kopiraju u Javascriptu?

Kombinacija metoda JSON.stringify i JSON.parse

Spread (...) operator

Nova metoda structuredClone()

Call, apply i bind metode u JavaScriptu

Šta možete pročitati ovdje?

Uvod i ključna riječ this

Metoda .call()

Metoda .apply()

Metoda .bind()

Tipovi u JavaScriptu

Šta se može pročitati u ovom tekstu?

Primitivni vs referentni tipovi.

Koji su primitivni tipovi u JavaScriptu?

String

Number

BigInt

Boolean

Null

Undefined

Symbol

Referentni tipovi

Definisanje varijabli u JavaScriptu - var, let ili const

Šta će se sve moći pročitati u ovom tekstu?

Razlika između var i let u opsegu (scope)

Razlika između var i let u hoistingu

Šta JavaScript engine radi kada čita kod?

Razlika u ponovnom deklarisanju

Razlika između let i const

Zaključak

Destrukturisanje u JavaScriptu - tvoj dobar drugar

Šta je destrukturisanje i za šta je dobro?

Destrukturisanje sa objektima

Destrukturisanje sa nizovoma

Jedan od načina da se definiše tip podataka je korištenje tipa, odnosno `type` aliasa, a drugi je korištenje interfejsa, odnosno `interface`. Upravo razlika između ova dva načina je tema ovog teksta.

Tu na scenu stupa `useEffect` hook.

Šta je `useEffect` hook?

Koji su parametri u `useEffect` hook?

Šta radi `return` dio?

Šta je `useState` hook?

Kombinacija metoda `JSON.stringify` i `JSON.parse`

Spread `(...)` operator

Nova metoda `structuredClone()`

Uvod i ključna riječ `this`

Metoda `.call()`

Metoda `.apply()`

Metoda `.bind()`

Razlika između `var` i `let` u opsegu (scope)

Razlika između `var` i `let` u hoistingu

Razlika između `let` i `const`