Różnice pomiędzy const, let, var

Wraz z nadejściem EcmaScript 6 prawdopodobnie spotkałeś się z „nowymi” modyfikatorami przypisania zmiennej const i let. Co prawda, są one dostępne już od jakiegoś czasu 😅. Dodatkowo wspomnimy jescze o wcześniej używanym var który był wykorzystywany we wcześniejszych wersjach EcmaScript. Wszystkie trzy służą do tego samego, lecz każde z nich używamy w ściśle określonym przypadku.

Nasuwa się pytanie skoro wszystkie służą do tego samego to po co aż trzy? Otóż chodzi o różnice zasięgu, w którym są widoczne.

#var

Wcześniej, gdy nie mieliśmy dostępnej bardziej wyszukanej składni w EcmaScript 5, do deklarowania zmiennej służył nam modyfikator var. Posiadał on zasięg globalny, przez co był widoczny w całym kodzie. Oczywiście, jest on dalej dostępny i jeżeli chcesz możesz dalej go używać.

var zmienna = 'wartość';
if(true) { var zmienna = 'Zmiana wartości' };
var zmiennaFunkcji = function () { 
    var zmienna = 'Zmiana wartości w funkcji'
}
zmiennaFunkcji();
console.log(zmienna); // 'Zmiana wartości';

Niestety jego luźny charakter, może prowadzić do pewnego rodzaju problemu, w sytuacji kiedy nie do końca wiesz, jak może się zachować w specyficznych sytuacjach.

Zapytasz skoro var nie jest problematyczny, to po co zostały dodane pozostałe modyfikatory ?

Odnośnie samego var w jego stosowaniu nie ma nic złego, ale jest parę haczyków przy jego stosowaniu.

Brak zakresu blokowego

Zmienne zadeklarowane przy pomocy słowa var posiadają zakres funkcyjny. Co wydaje się logiczne. Zmienna nie będzie dostępna poza funkcją w której ją zadeklarowaliśmy.

var zmiennaFunkcji = function () { 
    var zmienna = 'Ponowna zmiana wartości'
}
zmiennaFunkcji();
console.log(zmienna); // RefferenceError

Nie mają jednak zasięgu blokowego. To jest sytuacja, w której sprawy mogą się zbytnio skomplikować 😕 Możesz ponownie przypisać zmienne w bloku kodu, nadpisując przypisania do tej samej nazwy zmiennej.

var zmienna = 'wartość';
if(true) var zmienna = 'zmień wartość';
console.log(zmienna); // zmień wartość

Natomiast jeżeli wykonamy to samo za pomocą funkcji nie zmieni to wartości zmiennej.

var zmienna = 'wartość';
var zmiennaFunkcji = function () { 
    var zmienna = 'zmień wartość'
}
zmiennaFunkcji();
console.log(zmienna); // wartość

Hoisting

Dla tych, którzy nie mieli styczności z definicją hoistingu, krótko wyjaśnię. Hoisting wynosi deklarację zmiennej na sam początek. Wznosi deklarację zmiennej na początek bieżącego zakresu kodu. Jednakże miejmy na uwadze to, że tylko deklaracja jest wznoszona, a nie wartość która jest do niej przypisana. Jeśli nie wiesz o podnoszeniu, możesz napotkać problemy i nie będzie ostrzeżenia, ponieważ Twój kod nie wyświetli błędu.

var zmienna = 'wartość';
zmienna; // wartość
zmienna2 // undefinied, brak błędów !
var zmienna2 = 'inna wartość';

W powyższym przykładzie nie dostaniemy żadnych błędów ale JavaScript odczyta to jako

var zmienna = 'wartość';
var zmienna2; // zmienna została wyniesiona lecz bez 
// przypisanej wartości
zmienna  // wartość
zmienna2 // undefinied, brak błędów !
var zmienna2 = 'inna wartość'; // inna wartość

W tym artykule nie będę się zbytnio zajmować hostingiem, ponieważ w Internecie jest wiele zasobów na ten temat. Możliwe też, że opisze go szerzej w osobnym artykule. Podsumowując musimy pamiętać, aby przypisać wszystkie zmienne na początku zakresu kodu. Aby to wymusić, możemy użyć trybu ścisłego ( “strict“)

#const i let

const i let są nowymi modyfikatorami przypisania zmiennych. Wychodzą one na przeciw pewnym niedociągnięciom z którymi spotkamy używając modyfikatora var.

Zakres blokowy

Zmienne zadeklarowane za pomocą słów kluczowych const i let posiadają zakres blokowy.

let zmienna = 'wartość';
if(true) { 
    let zmienna = 'Zmiana wartości';
}
console.log(zmienna); // wartość

Każde przypisanie jest ograniczone do własnego bloku kodu. Zmienna może stać się “inna wartością” tylko wtedy, gdy wykonamy przypisanie bez nowej deklaracji.

let zmienna = 'wartość';
if(true) { 
    zmienna = 'Zmiana wartości';
}
console.log(zmienna); // Zmiana wartości

Hoisting

