JavaScript: Zakres zmiennych

0:00W tej lekcji poruszymy bardzo ważny temat

0:02dla języka JavaScript, mianowicie jak działa zakres zmiennych.

0:06I teraz do tej pory my sobie tworzyliśmy w tym

0:08pliku JavaScript jakieś zmienne czy jakieś funkcje i one były widoczne

0:12tutaj w konsoli. Mieliśmy do nich odwołanie.

0:14Generalnie nie jest to dobrą praktyką, ale nie chciałem tutaj niepotrzebnie śmiecić

0:18w naszym kodzie, żeby dodawać jakieś dodatkowe funkcje.

0:22Niemniej jednak jak będziemy pracować w trochę nowocześniejszy sposób z językiem

0:25JavaScript, czyli z użyciem tak zwanych bundlerów kodu, o których jeszcze Ci powiem

0:29w tym kursie, to one tak czy siak te nasze wszystkie zmienne będą opakowywać w taki

0:33sposób funkcje, że nie będzie to przeciekać do tego globalnego zakresu.

0:37Dlaczego nie jest dobrze, jeżeli np.

0:39utworzymy sobie jakąś zmienną, powiedzmy firstName

0:43Piotr,

0:46że ona jest widoczna tutaj, no z tego powodu,

0:48że z dowolnego innego kodu ktoś będzie mógł się do niej odwołać albo ją

0:51zmodyfikować, gdyby była utworzona z let.

0:53A na stronie czasami jest tak, że mamy sporo tych różnych skryptów podpiętych i

0:57ktoś w swoim skrypcie mógł tak samo nazwać jakąś zmienną jak my

1:00itd.

1:00Więc generalnie dobrze, żeby zakres zmiennych ograniczać.

1:03I w języku JavaScript są w zasadzie dwa sposoby na ograniczenie zakresu zmiennych.

1:07Pierwszym z nich jest funkcja.

1:09Czyli gdybyśmy sobie utworzyli tutaj funkcję init, to ta funkcja będzie globalna.

1:13Ona będzie wszędzie dostępna, ale wszystko

1:15co utworzę wewnątrz już nie będzie dostępne na zewnątrz.

1:18Więc jak sobie tutaj utworzę firstName

1:21równa się Piotr i mam sobie taką oto funkcję, to nigdzie tutaj do tego firstName

1:25nie mogę się odwołać. Jedynie do funkcji init. Ale nawet jak ją wywołam to nadal do

1:30tego firstName nie mam dostępu, bo taki blok kodu funkcji tworzy nam nowy zakres zmiennych.

1:35Czyli można powiedzieć, że tu jest jeden

1:37zakres, a ponad nim jest ten globalny zakres. I tych zakresów może być więcej, bo

1:42jeżeli wewnątrz jednej funkcji utworzę inną np.

1:45sayHello, jak najbardziej możemy to zrobić

1:48i tutaj sobie powiem lastName równa się Kowalski

1:52to teraz wewnątrz tego zakresu, tej wyższej funkcji nie mam dostępu do lastName.

1:56Ale wewnątrz funkcji sayHello mam dostęp i do lastName i do firstName.

2:01Dlatego, że w każdej z tych funkcji mamy dostęp do wszystkich zmiennych i także

2:05funkcji, które są utworzone we wszystkich wyższych zakresach. Czyli w tym zakresie

2:09jak jest firstName to w tej funkcji też to będzie dostępne oraz wszystko inne, co

2:12jest globalne, takie jak na przykład window.

2:15No i teraz zauważ możemy z tej funkcji sobie zrobić console.log,

2:18np. taką interpolację tutaj sobie zrobimy

2:23i będzie tam firstName z tego górnego zakresu i lastName z naszego zakresu.

2:28Tylko teraz tę funkcję trzeba wywołać, więc wywołajmy ją tutaj

2:31sayHello to jeszcze nic nie da, bo jej wywołanie jest w funkcji init, więc musimy

2:35jeszcze wywołać funkcję init jak initialize.

2:38I zobacz teraz jak najbardziej nam to będzie działać.

2:41Mamy Piotr Kowalski.

2:43Kolejnym tematem, o którym powiem jest przesłanianie zmiennych.

2:46Działa to w ten sposób, że skoro tutaj

2:48odwołaliśmy się do firstName i w zakresie tej funkcji nie ma firstName, to zostało

2:53to wyszukane w innym zakresie, ale mógłbym sobie tutaj powiedzieć const fastName

2:57równa się Maciej i wtedy nie ma żadnego błędu.

3:01Jak się odwołujemy do firstName to weźmiemy to z tego zakresu.

3:05Zobacz, teraz zobaczymy tutaj Maciej Kowalski i nie ma żadnego błędu.

3:08Natomiast gdybym tutaj chciał jeszcze raz zrobić firstName, na przykład Maciej

3:12to otrzymamy błąd, że próbujemy nadpisać stałą, która już istnieje. A w innym

3:17zakresie jak widzisz tego problemu już nie ma.

3:19Skoro funkcja init ograniczyła nam wszystko co jest wewnątrz do tego zakresu,

