Destrukturisanje u JavaScriptu - tvoj dobar drugar

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