JavaScript: Tworzenie obiektów

0:00Powiedziałem Ci w lekcji poprzedniej, że w

0:02języku JavaScript wszystko, co nie jest wartością prymitywną, jest obiektem i na

0:06obiektach możemy się odwoływać do ich właściwości i metod

0:10po kropce. Natomiast bardzo często jest

0:12tak, że kiedy słyszysz w kontekście języka JavaScript, że utworzymy obiekt czy że coś

0:17jest obiektem, to chodzi tak naprawdę o tzw.

0:20literał obiektu

0:21i pokażę Ci właśnie jak on działa i na czym polega dokładnie w tej lekcji.

0:25A więc utworzymy sobie taki obiekt, który pozwoli nam zgrupować kilka właściwości.

0:30Pomyśl o obiekcie jak o czymś, co pozwala

0:32Ci jakby kilka zmiennych zawrzeć w jednej strukturze.

0:35Czyli utworzymy sobie stałą person jak osoba i utworzymy tutaj coś takiego.

0:39To jest już poprawny pusty obiekt

0:41w języku JavaScript. Możemy sobie go oczywiście

0:44rozwinąć w ten sposób, żeby to było bardziej czytelne.

0:47I teraz w środku podajemy pary, klucz wartość, oddzielone dwukropkiem.

0:52Czyli jeżeli chciałbym powiedzieć, że ta osoba ma na pierwsze imię, czyli np.

0:56firstName Jan, to zrobimy to w taki oto sposób.

1:00Czyli w środku wpisujemy tak jakby nazwę zmiennej tutaj, a po dwukropku już właśnie

1:05nie po znaku równości jak przy zmiennych czy stałych, ale po dwukropku przypisujemy

1:09wartość. I tutaj przypisałem wartość tekstową.

1:11Jan Ale co ważne tutaj możesz przypisać wszystko co można reprezentować w języku

1:16JavaScript, czyli to mógłbyś przypisać tablicę itd.

1:19Mógłbyś się również odwołać do jakiejś innej zmiennej np.

1:21name, gdyby ona gdzieś u góry była utworzona.

1:24Tak więc nie ma żadnego problemu.

1:26Po prostu tutaj należy podać jakąś wartość.

1:28I teraz jak utworzymy sobie taki obiekt, zaraz do niego jeszcze coś dodamy

1:32to mamy go zauważ pod jedną stałą. Czyli mamy taką stałą jak person.

1:36I jeżeli chcemy się odwołać do firstName to robimy to właśnie po kropce.

1:41Czyli podobnie jak Ci pokazywałem w lekcji poprzedniej, że jak mamy obiekty to po

1:45kropce można odwołać się do ich właściwości.

1:47I tutaj jest podobnie.

1:49Mimo tego, że ten obiekt jakby z samą

1:51tablicą, bo tablica też powiedziałem, że była obiektem nie ma wiele wspólnego.

1:54Jest to tzw. literał obiektu.

1:57Ale jeżeli chodzi o uzyskiwanie jego właściwości, to działa to podobnie.

2:00Czyli mógłbym zrobić console.long

2:04person.firstName i dzięki temu w konsoli wyświetlimy

2:08Jan. Dokładnie tak się stało.

2:10A gdybym chciał zmienić

2:13firstName, to też po kropce się odwołuję i zmieniam to na przykład na Jacek.

2:17W ten sposób, gdybyśmy to jeszcze raz

2:18wyświetli, oczywiście ta wartość będzie zmieniona.

2:21Tutaj w środku, co ważne, możemy sobie

2:23tworzyć klucze, bo to jest klucz, a to jest wartość również jako stringi.

2:28Czyli jeżeli chciałbyś sobie z jakiegoś powodu napisać tutaj

2:32nazwisko jako lastName, tak zrobić nie możesz, bo ten minus byłby traktowany czy

2:36ta pauza jak minus, ale tutaj w środku można to zrobić w taki sposób.

2:40Zauważ.

2:41Czyli podać to jako string i napisać Kowalski.