3:23to znaczy, że tutaj na zewnątrz też nie możemy się odwołać do funkcji sayHello.

3:27Gdybyś chciał sprawić, że jakaś funkcja

3:29jest globalna, to możesz ją przypisać do globalnego obiektu jakim jest window np.

3:33window.sayHello równa się sayHello.

3:36Albo mógłbyś tutaj podać inną nazwę np.

3:38window.hello równa się sayHello,

3:41wtedy będziemy mogli globalnie się odwołać do hello

3:44i to jest dokładnie to samo,

3:46albo do window hello, też to będzie to

3:48samo. Ale zazwyczaj robimy tak, że sobie to w ten sam sposób nazywamy.

3:52Ale zauważ jedną ciekawą rzecz. Odwołaliśmy się do tej funkcji sayHello z poziomu

3:56globalnego, bo jest teraz przypisana do obiektu window i ona cały czas ma dostęp

4:01do Maciej Kowalski czyli do tych wszystkich wartości w miejscu, w którym

4:05została zdefiniowana. A mimo tego, że odwołujemy się do niej tutaj, można

4:08powiedzieć na zewnątrz. Więc również o tym

4:10warto wiedzieć, że funkcje, nieważne gdzie są wywołane, one widzą i pamiętają zakres

4:16zmiennych z miejsca, w którym zostały zdefiniowane.

4:20Wspomniałem, że mamy dwa sposoby na ograniczenie zakresu.

4:23Pierwszy jest to stworzenie nowej funkcji, a drugi jest to stworzenie bloku.

4:27Czyli na przykład jak mamy instrukcję warunkową if i tutaj zrobię true tylko po to,

4:32żeby ona się zawsze wykonała, to jak w niej sobie utworzę jakąś zmienną np.

4:35number równa się 10, to w całym tym bloku kodu tutaj pomiędzy

4:39tymi nawiasami mam do niej dostęp, ale jakbym chciał zrobić console.log number

4:43poza takim blokiem to otrzymamy błąd number is not defined.

4:47Czyli taki blok również ograniczył nam zakres zmiennych, ale tylko wtedy kiedy są

4:51one tworzone w ten nowszy sposób, czyli z użyciem let lub const.

4:55A gdybyś wykorzystał stary JavaScript zapis taki jak var, to wtedy już nie

4:59będzie to ograniczone i dostęp do tego 10 uzyskamy. Z tego również powodu

5:03nie jest dobrą praktyką korzystanie dzisiaj ze słowa kluczowego var.

5:08Na sam koniec pokażę Ci jeszcze jeden sposób.

5:10Jeżeli nie chcesz tworzyć nazwanej funkcji init i później ją wywoływać, to jest jeden

5:14ciekawy sposób jak sobie w pliku JavaScript stworzyć nowy zakres zmiennych właśnie po

5:18to, żeby wszystko co tworzymy nie przeciekało

5:20tutaj do tego globalnego zakresu, a co za tym idzie nie było też dostępne w innych

5:24skryptach, gdyby ktoś tutaj miał jakiś inny skrypt,

5:26nie chcemy, żeby ten skrypt miał dostęp do

5:28naszych zmiennych, to możemy zamiast takich funkcji init utworzyć funkcję anonimową

5:34a tą funkcję init może ja po prostu wykomentuje, ale najpierw sobie skopiuję

5:39wszystko co było wewnątrz, teraz ją wykomentuje.

5:42Zobacz, utworzyłem funkcję anonimową i wszystko do niej wstawiłem.

5:45Czyli ona nie ma żadnej nazwy,

5:46a więc ta nazwa taka jak init nie będzie się pojawiać w globalnym zakresie.

5:50Ale teraz jak tę funkcję wywołać?

5:52Okazuje się, że wystarczy ją opleść w takie nawiasy.

5:55Wtedy będzie to traktowane jak takie wyrażenie.

5:58I skoro to nam zwraca taką funkcję, to możemy ją takimi nawiasami wywołać.

6:02I to nazywa się self in working anonymous

6:04function, czyli samo wywołująca się funkcja anonimowa.

6:08W ten sposób jest ona tworzona i od razu jest wywoływana.

6:11Dzięki temu cały nasz kod się wykona, ale

6:13żadne z tych zmiennych nie przeciętną do globalnego zakresu.

6:17Oczywiście oprócz tych, które celowo np.

6:19do obiektu window przypisaliśmy.

6:21No i dodatkowo skoro ta funkcja nie ma

6:22nazwy, to nie zaśmiecamy globalnego zakresu żadną nazwą.

6:26Zauważ, że efekt będzie teraz dokładnie

6:28taki sam, włącznie z tym błędem, który znajduje się tutaj.

6:32To zatem tyle, jeśli chodzi o zakres zmiennych.

6:34Pamiętaj, że każda funkcja ma swój własny zakres zmiennych, ale jeżeli tam się

6:38odwołamy do czegoś, co nie istnieje w tym zakresie, jest to wyszukiwane w wyższym

6:42zakresie i wyższym aż do globalnego zakresu na obiekcie window.