JavaScript: null i undefined

0:00Kolejnymi wartościami, o których sobie powiemy są null i undefined

0:04i zawarłem je w jednej lekcji, bo one są

0:05trochę podobne, ale jednak pojawiają się w innych kontekstach.

0:09Co by było, gdybyśmy sobie utworzyli zmienną firstName i zamiast przypisywać jej tutaj

0:14jakąś wartość, nie przypisali byśmy żadnej wartości?

0:17Jest to jak najbardziej poprawny kod i

0:19czasami po prostu tak robimy, że gdzieś u góry naszego programu inicjujemy sobie

0:23jakieś zmienne, a potem niżej przypisujemy do nich wartość.

0:27Moglibyśmy to zrobić w ten sposób, przypisując tutaj na przykład Jan

0:30i wszystko byłoby ok.

0:31Swoją drogą tego samego nie można zrobić ze stałą, czyli nie można stworzyć stałej,

0:35która nie ma wartości, a następnie spróbować ją przypisać dlatego, że stałe

0:39muszą od razu mieć wartość i tej wartości zmieniać się nie da.

0:43Ale jaką wartość ma zmienna, do której nic nie przypisaliśmy?

0:47Bo zauważ moglibyśmy tutaj przypisać tak zwany pusty ciąg znaków. I teraz ta zmienna

0:51przechowywała by wartość tekstową, czyli string, ale string, który jest pusty.

0:56Jeżeli to byśmy sobie wyświetlił w konsoli,

0:58czyli zapiszę i przejdziemy do przeglądarki i do konsoli.

1:01Tutaj nam się pojawiła taka wolna linijka.

1:04To jest właśnie ten pusty string, który nie ma w sobie żadnego znaku.

1:07Ale jeżeli nic nie przypiszemy do takiej

1:10zmiennej, to pytanie jaką ona przyjmuje wartość?

1:13Spróbujmy ją wypisać w konsoli.

1:15Zauważ, że zwróciło nam to wartość undefined.

1:18Czyli to jest taka wartość niezdefiniowana,

1:20ale to słowo undefined

1:22ono się może pojawić również w naszym

1:24kodzie, szczególnie później przy instrukcjach warunkowych.

1:27Co to oznacza?

1:28Że mógłbym sobie tutaj napisać undefined

1:30i tak naprawdę odwołałem się do takiej jakby globalnej stałej, ona ma taką nazwę

1:35więc my nie powinniśmy też przy okazji

1:37Ci powiem tworzyć zmiennych, którą byśmy nazwali tak samo,

1:41bo są pewne zarezerwowane słowa, z których tutaj nie powinniśmy korzystać,

1:46ale ta wartość może się pojawić po prostu literalnie w naszym kodzie.

1:49Tak jak mówię, później moglibyśmy

1:50porównywać, czy jakaś wartość jest wartością undefined itd.

1:54Nie jest to jednak tak super istotne.

1:56Ważniejsze jest to, żebyś wiedział, że jak mamy utworzoną np. zmienną, która nie ma

1:59żadnej wartości przypisanej, to ma ona wartość undefined,

2:03później to się jeszcze pojawi przy funkcjach,

2:05również o tym wspomnę.

2:07Natomiast drugą wartością, z której możemy

2:09skorzystać jako programiści jest wartość null i też przypisuje się ją w ten sposób

2:14literalnie, dokładnie w ten sposób, więc traktujemy ją jak taką globalną zmienną.

2:19Przypisujemy ją w ten sposób,

2:22no i wtedy gdybyśmy to wypisali w konsoli, to pojawi się tam po prostu null.

2:26Ale po co to null jest i skąd to się bierze?

2:29Otóż pewne operacje,

2:31może wrócimy sobie do takiego zapisu, które możemy wykonywać na przykład w

2:35przeglądarce, ale także w wielu innych miejscach,

2:37potrafią nam zwrócić taki wynik jak null

2:40i będę chciał Ci pokazać jedną z takich operacji,

2:43troszkę wybiegając w przyszłość.

2:44Mianowicie będziemy sobie mogli na stronie

2:46internetowej, w tym drzewie dokumentu, które się tutaj znajduje,

2:50wyszukiwać różnych elementów, z którymi będziemy potem pracować.

2:52I to wszystko będę omawiał w dalszych rozdziałach tego kursu.

2:56I powiedzmy, że chciałbym sobie znaleźć

2:57taki element section i z poziomu języka JavaScript w jakiś sposób nim manipulować.

3:02Ma on klasę Section, więc w przeglądarkach z poziomu języka

3:06JavaScript dostępny jest taki obiekt document,

3:09po kropce można się odwołać do jego metody

3:11querySelector i możemy tam podać selector

3:14taki CSS, który nam wyszuka jakiś element na stronie.

3:18To nam coś zwróci, więc mogę to przechwycić do stałej np.

3:21elem i to sobie na chwilkę wykomentuje a pod spodem

3:25w console.log będę chciał pokazać Ci co zostało znalezione właśnie takim zapisem.

3:31Zobacz.

3:32Pokaże nam się coś takiego i po najechaniu też mi tutaj się podświetla na stronie.

3:36To oznacza, że w jakiś sposób został znaleziony ten element.

3:39Ale co gdybym wyszukał elementu z inną klasą?

3:42Czyli podałbym tutaj element z klasą section-1

3:45powiedzmy. Takiego na stronie w drzewie dokumentu nie mam

3:48i co wtedy zwróci mi querySelector i co zostanie zapisane pod stałą.elem?

3:53Zobaczmy.

3:54Właśnie zostało zapisane null. Czyli null

3:57to jest taka wartość, która może się w różnych kontekstach pojawiać i ona nam

4:00sugeruje, że wszystko zrobiliśmy ok, ale wynik jakiegoś kodu, który wykonaliśmy,

4:05jakiejś funkcji to jest null, czyli po prostu np.

4:09coś nie zostało znalezione.

4:10Natomiast w momencie, kiedy widzimy wartość undefined, to oznacza, że

4:15prawdopodobnie odwołaliśmy się do jakiejś zmiennej, która nie została zainicjowana,

4:19albo przechwyciliśmy wartość jakiejś funkcji, która nic nie zwraca itd.

4:23Na samym początku przygody z JavaScript wiem, że to się wydaje skomplikowane

4:27i jest mi to trudno wytłumaczyć w tym momencie bardzo dobrze, póki jeszcze nie

4:31przeszliśmy do funkcji, do parametrów funkcji itd.

4:35ale chciałbym tylko, żebyś zapamiętał, że undefined reprezentuje wartość nie

4:39zdefiniowaną z jakiegoś powodu, a null jest to wartość,

4:43która została intencjonalnie gdzieś przez jakiegoś programistę zwrócona.

4:47W tym przypadku ona jest zwrócona z

4:49funkcji querySelector, kiedy na stronie czegoś nie znajdziemy.

4:52Ale my jako programiści pisząc później również swoje funkcje,

4:55są sytuacje, w których możemy zwracać jak najbardziej wartości null i ona z kolei sugeruje

5:00innym użytkownikom naszego kodu, że jeżeli jakaś nasza funkcja zwróciła null np.

5:05jakaś funkcja do wyszukiwania w bazie danych powiedzmy, to oznacza, że ktoś

5:09podał frazę zapytania, dla której nie ma żadnych wyników itd.

5:13Czyli jest to intencjonalnie zwrócona wartość.

5:15Natomiast undefined oznacza, że jakaś

5:18zmienna czy jakiś parametr funkcji, o czym później nie została zdefiniowana.