Zmiennie w JavaScript

1. Wprowadzenie

Zmienna to nazwana przestrzeń w pamięci, w której możemy przechowywać dane, takie jak liczby, teksty, obiekty czy funkcje. W JavaScript zmienne są jednym z najważniejszych elementów języka — pozwalają tworzyć dynamiczne programy, przechowywać stany aplikacji i manipulować danymi.

W przeciwieństwie do niektórych języków, JavaScript nie wymaga deklaracji typu danych przy tworzeniu zmiennej — typ przypisywany jest dynamicznie na podstawie wartości.

2. Deklarowanie zmiennych

Od wersji ES6 (ECMAScript 2015) w JavaScript mamy trzy sposoby deklaracji zmiennych:

  1. var – stary sposób (ES5 i wcześniej)
  2. let – nowoczesny sposób, rekomendowany
  3. const – zmienna stała (niezmienny wskaźnik)

2.1 var – zmienne funkcyjne

Deklaracja zmiennej przy użyciu var:

Cechy:

  • Ma zakres funkcyjny (function scope), a nie blokowy.
  • Można ją ponownie zadeklarować w tym samym zakresie.
  • Jest hoistowana (podnoszona) na początek zakresu.
  • Może prowadzić do nieoczekiwanych błędów, dlatego nie jest już zalecana.

Przykład – problem z var:

2.2 let – nowoczesny sposób deklaracji

Wprowadzony w ES6. Najczęściej używany do deklaracji zmiennych, których wartość może się zmieniać.

Przykład:

Cechy:

  • Ma zakres blokowy (block scope) – obowiązuje tylko wewnątrz {}.
  • Nie można jej ponownie zadeklarować w tym samym zakresie.
  • Jest hoistowana, ale nie można z niej korzystać przed inicjalizacją (tzw. temporal dead zone).

Przykład zakresu blokowego:

2.3 const – stałe (niemodyfikowalne referencje)

Używana do deklarowania zmiennych, które nie powinny być nadpisywane.

Przykład:

Cechy:

  • Ma zakres blokowy (tak jak let).
  • Musi być zainicjalizowana w momencie deklaracji.
  • Nie można ponownie przypisać nowej wartości.
  • Jednak w przypadku obiektów i tablic można modyfikować ich zawartość (ponieważ const chroni tylko referencję, nie samą strukturę danych).

Przykład – modyfikacja obiektu:

3. Hoisting – „podnoszenie” zmiennych

JavaScript przesuwa deklaracje zmiennych na górę swojego zakresu (funkcji lub skryptu) w trakcie interpretacji kodu.

Przykład z var:

Tutaj deklaracja var a została „podniesiona” na górę, ale przypisanie (a = 10) już nie.

Przykład z let i const:

Zmienna b istnieje, ale znajduje się w tzw. temporal dead zone — nie można z niej korzystać przed jej inicjalizacją.

4. Zakres zmiennych (scope)

Zakres określa, gdzie zmienna jest widoczna i dostępna w kodzie.

4.1 Zakres globalny

Zmienna dostępna w całym skrypcie.

4.2 Zakres funkcyjny

Zmienne zadeklarowane wewnątrz funkcji są dostępne tylko w niej.

4.3 Zakres blokowy

Dotyczy let i const – zmienne są dostępne tylko w obrębie bloku {}.

5. Zasady nazewnictwa zmiennych

Zmienna powinna mieć nazwę opisującą jej zawartość lub przeznaczenie. Przy tym musisz przestrzegać kilku zasad składniowych:

Dozwolone znaki:

  • litery (A–Z, a–z), cyfry (0–9), $, _
  • nie może zaczynać się od cyfry

Niedozwolone:

  • spacje, myślniki (-), znaki specjalne (@, #, itp.)

Przykłady poprawne:

Złe przykłady:

Konwencja nazewnicza: W JavaScript stosuje się camelCase:

6. Różnice między var, let i const

Cechy var let const
Zakres funkcyjny blokowy blokowy
Hoisting tak (bez inicjalizacji) tak (z temporal dead zone) tak (z temporal dead zone)
Ponowne przypisanie ✅ tak ✅ tak ❌ nie
Ponowna deklaracja ✅ tak ❌ nie ❌ nie
Inicjalizacja wymagana ❌ nie ❌ nie ✅ tak
Użycie w nowych projektach ❌ niezalecane ✅ zalecane ✅ zalecane (dla stałych)

7. Zmienne globalne i obiekt window / globalThis

W przeglądarce zmienne zadeklarowane poza funkcjami trafiają do obiektu globalnego window:

W nowoczesnych środowiskach (np. Node.js, przeglądarki ES2020+) można używać:

Uwaga: unikanie zmiennych globalnych jest dobrą praktyką – mogą prowadzić do konfliktów nazw.

8. Stałe a niezmienność danych

const chroni referencję zmiennej, ale niekoniecznie jej zawartość. Dla prostych typów (number, string, boolean) wartość jest naprawdę stała. Dla obiektów i tablic – referencja nie może się zmienić, ale dane wewnątrz już tak.

Przykład:

9. Dobre praktyki przy pracy ze zmiennymi

  • Używaj let i const, unikaj var.
  • Stosuj const zawsze, gdy zmienna nie ma być modyfikowana.
  • Używaj czytelnych i opisowych nazw zmiennych.
  • Deklaruj zmienne jak najbliżej miejsca ich użycia.
  • Unikaj zmiennych globalnych, jeśli nie są absolutnie konieczne.
  • Pamiętaj o zakresach blokowych – nie używaj zmiennych poza ich blokiem.
  • Unikaj zjawiska shadowingu (nadpisywania zmiennych o tej samej nazwie w wewnętrznym zakresie).

Przykład shadowingu:

10. Podsumowanie

Cecha var let const
Zakres Funkcyjny Blokowy Blokowy
Hoisting Tak (z undefined) Tak, ale niedostępna przed inicjalizacją Tak, ale niedostępna przed inicjalizacją
Ponowne przypisanie ✅ Tak ✅ Tak ❌ Nie
Ponowna deklaracja ✅ Tak ❌ Nie ❌ Nie
Zalecane użycie ❌ Stary kod ✅ Zmienna, której wartość się zmienia ✅ Stałe wartości lub referencje

11. Wnioski

  • JavaScript jest dynamicznie typowanym językiem, a zmienne mogą zmieniać typ w czasie działania programu.
  • let i const wprowadziły bardziej przewidywalne i bezpieczne zarządzanie zmiennymi.
  • Unikaj var, jeśli nie musisz wspierać bardzo starych przeglądarek.
  • Używaj const jako domyślnej opcji, a let tylko wtedy, gdy wartość ma być modyfikowana.
  • Pamiętaj o zakresie blokowym i hoistingu, aby uniknąć trudnych do wykrycia błędów.

Podsumowanie praktyczne: - W nowoczesnym JavaScript (ES6+), zawsze zaczynaj od const, zmieniaj na let, tylko jeśli faktycznie potrzebujesz zmienić wartość. - Taka zasada sprawi, że Twój kod będzie czystszy, bardziej przewidywalny i odporny na błędy.

Wróć do spisu lekcji Rozwiąż quiz