JavaScript to obecnie jeden z najpopularniejszych języków programowania, którego używa się do tworzenia aplikacji webowych ale także coraz częściej za pomocą dodatkowych narzędzi do budowania aplikacji mobilnych czy desktopowych. Zmienne w JavaScript są jednymi z najważniejszych elementów języka, ponieważ umożliwiają przechowywanie i manipulowanie danymi. W tym artykule omówimy czym są zmienne i jakie są ich rodzaje w JavaScript, a także jak ich używać w praktyce.
Czym są zmienne w JavaScript?
Najprościej wyobrazić sobie zmienną jako po prostu pojemnik lub kontener, w którym można przechowywać wartości – czyli dane w naszym programie. W JavaScript zmienne mogą przechowywać różne typy danych m.in. liczby, łańcuchy znaków, obiekty, funkcje, tablice itp. Zmienne deklaruje się przy użyciu odpowiedniego słowa kluczowego var, let lub const, a ich wartości (poza zmiennymi deklarowanymi poprzez słowo kluczowe „const”) mogą być zmieniane w trakcie działania programu.
Deklarowanie zmiennych w JavaScript
Aby zadeklarować zmienną w JavaScript musimy użyć jednego z trzech słów kluczowych: var, let lub const. Słowo kluczowe var było głównie używane w starszych wersjach JavaScript. Obecnie do deklarowania zmiennych zaleca się używanie let lub const.
Zmienna zadeklarowana za pomocą var może być zdefiniowana globalnie lub lokalnie w funkcji – ma zasięg funkcyjny. Jeśli zmienna zostanie zdefiniowana globalnie, będzie dostępna dla wszystkich funkcji i bloków programu. Jeśli zostanie zdefiniowana lokalnie, będzie dostępna tylko wewnątrz funkcji, w której została zadeklarowana.
Let i const to słowa kluczowe, które zostały dodane do języka JavaScript w nowszych wersjach ECMAScript. Zmienne zadeklarowane za pomocą let lub const są dostępne tylko w bloku kodu, w którym zostały zdefiniowane. Blok kodu to sekcja pomiędzy nawiasami klamrowymi {}. To co różni zmienne zadeklarowane za pomocą słowa kluczowego const od let to fakt, że takie zmienne nazywami stałymi. To znaczy, że nie możemy przypisać do nich nowej wartości, tak jak ma to miejsce w przypadku zmiennych zadeklarowanych za pomocą słowa kluczowego let.
Przykłady użycia zmiennych w JavaScript
Przeanalizujmy teraz kilka przykładów kodu ze zmiennymi w JavaScript:
Przykład 1:
var x = 5;
var y = 10;
var sum = x + y;
console.log(sum); // wynik: 15
W tym przykładzie zdefiniowaliśmy dwie zmienne x i y, które przechowują liczby 5 i 10. Następnie dodaliśmy je do siebie i przypisaliśmy wynik do zmiennej sum. Na koniec wypisaliśmy wynik w konsoli za pomocą metody console.log().
Przykład 2:
let firstName = „Jan”;
let lastName = „Kowalski”;
let fullName = firstName + ” ” + lastName;
console.log(fullName); // wynik: „Jan Kowalski”
W tym przykładzie zdefiniowaliśmy dwie zmienne firstName oraz lastName, które przechowują ciągi znaków. Następnie w zmiennej fullName połączyliśmy ze sobą te dwie wartości, dodatkowo wstawiając pomiędzy nimi spację.
Przykład 3:
const x = 5;
x = 10; // błąd
Jak widzimy na powyższym przykładzie, zadeklarowaliśmy stałą zmienną x. Następnie próbujemy przypisać do niej nową wartość 10. Taka operacja zwróci nam jednak błąd, ponieważ do stałej zmiennej wartość można przypisać tylko jeden raz.
Zasięg zmiennych w JavaScript
Tak jak już wspomnieliśmy wcześniej, w zależności od tego, za pomocą którego słowa kluczowego utworzymy zmienną w JavaScript będzie różnił się jej zasięg w naszym kodzie. Również miejsce zadeklarowania zmiennej wpływa na dostępność w programie.
Zasięg globalny
Zmienne zadeklarowane w zasięgu globalnym są dostępne w całym programie. W JavaScript zasięg globalny jest reprezentowany przez obiekt window. Zmienną globalną można zdefiniować, przypisując ją do obiektu window. Na przykład:
W powyższym przykładzie globalVariable jest zmienną globalną, która jest dostępna również w funkcji foo, ponieważ jest ona utworzona w zasięgu globalnym.
Zasięg lokalny
Zmienne zadeklarowane w zasięgu lokalnym są dostępne tylko wewnątrz bloku, w którym zostały utworzone. W JavaScript bloki to funkcje, pętle, instrukcje warunkowe oraz sekcje stworzone za pomocą nawiasów klamrowych {}:
W powyższym przykładzie localVariable jest zmienną lokalną, która jest dostępna tylko w funkcji foo. Próba uzyskania dostępu do tej zmiennej poza tą funkcją doprowadzi do wystąpienia błędu.
Zasięg blokowy
Od ECMAScript 6 (ES6) JavaScript wprowadził zasięg blokowy, który dotyczy zmiennych zadeklarowanych za pomocą let i const. Oznacza to, że zmienne te są dostępne tylko w bloku, w którym zostały utworzone:
Powyższy przykład przedstawia zmienną blockScopedVariable, która ma zasięg blokowy i jest dostępna tylko w bloku warunkowym if. Próba posłużenia się tą zmienną w dalszej części programu – poza tym blokiem – spowoduje błąd.