EcmaScript 6: Dekompozycja obiektów

0:00W tej lekcji zajmiemy się kolejną niezwykle przydatną możliwością

0:04dostępną w ES6 i z angielskiego ona nazywa się destructuring, a po

0:08polsku możemy powiedzieć, że jest to dekompozycja. W tej lekcji zajmiemy się taką

0:12pozycją obiektów, więc przejdźmy sobie od razu do kodu i chciałbym tutaj utworzyć

0:16sobie taki prosty obiekt i teraz czym jest dekompozycja. Otóż,

0:20jest to można powiedzieć wyciągnięcie odpowiednich danych z jakiejś

0:25struktury. W tym przypadku naszą strukturą będzie ten oto obiekt i chciałbym

0:29wyciągnąć te dane i zapisać je w zmiennych, bo to jest tutaj istotne i co ciekawe

0:33wiele języków programowania już wcześniej posiadało taką możliwość, a

0:37w JavaScripcie nie było możliwości takiego destructuringu w łatwy sposób, więc

0:42teraz gdybym chciał utworzyć trzy zmienne, które zawierałyby by w sobie firstName, lastName

0:46i age, to jak musiałbym to zrobić, można powiedzieć ręcznie, za

0:50pomocą var, czy let tutaj nie ma to znaczenia, ale musiałbym utworzyć zmienną firstName

0:54i napisać person firstName. Teraz musiałbym utworzyć pod

0:58spodem kolejną zmienną lastName i odwołać się do person

1:02lastName. No i tak dalej i zmienną age, byłoby to

1:06person, age. Sporo pisania, tylko po to, żeby z takiego obiektu wyciągnąć

1:11sobie wszystkie dane. Zakładamy, że ten obiekt przyszedł do nas

1:15w formie na przykład jakiegoś jsona z internetu, pobralibyśmy

1:19sobie to Ajaxem, zostałoby to zamienione na obiekt. Więc powiedzmy mam go po prostu w

1:23jakiejś zmiennej i chciałbym w tym zakresie, w którym jestem wyciągnąć

1:27z niego jakieś dane, niekoniecznie wszystkie i utworzyć na ich podstawie zmienne, tak

1:31musiałbym to zrobić do tej pory w języku JavaScript. Teraz jednak

1:35możemy zrobić łatwiej wykomentuje sobie wszystko co było w tym miejscu, chociaż może zróbmy

1:39sobie tego console.log, bo zaraz nam to będzie potrzebne, lastName i age. No

1:45i w konsoli będzie to wyglądać następująco i teraz sobie to dopiero wykomentuje,

1:49co sprawiłoby, że mielibyśmy błąd, więc to też wykomentuje i pomiędzy

1:53tym pokażę ci jak skorzystać z destructuring'u obiektów. Napiszemy

1:57sobie let i postawię taki oto obiekt. No i od razu wydawałoby się, że

2:01nie jest to poprawne, bo tutaj powinna być nazwa zmiennej, a nie obiekt. Taki

2:05obiekt może się znaleźć przecież dopiero po tej stronie przypisania. Jednak wystarczy

2:09w destructuring'u może tak być, ale nie może być tutaj pusty, więc w tym obiekcie,

2:14czy postawimy spację czy nie, nie ma to znaczenia, więc można je postawić. Napiszę

2:18sobie firstName, lastName i age. Jakkolwiek

2:22dziwnie to wygląda, po tej stronie musimy podać obiekt, z którego to zostanie wyciągnięte,

2:26więc napiszę person i teraz sobie odkomentujemy console.log i

2:30zobaczymy, że mamy poprawne wartości, czyli co tutaj się

2:34stało. Otóż utworzyliśmy sobie trzy zmienne, dokładnie tak samo jak byśmy je

2:38utworzyli za pomocą let, tutaj wyżej i pod tymi zmiennymi będzie

2:42się znajdować dokładnie to samo co wcześniej, czyli pisząc coś takiego wyciągamy

2:46sobie z tego obiektu, który podamy po tej stronie. Dokładnie firstName, lastName czy

2:50age. Gdybym chciał wyciągnąć sobie tylko firstName, to tutaj korzystając

