EcmaScript 6: Słowo var i tzw. hoisting

0:00W tej lekcji pozostajemy jeszcze w tematyce EcmaScript 5 dlatego,

0:04że będę chciał ci pokazać w jaki sposób działają zmienne utworzone

0:08ze słowem kluczowym var oraz czym jest tak zwany hoisting. Jeżeli jeszcze tego

0:12nie wiedziałeś lub być może zapomniałaś sobie o takim działaniu, to będę chciał ci to przypomnieć,

0:16bo będzie to bardzo ważne w kontekście kolejnych lekcji, gdzie będziemy

0:20już rozmawiać o nowych rzeczach w EcmaScript 6, więc w tej lekcji jeszcze ES5.

0:25Mam taką prostą stronę tutaj przygotowaną w zasadzie na niej nic

0:29nie będzie oprócz naszego skryptu, którego podglądamy tutaj. Przypominam, że w razie czego

0:34możesz sobie to ukrywać i pokazywać, jeżeli te skrypty będą dłuższe i przejdziemy sobie

0:38do skryptu. Zauważ, że ja tutaj utworzyłem taką funkcję anonimową,

0:42aby ona nam ograniczała zakres zmiennych, czyli jeżeli utworze sobie standardowo

0:46ze słowem kluczowym var jakąś zmienną, na przykład firstName i napiszemy

0:51tutaj Jan, to ona jest widoczna wyłącznie w tej funkcji i ważne

0:55jest tutaj to, aby zapamiętać, że zmienne jeszcze EcmaScript 5

1:00mogą być ograniczone wyłącznie funkcją, czyli zakres zmiennych jest stworzony

1:04dla każdej nowej funkcji i wyłącznie funkcja może utworzyć nowy zakres zmiennych. Na

1:09przykład blok kodu, taki jak  if, jeżeli tutaj utworze zmienną, ona

1:13będzie widoczna również poza tym blokiem kodu. Tak więc, to jest istotne, że funkcja

1:17ogranicza i tworzy nowy zakres zmiennych. Utworzyłem sobie zatem

1:21zmienną słowem kluczowym var, czyli to co znamy do tej pory ES5. Natomiast,

1:26co by się stało, gdybym chciał skorzystać z tej zmiennej, zanim ona została utworzona. Napiszę

1:31tutaj console.log firstName, zapisze, przejdziemy do przeglądarki, która automatycznie

1:35się odświeżyła i otworzę konsolę i w konsoli możemy zobaczyć wartość undefined. To

1:41oznacza, że nie mamy żadnego błędu, ale zmienna firstName w tym

1:45miejscu miała wartość undefined. Natomiast identyczny console.log poniżej sprawi,

1:49że będziemy mieli już wartość Jan. Dlaczego tak się dzieje? Otóż dokładnie

1:54z tego powodu, że tutaj ma miejsce zjawisko tak zwanego hoistingu,

1:58czyli wynoszenia deklaracji zmiennych na samą górę danego zakresu,

2:02czyli w tym przypadku nowym zakresem jest ta funkcja, czyli

2:06na samą górę można powiedzieć, że w to miejsce jest wynoszona taka zmienna,

2:10czyli interpreter JavaScript'u, w tym przypadku, jeżeli to byśmy sobie usunęli,

2:14zachowuje się w taki sposób jak byśmy napisali var firstName. Wiem,

2:19że taka zmienna miałaby wartość undefined, a później jak byśmy ją nadpisali

2:23i w zasadzie ten console.log może tutaj zostać. Czyli to, co mieliśmy przed

2:27momentem, dla interpretera wygląda w ten sposób. Dlatego tutaj nie ma błędu.

2:31Możemy skorzystać ze zmiennej firstName, ale ma ona wartość undefined. Zauważ,

2:36że efekt jest dokładnie taki sam. Czyli zmienne są zawsze wynoszone na samą górę zakresu,

2:41niezależnie od tego, gdzie zostały w tym zakresie utworzone. Dopiero później

2:45jednak przypisywane są do nich wartości. Wróćmy sobie zatem

2:49do takiego zapisu, no i będzie to działać dokładnie tak samo. Ważne

2:54jest, żeby wiedzieć, że funkcje również są hoistowane, czyli wynoszone na górę. Dlatego

2:59gdybym utworzył taką zmienną getLastName i ona

3:03by zwracała jakieś nazwisko, na przykład Kowalski, to

3:08mogę z niej skorzystać już w tym miejscu, czyli gdybym sobie to wyciął i chciał tutaj