2:44W ten sposób jak najbardziej również można tworzyć właściwości.

2:47Zazwyczaj robi się to wtedy, kiedy one są

2:49w jakiś sposób dynamiczne, ale można to również zrobić, że tak powiem ręcznie.

2:55Tylko teraz w jakiś sposób musiałbyś się odwoływać do tego

2:58lastName. Gdybyś chciał powiedzieć console.log np.

3:01person.last-name to to będzie błąd,

3:04dlatego, że interpreter języka traktuje tą pauzę jako minus tak jak byśmy chcieli od

3:07person.last objąć name, a nie mamy takiej zmiennej jak name, więc jest to traktowane

3:13jako błąd, bo tutaj czy te spacje by były czy nie to nie ma znaczenia.

3:16Dlatego ten minus tutaj być nie może.

3:18Ale jest drugi sposób uzyskiwania dostępu do właściwości lub metod obiektów.

3:24Jest to taki zapis.

3:27Podobnie jak w przypadku tablic tylko w tablicach podawaliśmy indexy np.

3:300, 1 itd.

3:32a tutaj musimy podać wartość klucza.

3:35No i jeżeli wiemy, że tutaj przypisaliśmy

3:37last-name to musimy tutaj podać również string last-name.

3:40No i to oczywiście nie jest żadnym błędem

3:42dlatego, że w stringach możemy mieć i spacje i takie minusy itd.

3:46To nam powinno wyświetlić Kowalski. Więc

3:49jak widzisz w ten sposób też się można odwoływać, aczkolwiek dziewięć na dziesięć

3:53razy będzie to wyglądało tak, że jeżeli tu będziesz przekazywał string to Ty go nie

3:56będziesz wpisywał ręcznie, tylko będziesz go miał pod jakąś zmienną np.

4:01property i ona tam po prostu będzie przekazana.

4:04Ale warto wiedzieć, że w ten sposób

4:06również można się odwoływać. Czyli nie tylko po kropce, ale i w ten sposób.

4:09Tutaj jak robiliśmy kropkę, to też moglibyśmy się odwołać.

4:12Tak, ale to oczywiście musiałby być wtedy string.

4:16Czyli firstName zadziałało by to dokładnie tak samo.

4:19Jeśli chodzi o dodawanie nowych

4:22właściwości do takiego obiektu, to oczywiście można to zrobić po czasie.

4:26Mógłbym powiedzieć person.job, czyli np.

4:30zawód programista i jak najbardziej zostanie to dodane, albo

4:35mógłbym to zrobić za pomocą takiego zapisu i też byłoby to dokładnie to samo.

4:40Natomiast jeżeli ręcznie to przypisujemy, to zazwyczaj oczywiście będzie to po

4:44kropce i będziemy się starali robić tutaj np. notację camelCase, czyli taką jak

4:48zrobiłem tutaj bez żadnych minusów, bez żadnych spacji.

4:53No i na koniec pokażę Ci jeszcze, że

4:55możemy usuwać właściwości obiektu, czyli mamy taki operator jak delete.

5:00I napiszemy delete person.firstName i teraz wyświetlimy sobie w konsoli cały person.

5:06Zobaczmy jak to będzie wyglądać.

5:07Zauważ, że możemy go fajnie rozwinąć.

5:09Mamy tam job i lastName, ale nie ma tam

5:11już firstName, bo za pomocą operatora delete usunęliśmy taką właściwość.

5:17Jak zatem widzisz, możemy sobie tworzyć

5:18takie literały obiektów, w którym możemy po prostu pogrupować więcej właściwości.

5:23Bo to będzie ten klucz, to będzie właściwość,

5:25tutaj będzie wartość i bardzo często będziemy z czegoś takiego korzystać.

5:29Jeżeli jesteś na początku swojej drogi z programowaniem i z JavaScript, może na razie

5:33wydawać Ci się to niezbyt przydatne, ale uwierz mi, że później zobaczysz również

5:37praktyczne przykłady, a także z czasem sam będziesz sięgał po taką konstrukcję.