JavaScript: Destructuring obiektów

0:00W tej lekcji pokażę Ci krótko czym jest tak zwany Destructuring obiektów.

0:04Jest to funkcja języka JavaScript dostępna od

0:06standardu ES6, a więc z powodzeniem możesz z niej korzystać

0:10we wszystkich nowoczesnych przeglądarkach internetowych.

0:12Na początek utworzymy sobie jakiś obiekt

0:14person i chciałbym tutaj zawrzeć trzy właściwości firstName

0:19Jan, następnie lastName Kowalski i następnie powiedzmy age 30.

0:27I teraz na czym polega Destructuring?

0:28Wyobraź sobie, że mamy taki obiekt,

0:30takie obiekty mogą pochodzić z różnych

0:32miejsc, o czym się jeszcze przekonasz pracując z językiem JavaScript.

0:36I teraz chcemy z takiego obiektu wyciągnąć sobie jakieś dane i zapisać je w zmiennych

0:40lub stałych, bo tutaj nie ma to specjalnego znaczenia.

0:43Więc po prostu chciałbym zrobić coś takiego, że chcę mieć stałą, która się

0:46nazywa firstName i pod nią chcę mieć przypisane to co jest w

0:50person.firstName. Czyli muszę ją utworzyć i tak samo dla lastName i age musiałbym zrobić.

0:56Natomiast możemy tworząc taką stałą od razu sobie wyciągnąć z tego obiektu np.

1:01firstName. I robimy to z użyciem tak zwanego Destructuringu.

1:03Wygląda to tak, że piszemy sobie const i tutaj w takich nawiasach, które

1:08wyglądają jak obiekt, ale to jest tylko specjalny zapis,

1:11to nie jest obiekt,

1:12podajemy co chcemy z obiektu wyciągnąć. Więc mogę napisać np.

1:16firstName i następnie po tej stronie

1:18podstawić obiekt, z którego ma to być wyciągnięte.

1:21Robimy to tak.

1:23I co ważne jeżeli to zrobimy z const to teraz będziemy po prostu mieli taką stałą

1:27firstName, która przechowuje Jan i nie da się tej wartości zmienić,

1:32natomiast jeżeli chcielibyśmy, żeby to

1:33była zwykła zmienna, możemy to też zrobić z let.

1:36Natomiast to co jest ważne

1:38jeżeli bym to zrobił z let i mam teraz firstName i zmienię to na Piotr

1:42to to nie jest tak, że to się zmienia gdzieś wewnątrz tego obiektu.

1:45To zostało po prostu skopiowane na tym etapie.

1:48Czyli utworzyłem zmienną firstName, która ma w sobie to samo co person.firstName.

1:52Ale wróćmy może do tego zapisu z const i zrobimy sobie console.log(firstName).

1:57Tak jak wspomniałem, tutaj będzie po prostu Jan.

1:59A więc takim prostym zapisem możemy

2:01utworzyć stałą o nazwie firstName, która przechowuje to samo co person.firstName.

2:06Natomiast to co jest ciekawe to gdybyś

2:08chciał to nazwać inaczej, czyli zrobić coś takiego np.

2:11mieć stałą name, w której jest person.firstName

2:13to również można to zrobić przy destructuringu.

2:17Wystarczy, że tutaj podamy po dwukropku nazwę stałej jaką chcemy utworzyć.

2:23Czyli teraz jak widzisz nam podświetla, że firstName już tutaj nie istnieje, bo tak

2:27naprawdę utworzyliśmy stałą o nazwie name. I dokładnie kieruje to na Jan.

2:32OK, ja sobie jednak wrócę do tego zapisu i

2:34pokażę Ci, że tu oczywiście można po przecinku wyciągać kolejne rzeczy. Czyli

2:38możemy powiedzieć lastName i dzięki temu w tym zakresie będziemy mieli firstName

2:42i lastName, dwie takie stałe, które kierują na te wartości.

2:45Jeżeli byśmy chcieli wyciągnąć również

2:47age, też możemy to dopisać, ale nie musimy.

2:50Natomiast gdybyśmy tutaj napisali coś takiego jak np.

2:52job, to utworzymy stałą o nazwie job,

2:55która będzie miała wartość undefined z tego powodu, że gdybyśmy się odwołali do

2:59person.job to też by nam zwróciło undefined.

3:02Więc o tym pamiętaj.

3:04Jak zatem widzisz taki na pierwszy rzut

3:06oka wydaje się dziwny zapis, ale ja przyznam, że często z niego korzystam

3:10kiedy mam jakiś obiekt i chcę z niego

3:12wyciągnąć jedną lub kilka rzeczy i zapisać je sobie w stałych lub zmiennych, to robię

3:16to właśnie w ten sposób, bo ten zapis sprawia, że nasz kod jest po prostu

3:19krótszy, a jeżeli go rozumiemy, to jest również bardziej czytelny.