Tipovi u JavaScriptu
Tags: javascript, webdev
Published: 2023-02-17 18:36:37



## **Š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.


![example of same value primitives in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xsewc8h8g86cd5h0yq39.png)

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.

![copy primitives example in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0gmwjplhgpucwmt7dhdk.png)

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.

 
![comparing refenrce types in JavaScript example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/alu25ck8sm7bxwfjfn6o.png)

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?


![copy reference types example in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggm3zboqhuu59u58uduo.png)

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.


![copied object mutation example in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pnlkuagd3gpaaht2nlfy.png)

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](https://dev.to/bslaven/definisanje-varijabli-u-javascriptu-var-let-ili-const-2gge).

---

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


![basic examples of string in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ioqzf72lshobl3iajds9.png)

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.


![template string example in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/19jcivgb49vv7w2k2y95.png)

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



![typeof string example in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/d0oikjfiirkuxlfyo7yv.png)

---

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



![basic number examples in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qj0em0qs2ajqlg694aq.png)

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.



![typeof number example in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5oof8f2gv5p291ly0jkd.png)

---

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


![basic bigint example in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5uno90ud2ck378jx4vmh.png)

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.


![basic boolean as a result of comparison](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2g8idjsw10dn86dec1es.png)


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

![boolean in if statement example in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jypf7v1nz9nrho1z7hmh.png)

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.


![null as value example in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/efzmneg79zlc1x8oi150.png)

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


![typeof null example in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/crlpzm60g0gpqviv2oj0.png)

Č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`.

![undefined for variables without value in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/81don18dda98p8wndjyf.png)

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


![undefined as return value in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ggyyeol687c08ahbtvkt.png)

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.


![comparing null and undefined in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5okp4ai1d3sdcorn09cv.png)

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


![typeof undefined in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pdaz7i887v7xhdzhs2dg.png)

---

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


![comparing two symbols in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0dujmzzp6g59zuc9icxs.png)

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.

![typeof Symbol in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oeujs4jvmqxhq25ht2na.png)

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.


![example of a simple object in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/c3vvbqjgq2ccl2uqjiv2.png)

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.


![method in an object JavaScript example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xpwnxjq0znqbh09wn9s8.png)

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.


![bracket and dot notation in JavaScript example](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/v9xahmxor4i2rsm3pccx.png)


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. 


![adding properties in objects in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4u7e4xgbmrgbu5827ham.png)

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.


![deleting properties from and object in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ukviego05j8bueyp2gma.png)

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.


![simple array example in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/o3qs22956jnjdopp5ats.png)

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';


![typeof object and array in JavaScript](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ipekesefolr6rxqi48rm.png)

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](https://dev.to/bslaven).