3:14skorzystać z firstName. Wiemy, że jest to możliwe i do tego sobie po prostu dodać spację

3:18oraz to co zwróci funkcja getLastName, to okaże się, że

3:22wszystko jest w porządku, czyli to działa, a więc funkcje nie tylko są wynoszone

3:26na samą górę zakresu, ale również od razu można z nich korzystać, czyli to jest

3:30pewnego rodzaju różnica. Zmienne są wynoszone, ale mają wartość undefined. Funkcje

3:35są wynoszone i działają poprawnie. Teraz chciałbym ci pokazać

3:39jeszcze jedną rzecz, o której być może nie wiedziałeś. Gdybyśmy utworzyli blok if i

3:43tutaj byłby jakiś warunek, ale ja na sztywno wpiszę tutaj true i w

3:47tym bloku chciałbym utworzyć zmienną, na przykład, lastName Kowalski, to

3:52pewnie nie będzie dla ciebie niespodzianką, że tutaj możemy skorzystać z lastName. Jest

3:57to normalne, dlatego właśnie wspominałem o tym, że tylko funkcje mogą tworzyć

4:01nowe zakres zmiennych. Taki blok kodu tego za nas nie zrobi, więc spróbujmy

4:05sobie to wyświetlić i widzimy, że pojawiła nam się wartość Kowalski. Natomiast co

4:10by się stało gdybyśmy tutaj mieli warunek nieprawdziwy, czyli if false. Wiemy,

4:14że cały ten blok w ogóle nie powinien się wykonać, czyli taka zmiana nie powinno zostać

4:18utworzona. Co zatem będzie pod lastName? Czy będzie to błąd? Zapiszmy

4:22i zobaczymy. Okazuje się, że jest tutaj wartość undefined, ale gdybyśmy

4:26w ogóle nie mieli tego bloku czy w zasadzie tej instrukcji, to będziemy mieli

4:30błąd, że lastName nie jest zdefiniowane. Znowu tutaj widzimy to zjawisko

4:34hoistingu, o którym wspomniałem, które działa w tak w przewrotny sposób, że nawet jeżeli

4:39tutaj mamy wartość false i przeglądarka czy w zasadzie interpreter

4:43javaScript'u nawet z góry by wiedział, że tutaj jest na sztywno wpisane false, czego się nie da zmienić. Tak

4:48czy siak, utworze taką zmienną, wyniesie ją na samą górę i przypisze jej wartość

4:52undefined. Po prostu nigdy nie zmienimy tej wartości na Kowalski, ale

4:56również nie pojawi się tutaj błąd z tego tytułu, że taka zmienna jest niezdefiniowana.

5:00Zobaczmy raz jeszcze wartość undefined. No

5:04i ostatnia rzecz w tej lekcji, którą chciałbym ci pokazać lub być może przypomnieć jest taka, że

5:09jeżeli utworzymy sobie zmienną globalną, nieograniczoną żadnym innym zakresem, czyli

5:13tutaj mamy jakieś zakres, ale poza tym zakresem w tym skrypcie jeżeli utworze jakąś zmienną,

5:17na przykład firstName i przypisze jej wartości Jan.

5:21Może na razie ją wykomentuję, żeby ci pokazać, że nie mogę

5:25tutaj wpisać firstName. Nie ma takiej zmiennej, mam błąd. A jeżeli ją utworzę poza

5:29tym blokiem to ona będzie globalna, to znaczy, że mogę teraz się tutaj do niej odwołać. Tutaj

5:35również nie jest to nic nadzwyczajnego, ale ważne jest to, że jeżeli zmienna została utworzona w

5:39globalnym zakresie, to zostaje dodana jako właściwość obiektu globalnego.

5:43W przypadku przeglądarki obiektem globalnym takim nadrzędnym jest window, więc

5:47jeżeli napisze window firstName, to okazuje się, że mamy tę samą wartość, czyli

5:51napisanie w globalnym zakresie var first name, to tak samo jak byśmy napisali

5:56window firstName i przypisali tutaj wartość Jan.Jest

6:00to rzecz niezwykle ważna do zapamiętania w przypadku korzystania ze słowa

6:04kluczowego var. No właśnie w EcmaScript5 . Ono w EcmaScript 6

6:08nadal jest dostępne i nadal działa tak samo. Natomiast pojawiły się dwa nowe

6:12słowa, które pomogą nam tworzyć zmienne i stałe i o nich porozmawiamy sobie

6:16w kolejnych lekcjach.