Destrukturisanje u JavaScriptu - tvoj dobar drugar
Tags: javascript, react, webdev
Published: 2022-11-15 10:20:35

Š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:

![Ordinary object value usage](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wfen2yorv0cgd2wyd31k.png)

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:

![getting multiple values from an object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/nsvth1ozb91gaynrb7vt.png)

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

![destructured values from an object](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6dxwxdid0rpotjkd5yzf.png)

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.

![renamed destructured values](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xzutoykletmleqdjwf74.png)

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

![code with default values in a destructured value](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/60jvokfrhzv548fxvoli.png)

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.

![code for default value being ignored](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ojxuupyhlyryp8ov0dny.png)

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

![code image for destructured values in a function](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/jqz5yyo9i0pcl0rbi70d.png)

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.

![React Navbar component with destructured values from props](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/emdjx8b7fo8rpck3fvtj.png)

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.

![Code with destructured nested objects](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s7wjt5huam8xxibwwsvx.png)

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.

![code for basic array destructuring](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/e0r5gwbvm5gjv2uurc93.png)

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

![order of destructuring from the array](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/bomapben6ujn63qtkwlt.png)

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.

![code for skipping a value in destructuring](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/7iw98jcepmx20zrvwve8.png)

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

![example of App react component using destructuring in useState hook](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/lkicscu4fl93wsm8madz.png)

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.