2:55z tego oczywiście pojawi się błąd, że lastName nie jest zdefiniowane, aczkolwiek widzisz,

2:59że możemy to zrobić. Jeżeli chcesz wyciągnąć sobie wszystkie te trzy rzeczy, to

3:03pisze to w taki sposób. Generalnie, jeżeli korzystamy z destructuring'u obiektów,

3:08to będziemy pisać coś, co wygląda jak obiekt, a kiedy będziemy w

3:12kolejnej lekcji korzystać z destructuring'u tablic, to tutaj będzie taki tablicowy

3:16zapis. Można zatem powiedzieć, że tutaj po tej lewej stronie przypisania, tworzymy

3:20coś co wygląda jak wzór, na podstawie, którego chcemy rozłożyć obiekt

3:24podany w tym miejscu. Jest tutaj jedna bardzo ważna uwaga, otóż

3:28jeżeli coś, co mamy po prawej stronie będzie ewoluowało do undefined albo

3:32null to będziemy mieli problem i kiedy tak by się mogło stać. Wyobraź sobie, że

3:36mamy jakąś funkcję o nazwie getData i że

3:41ona by nam zwracała teoretycznie jakiś obiekt, ale powiedzmy, że szukałoby

3:45go w bazie danych i jeśli czegoś by nie było, to zwraca nam na przykład null albo

3:49jeżeli nic nie zwrócę jest to undefined i w tym miejscu przecież oczywiście, że mogę podstawić wywołanie

3:54funkcji getData, bo to oznacza, że tutaj przypisze to, co ona zwróci i zobacz

3:58co się stanie jeżeli ona zwróci null. Będziemy mieli błąd, z tego powodu, że

4:02destructuring próbuje z tego co zostało zwrócone wyciągnąć sobie właściwości

4:07firstName, lastName i age, dlatego ważne jest tutaj, aby zawsze podawać również

4:11domyślny jakiś obiekt. W przypadku destructuring'u obiektów. Jeżeli nie

4:15mamy stuprocentowej pewności, że getData zwróci chociażby pusty obiekt, zauważ,

4:20że wtedy nie byłoby problemu. Zmienne po prostu mają wartość undefined i to też jest

4:24ważne. Gdybym tutaj zwrócił znowu

4:28null, a w tym miejscu napisał person i chciał z niego wyciągnąć jeszcze coś

4:32czego tutaj nie mieliśmy, firstName, lastName i age gdybym chciał wyciągnąć na przykład

4:36job, to pytanie, co będzie pod job. Będzie

4:41tam po prostu undefined i nie będzie żadnego błędu. Natomiast wracając jeszcze do

4:45tego, co mamy tutaj jeżeli nie mamy pewności, że funkcja, którą tutaj wywołujemy na

4:50100% zwróci nam jakiś przynajmniej pusty obiekt, to możemy skorzystać z takiego operatora

4:54i postawi tutaj pusty obiekt. Wiesz, że jeżeli tutaj zostanie zwrócona wartość

4:59fałszywa, na przykład null, to ten operator przejdzie na swoją prawą stronę i to

5:03co jest tutaj podstawie w to miejsce i dopiero wtedy jakby wracamy tutaj i destructuring

5:07ma miejsce próbując z to z putego obiektu wyciągnąć te właściwości, a że ich tam nie

5:11ma to zmienne będą miały wartościami undefined, ale przynajmniej nie będzie błędu. Zobaczmy

5:17czy tak rzeczywiście się stanie i jak widzisz mamy teraz, że job jest niezdefiniowane

5:21jeszcze to usuniemy. No i nie mamy błędu. Mamy trzy razy undefied pod każdą

5:25z tych zmiennych. Pamiętaj, że te zmienne zachowują się

5:29dokładnie tak samo jakbyś je utworzył z użyciem let. Możesz tutaj napisać var i

5:33możesz tutaj napisać const. To się tyczy wszystkich tych zmiennych, które się tutaj

5:37pojawiają. Teraz kolejna rzecz. Co by było gdybyś chciał utworzyć

5:41zmienną o innej nazwie, czyli tutaj wyciągaliśmy sobie person firstName i

5:45gdybym chciał nazwać zmienną fName. Wiesz, że normalnie zrobimy to w ten sposób. Pytanie

