JavaScript- var, let, const- różnice

ES2015

„let” oraz „const”, to słowa kluczowe, które zostały wprowadzone do języka JavaScript dzięki nowemu standardowi ECMAScript- ES6 (został później przemianowany na ES2015). „var”, „let” oraz „const” służą do tego samego, bo dzięki nim, możemy zdefiniować zmienną. Jednak, jak to zwykle w życiu bywa, diabeł tkwi w szczegółach.

Na początek krótki przykład, który wytłumaczy nam, po co w ogóle powstały „let” i „const”.

To zmienna nie ma zasięgu blokowego?

Wydawać by się mogło, że zmienna i nie powinna już istnieć, przecież zdefiniowaliśmy ją w bloku for, a tutaj takie zaskoczenie. Może prowadzić to do wielu niebezpiecznych błędów.

Prześledźmy jeszcze jeden dziwny przykład ze zmienną „var”.

Konsola wyświetliła następujące wartości: 10, 20, 20. Mogło nas to zaskoczyć.
Na początku funkcji, zmiennej x przypisaliśmy wartość 10. Później w bloku if, deklarujemy nową zmienną o wartości 20, która tak samo się nazywa. Za blokiem if, wyświetlamy wartość i okazuje się, że ma ona wartość 20. Dzieje się tak, ponieważ zmienna inicjowana za pomocą słowa kluczowego „var” jest zmienną
o zasięgu funkcyjnym.

Hoisting

Zmienne w JavaScript podlegają zjawisku o nazwie podnoszenia czy windowania (ang. hoisting). Co to w ogóle oznacza? Najprościej wytłumaczyć to tak, że JavaScript przenosi deklaracje zmiennych zainicjowanych na początek funkcji.

Zerknijmy na następujący przykład:

Konsola wyświetli wynik 5, chociaż najpierw przypisaliśmy wartość do zmiennej,
a dopiero później ją zadeklarowaliśmy.

Windowaniu podlegają tylko deklaracje, a nie przypisanie wartości do zmiennych.

Warto podkreślić, że zmienne deklarowane za pomocą „var” czy „function” są inicjalizowane od razu i przypisaną mają wartość undefined. Za to zmienne „let”
czy „const” są inicjalizowane podczas definicji zmiennej. Dokładnie wyjaśnia to poniższy przykład:

Zmienna o zasięgu blokowym

Jeśli chcemy mieć zmienne o zasięgu blokowym, to mamy do wyboru dwa typy: „let”
oraz „const”. Dla wielu programistów jest to rozwiązanie bliższe „sercu”, niż zmienna
o zasięgu funkcyjnym.

„let”, w skrócie, to blokowy odpowiednik „var”.

„const” za to reprezentuje stałą. Podczas deklaracji zmiennej musimy od razu przypisać jej wartość, której później nie można zmienić.

Działanie

W podanym przykładzie, programu zmienia swoje zachowanie w porównaniu do wersji z „var”. W każdym bloku deklarujemy nową zmienną x, jednak nie nadpisuje ona wartości zmiennej o tej nazwie, zdefiniowanej w bloku „wyżej”.

Identyczna sytuacja będzie, gdy słowa „let”, zamienimy na „const”.

Oczywiście możemy odwoływać się do zmiennych typu „let” czy „const” w blokach zagnieżdżonych.

Na koniec ostatni przykład z zastosowania „let” oraz „var” w jednej funkcji.

Zmienna zdefiniowana za pomocą „let” przyjmuje swoją wartość, tylko w swoim bloku. Nie zakłóca przez to działania dalszego kodu.

Zastanówmy się nad odwrotną sytuacją- najpierw definiujemy x jako „let”, a w bloku if jako „var”. Takie działanie nie będzie poprawne. Dlaczego? To już zostawiam do samodzielnego zastanowienia się 🙂

Podsumowanie

Odpowiednie stosowanie „var”, „let” oraz „const” pozwoli nam uniknąć wielu błędów, które są dość trudne do odnalezienia.

Źródła:

Reklamy

6 uwag do wpisu “JavaScript- var, let, const- różnice

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