Zmienne, którym przypisano zarówno za pomocą const jak i let, nie podlegają hoistingowi, podobnie jak te zadekalrowane za pomocą var. Jak pamiętasz wspomniejliśmy wcześniej, iż zmienne ze słowem kluczowym var są inicjowane z wartością undefined, natomiast w tym wypadku jest trochę inaczej zmienne zadeklarowane za pomocą const jak i let nie są w ogóle inicjalizowane, tzn nie jest przypsana do nich wartość undefinied podczas wykonywania przez JavaScript hoistingu.

zmienna = 'wartość';
const zmienna = 'zmiana wartości' // ReffernceError zmienna nie jest zdefiniowana

Na powyższym przykładzie chciałam pokazać wam działanie o nazwie Temporal DeadZone, jest to miejsce w które tymczasowo wpadają zmienne dopóki nie zostaną zainicjalizowane. W większości przypadków skutkuje to wyświetleniem błędu zwanego ReferenceError.

typeof zmienna; // sprawdzamy typ zmiennej
const zmienna = 'wartość' // ReffernceError zmienna nie jest zdefiniowana

To co widzisz w przedstawionych powyżej przykładach jest rzeczą dobrą! 😃 Użycie const jak i let w połączeniu z trybem “strict” wymusza prawidłowe przypisanie zmiennych. Dzięki temu zmniejszamy ryzyko popełnienia przez nas błędu związanego ze złym użyciem.

#const

const jest skrótem od stałej. Zmienne zadeklarowane za pomocą słowa kluczowego const są:

• tylko do odczytu
• nie mogą być ponownie zadeklarowane
• niemożliwa jest zmiana ich wartości

const zmienna = 'wartość';
zmienna = 'Zmiana wartości';
// TypeError: Assigment  to constant variable

• mutowalne – tablice i obiekty mogą być modyfikowane

const zmienna = {};
zmienna.wlasnosc = 'wartość';

• nie są przypisane do obiektu window kiedy są zadeklarowane w zakresie globalnym

#let

Zmienne przypisane za pomocą słowa kluczowego let są bardzo podobne do tych zadeklarowanych za pomocą var. Główną różnicą między nimi jest zakres. Jak pamiętasz wspomniałam o tym wcześniej. Zmienne przypisane za pomocą let posiadją zasięg blokowy. Oznacza to, że zmienną można zobaczyć w tym bloku kodu w którym została zadeklarowana oraz we wszystkich podblokach. Zmienne przypisane za pomocą var jak pamiętasz posiadają zakres funkcyjny w związku z tym ignorują reguły zakresu blokowego.
Podobnie jak const zmiennych zadeklarowanych za pomocą let nie można ponownie zadeklarować, można tylko ponownie przypisać do nich inna wartość.

kiedy i gdzie stosować?

Podpowiem Ci, iż w większości przypadków wybierz najpierw const. Raczej będziesz potrzebował, aby większość przypisań była tylko do odczytu, aby uniknąć potencjalnych problemów z ponownym nadpisaniem ich wartości. Używaj słowa kluczowego let tylko wtedy, gdy wiesz, że zmienna będzie miała wartość, która może się zmienić w trakcie kolejnych linii kodu. Prawdopodobnie nie będziesz już używać var kiedy będziesz korzystać z let i const ​​😅

Rozważmy prosty scenariusz z użyciem let.

let zmienna = 'wartość;
const zmiennaFunkcji = () => zmienna = 'zmiana wartości';
zmiennaFunkcji ();
zmienna; // 'wartość' stała się 'zmianą wartości'

W powyższym przykładzie zmienna zmieni się. Zostanie ‘zmiana wartości’. Jej wartość jest dynamiczna, więc ma sens, zadeklarowanie zmiennej za pomocą słowa kluczowego let.
Funkcja ‘zmiana’ jest natomiast stałą. Nie chcemy, żeby coś się w niej zmieniło w późniejszych fragmentach kodu dlatego prawidłowym będzie zastosowanie słowa kluczowego const dla deklaracji zmiennej do której przypasana jest funkcja 👍
Powyższy przykład jest prostym przykładem, jednak tych z was którzy dopiero zaczynają swoje pierwsze kroki z kodem, ukazuje zachowanie które uzyskamy podczas zastosowania jednego z opisywanych wyżej słów kluczowych potrzebnych do deklaracji zmienej. Widząc let zmienna w górnej części kodu, dowiadujemy się, iż wartość zmiennej zmienia się w pewnym dalszej części kodu.
Użycie const i let nie tylko zmniejsza ryzyko popełnienia przez nas błędu, ale pomaga w zrozumieniu podstawy kod.

Czy to już koniec var?

Możemy powiedzieć, iż potencjalnie tak? ale i też nie, ponieważ musimy pamiętać o kompatybilności wstecznej.
Lecz od momentu powstania consti let, użycie varznacznie się zmniejszyło. Użycie consti let pozwala zmniejszyć ryzyko popełnienia błędów i sprawić, że kod będzie bardziej zwięzły . Może to przynieść wiele korzyści, takich jak ułatwienie początkującym użytkownikom zrozumienia logiki w biznesowej aplikacji.

Myślę, że to już wszystko co chciałam Ci przekazać w tym artykule! odnośnie Deklaracji zmiennych za pomocą const, let, var 👍

Jak zawsze, wszelkie pytania lub sugestie, możecie pozostawić w komentarzu, zapraszam również na Facebook 🧏‍♀️ i Instagram 📸!