Deklaracja zmiennych: var, let, const

W JavaScript zmienne można zadeklarować na kilka sposobów – historycznie do tego celu służyło słowo kluczowe var, a od ECMAScript 2015 (ES6) dodano let oraz const. Choć cel jest podobny (przechowywanie danych), istnieją istotne różnice dotyczące zasięgu (scope), możliwości ponownego przypisania oraz zachowania w przypadku tzw. hoistingu.

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

• var
  • Zasięg zmiennych: funkcyjny (function scope) lub globalny (jeśli zadeklarowane poza funkcją).
  • Może być ponownie zadeklarowana w tym samym zasięgu (co bywa źródłem błędów).
  • Obsługuje hoisting – zmienna jest widoczna w całej funkcji nawet przed zadeklarowaniem (jej wartość to undefined do momentu deklaracji).
• let
  • Zasięg zmiennych: blokowy (block scope) – obowiązuje w obrębie { ... } instrukcji, pętli czy funkcji.
  • Nie może być ponownie zadeklarowana w tym samym zakresie – rzuci błąd.
  • Również podlega hoistingowi, ale nie można korzystać z niej przed faktyczną deklaracją (tzw. Temporal Dead Zone).
• const
  • Zasięg: blokowy (jak w przypadku let).
  • Nie można zmienić wartości po zainicjowaniu (konsekwentnie „stała”).
  • Jednak nie jest całkowicie niezmienna w kontekście obiektów i tablic – struktura tablicy czy obiektu może się zmieniać, ale zmiennej const nie można przypisać innego obiektu/nowej tablicy.

  See the Pen 
  Untitled by EE-Informatyk.pl (@eeinformatyk)
  on CodePen.

Podsumowanie

• var - starszy sposób deklaracji, ma zasięg funkcyjny lub globalny, co bywa źródłem nieoczekiwanych zachowań.
• let - polecany do zmiennych, które będą się zmieniać w obrębie danego bloku (np. w pętli, instrukcji if).
• const - stała, której wartości nie można ponownie przypisać; idealna do wartości niezmiennych, ale obiekty/ tablice mogą być w środku modyfikowane.
• Zastosowanie odpowiedniego sposobu deklaracji zmiennych pomaga uniknąć błędów i sprawia, że kod jest bardziej zrozumiały.