JavaScript- var, let, const- różnice część 2

W swoim ostatnim wpisie na temat zmiennych w JavaScript, nie poruszyłem ich zachowania się jako zmienne globalne. W tym wpisie nadrobię te zaległości.

Zmienna globalna

Zmienną globalną w JavaScript możemy zdefiniować na kilka różnych sposobów:

Jak widać trochę tego jest i niestety (a może stety) zachowują się one różnie.

Pierwsza technika pozwala stworzyć zmienną globalną, która jest właściwością
w globalnym obiekcie. A co to takiego? W skrócie jest to zmienna, która zawsze istnieje. W przeglądarkach możemy uzyskać do niej dostęp poprzez zmienną „window”.

Sposób czwarty, piąty i szósty, również tworzą zmienną globalną, która jest właściwością w globalnym obiekcie. Trzeba jedynie uważać na szósty sposób, który nie będzie działał w „strict mode”.

Jak już pewnie się domyślacie, drugi i trzeci sposób również tworzą zmienne globalne, ale nie są dostępne w globalnym obiekcie. Te dwie metody tworzenia zmiennych globalnych, zostały wprowadzone w standardzie ES2015.

Po teorii czas na praktykę:

Na początku odczytujemy wartości ze zmiennych globalnych i udaje się to za każdym razem. Następnie próbujemy to samo powtórzyć, jednak poprzez globalny obiekt (którym jest zmienna „window”) i dla zmiennych typu „let” oraz „const” to się nie udaje.

Zachowanie zmiennych globalnych

Czas pokazać jak zachowują się różnego rodzaje zmienne globalne w funkcjach.

var

Na pierwszy ogień idzie zmienna typu „var”.

W pierwszej funkcji, próbujemy odczytać wartość ze zmiennej globalnej. Jednak
w dalszej części kodu mamy definicję zmiennej o takiej samej nazwie. Z poprzedniego wpisu wiemy, że JavaScript „wyniesie” definicję tej zmiennej na początek funkcji,
więc „przykryje” ona zmienną globalną. Jednak mamy nadal dostęp do zmiennej globalnej za pomocą obiektu globalnego „window”.

W drugiej funkcji, tworzymy zmienną, ale o innej nazwie i nie będzie ona kolidowała ze zmienną globalną. Dzięki czemu mamy dostęp do zmiennej globalnej i możemy ja dowolnie zmieniać.

let

Podobny przykład co wyżej, jednak teraz definiujemy zmienną globalną za pomocą „let”. W metodzie mamy również definicję zmiennej o takiej samej nazwie co zmienna globalna, przez co zmienna lokalna „przykrywa” zmienną globalną. Próba odczytania wartości zmiennej kończy się niepowodzeniem, ponieważ nie możemy odczytywać zmiennych „let” i „const” przed ich inicjalizacją. Również do zmiennej globalnej nie mamy dostępu poprzez globalny obiekt.

const

Podobne działanie jak w przykładzie z „let”.

W pierwszej funkcji, definicja zmiennej o takiej samej nazwie przysłania zmienną globalną, ale również ochrania nas przed błędem, którym jest próba zmiany wartości zmiennej typu „const”. Doskonale widać to w drugiej funkcji, gdzie taka próba kończy się błędem.

Podsumowanie

Jak widać język JavaScript niesie ze sobą wiele pułapek, w które łatwo można wpaść
i mogą spowodować wiele problemów. Jest to język mający tyle niuansów, że warto go dogłębnie poznać i wykorzystywać jego możliwości.

 

Reklamy

Skomentuj

Wprowadź swoje dane lub kliknij jedną z tych ikon, aby się zalogować:

Logo WordPress.com

Komentujesz korzystając z konta WordPress.com. Wyloguj /  Zmień )

Zdjęcie na Google+

Komentujesz korzystając z konta Google+. Wyloguj /  Zmień )

Zdjęcie z Twittera

Komentujesz korzystając z konta Twitter. Wyloguj /  Zmień )

Zdjęcie na Facebooku

Komentujesz korzystając z konta Facebook. Wyloguj /  Zmień )

Connecting to %s