5:50czy przy deststructuring'u można to zrobić. Odpowiedź jest taka, że można i robi

5:54się to w ten sposób, że tutaj po dwukropku podajemy sobie nazwę zmiennej jaka

5:58zostanie utworzona i znowu to wygląda dziwnie, bo jakby odwrotnie

6:02zupełnie, jeżeli tworzymy obiekt to nazwa właściwości jest po lewej

6:06stronie, a wartość po prawej, a tutaj jest jakby troszeczkę na odwrót. Natomiast

6:10po prostu trzeba się tego nauczyć, przyzwyczaić do tego i teraz gdy generalnie

6:14zadziała to tak, że zmienna firstName nie będzie istnieć. Będziemy mieli błąd, że nie została

6:19zdefiniowana, ale istnieje teraz fName, czyli jeżeli chcesz wyciągnąć

6:23z obiektu właściwości firstName to piszesz ją tutaj i jeżeli chcesz utworzyć

6:27lokalną zmienną z użyciem let, która tę wartość będzie przechowywać to stawiasz

6:32ją w tym miejscu. Jeżeli natomiast nie chcesz zmieniać nazwy, to wystarczy, że pozostawisz

6:36firstName. Nie musisz pisać firstName równa się firstName, ale to jest dokładnie to samo,

6:40czyli tutaj wygląda to podobnie jak w tym skróconym zapisie obiektów, które ci

6:44już pokazywałem. Jeżeli właściwości miałyby się tutaj powtarzać czy

6:48te nazwy, to nie musisz pisać ich po dwukropku. Natomiast, jeżeli chcesz nazwać

6:52zmienną lokalną tutaj inaczej, to musimy napisać fName. Zobaczymy

6:56teraz. Nie ma błędu, wszystko jest okej. Natomiast tutaj getData. Zróbmy

7:01sobie po prostu person. No i zobaczysz, że pod fName

7:05rzeczywiście znalazło się Jan, czyli w ten sposób możesz sobie wyciągnąć tylko to,

7:09co interesuje cię z danego obiektu i zmienne możesz nazwać inaczej niż właściwości,

7:13które znajdują się w takim obiekcie. Jeszcze jedną

7:17ciekawostkę jest to, że zmienne mogą być utworzone wcześniej, czyli wyobraź sobie,

7:21że tutaj byśmy wcześnie utworzyli zmienną firstName albo

7:26w tym przypadku zróbmy fName, lastName i age. Mamy

7:31je utworzone wcześniej i pytanie czy wtedy można skorzystać z destructuring'u. Okazuje

7:35się, że tak. Musimy sobie wziąć taki zapis i nie korzystać na początku ze

7:39słowa let. Natomiast tutaj pojawi się problem, będzie mieli błąd.

7:43Zaraz zobaczysz dlaczego unexpected token, znak równości,

7:47z tego powodu, że taki blok jest traktowany przez interpreter jakbyśmy utworzyli

7:51sobie nowy blok kodu. Żeby zatem ten interpreter wiedział, że

7:56tak naprawdę chodzi nam o destructuring, to w przypadku obiektów musimy to

8:00wyrażenie opleść sobie w tak takie nawiasy okrągłe i w

8:04tym momencie nie będzie już błędu, jak widzisz Jan Kowalski 49, czyli

8:08gdybyś miał wcześniej zadeklarowane już zmienne, a później chciał do nich

8:12przypisać wartość właśnie wybraną z jakiegoś obiektu, możesz to również

8:16zrobić w taki sposób. No i w tej lekcji to już będzie wszystko, mam nadzieję, że dobrze

8:20zrozumiałeś i że widzisz jak działa destructuring. Generalnie będzie to bardzo przydatne

8:24na przykład, kiedy będziemy mieli jakieś obiekty utworzone z pobranego json'a,

8:28czyli z danych typu json i wtedy będziemy chcieli z nich coś wyciągnąć i zapisać

8:32sobie w lokalnych zmiennych, natomiast destructuring może być jeszcze dużo bardziej zaawansowany,

8:37o czym przekonasz się w kolejnych lekcjach, ale najpierw zerkniemy na to, w jaki

8:41sposób możemy wykonywać podobną operację na tablicach.