Var, let i const. Ewolucja deklaracji zmiennych w JavaScript

Ewa Klimowicz

23 października, 2023

3 min

• Specjalizacja
• JavaScript

Ostatnia aktualizacja 23 października, 2023

Jednym z podstawowych elementów języka JavaScript są zmienne, wśród których najstarszym sposobem deklarowania zmiennych jest użycie słowa kluczowego var. Jednakże wraz z rozwojem języka, var wypierały nowsze i bardziej elastyczne opcje deklarowania zmiennych. W tym artykule przedstawimy, czym dokładnie jest var, jakie ma zastosowania oraz jakie są jego wady w porównaniu z nowszymi metodami.

Co to jest var w JavaScript?

Słowo kluczowe var w JavaScript służy do deklarowania zmiennych. Jest to jeden z najstarszych sposobów deklarowania zmiennych w tym języku i był szeroko używany przed wprowadzeniem ES6 (ECMAScript 2015). Składnia wygląda następująco:

var x = 10;
var y = "Hello, World!";

W podanym kodzie JavaScript deklarowane są dwie zmienne za pomocą słowa var.

• var x = 10;: Deklaruje zmienną o nazwie x i przypisuje jej wartość liczbową 10.
• var y = "Hello, World!";: Deklaruje zmienną o nazwie y i przypisuje jej wartość tekstową “Hello, World!”.

Obie zmienne są globalne, jeżeli kod nie jest zawarty w żadnej funkcji, czyli są dostępne w całym skrypcie.

W sytuacji, w której kod umieszcza się wewnątrz funkcji, zmienne te będą miały jej zasięg. Oznacza to, że będą dostępne tylko wewnątrz niej.

Warto również zauważyć, że przy użyciu var, obie zmienne są poddane zjawisku znanemu jako windowanie (hoisting). Oznacza to, że deklaracje zmiennych są “wynoszone” na początek ich zasięgu (w tym przypadku na początek skryptu lub funkcji, jeśli są wewnątrz niej). Jednakże nie dotyczy to ich inicjalizacji. Dlatego też odwołanie się do tych zmiennych przed ich deklaracją nie spowoduje błędu, ale zwróci undefined.

Jak stosuje się var?

Deklaracja zmiennych za pomocą var jest dość prostym procesem. Wystarczy użyć słowa kluczowego var, a następnie nazwę zmiennej i opcjonalnie jej wartość.

console.log(a); // undefined
var a = 5;
console.log(a); // 5

W tym przykładzie także zachodzi windowanie, czyli deklaracja zmiennej przenosi się na początek bloku.

Dalsza część tekstu znajduje się pod materiałem wideo:

Problemy z var JavaScript

Chociaż var jest łatwe w użyciu, ma kilka istotnych wad.

Po pierwsze, jak pisaliśmy wyżej, zmienna deklarowana za pomocą var ma zasięg funkcji, a nie blokowy. Może to prowadzić do nieoczekiwanych wyników.

Po drugie, możliwość wielokrotnego deklarowania tej samej zmiennej może prowadzić do błędów. Oto przykład:

var x = 10;
if (true) {
  var x = 20; // Nadpisuje wartość x
}
console.log(x); // 20, a nie 10

Lepsze rozwiązania: let i const

Wprowadzenie ES6 przyniosło dwie nowe metody deklarowania zmiennych: let i const. Oba słowa kluczowe mają zasięg blokowy i nie pozwalają na wielokrotne deklarowanie tej samej zmiennej w tym samym zasięgu.

let x = 10;
if (true) {
  let x = 20; // Nie wpływa na zewnętrzną zmienną x
}
console.log(x); // 10

const działa podobnie, ale nie pozwala na zmianę wartości zmiennej po jej deklaracji.

let i const a var

Jest kilka istotnych różnic pomiędzy var a let i const, które sprawiają, że te dwie ostatnie opcje weszły do standardu w najnowszej wersji JavaScript i wyparły deklarację var.

• Zasięg zmiennej: var działa w kontekście funkcji lub jako zmienna globalna, natomiast let i const mają zasięg blokowy.
• Hoisting: Zmienne z var są przesuwane na początek zakresu. Może to wprowadzać zamieszanie. let i const nie są poddawane hoistingowi.
• Niezmienniczość: Tylko const gwarantuje, że wartość zmiennej nie zostanie przypadkowo zmieniona, a to zapewnia dodatkowe zabezpieczenia.

Czytaj także:

Praktyczne zastosowania metody forEach w JavaScript

Poznaj składnię i konwencje Basha