Frontend Academy · Lekcja

Zmienne: let, const, var i zakres

Deklaruj zmienne za pomocą let, const i var. Poznaj zakres blokowy i funkcyjny oraz dowiedz się, dlaczego dla większości wartości preferuje się const.

Zmienne: let, const, var i zakres to bezpłatna lekcja Frontend Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Frontend Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Po co zmienne?

Zmienne przechowują wartości, dzięki czemu można ich ponownie używać, aktualizować je i nadawać im znaczące nazwy. JavaScript oferuje trzy sposoby deklarowania zmiennych: var (starszy), let (nowoczesny, umożliwia ponowne przypisanie) oraz const (nowoczesny, ze stałym wiązaniem).

const — domyślny wybór

Deklaruj zmienną za pomocą const, gdy nie będziesz przypisywać jej ponownie. Sygnalizuje to intencję i zapobiega przypadkowemu ponownemu przypisaniu. Uwaga: const uniemożliwia ponowne przypisanie wiązania, ale nie sprawia, że obiekty ani tablice stają się niemutowalne.

const name = 'Alice';        // can't reassign
const PI = 3.14159;

const user = { age: 25 };    // object is mutable
user.age = 26;               // OK — property change, not rebinding
// user = {};               // Error — can't reassign const

let — gdy trzeba ponownie przypisać wartość

Używaj let, gdy wartość będzie się zmieniać: w przypadku liczników pętli, sum narastających i zmiennych przechowujących stan. let ma zakres blokowy — istnieje tylko wewnątrz najbliższego otaczającego { }.

let score = 0;
score = score + 10;  // OK

for (let i = 0; i < 3; i++) {
  console.log(i);     // 0, 1, 2
}
// console.log(i);   // ReferenceError — i is out of scope

var — deklaracja starszego typu

var ma zakres funkcji (a nie zakres blokowy) i jest przenoszone na początek swojej funkcji w wyniku hoistingu. Prowadzi to do trudnych do wykrycia błędów. We współczesnym JavaScript unikaj var i wybieraj const oraz let.

function example() {
  if (true) {
    var x = 5;   // function-scoped, not block-scoped
  }
  console.log(x); // 5 — still accessible here!
}

Zakres: gdzie żyją zmienne

Zakres globalny: zmienna zadeklarowana poza dowolną funkcją lub blokiem, dostępna wszędzie. Zakres funkcji: zmienna zadeklarowana wewnątrz funkcji, dostępna tylko w tej funkcji. Zakres blokowy: let/const wewnątrz { }, dostępne tylko w tym bloku.

Hoisting

Hoisting przenosi deklaracje na początek ich zakresu podczas kompilacji. Deklaracje var są przenoszone i inicjalizowane wartością undefined. let i const są przenoszone, ale nie są inicjalizowane — odwołanie do nich przed deklaracją powoduje błąd typu Temporal Dead Zone.

Nazywanie zmiennych

Stosuj opisowe nazwy. Dla zmiennych i funkcji używaj camelCase (userName), dla stałych UPPER_SNAKE_CASE (MAX_RETRIES), a dla klas PascalCase (UserProfile). Unikaj pojedynczych liter, z wyjątkiem pętli (i, j).

Deklarowanie wielu zmiennych

Można zadeklarować wiele zmiennych w jednej instrukcji, ale zwykle czytelniejsze jest użycie jednej deklaracji na zmienną. Unikaj składni z przecinkami, ponieważ może ona zaciemniać zakres i typy.

// Less clear:
let a = 1, b = 2, c = 3;

// Preferred:
const MAX = 10;
let count = 0;
const label = 'Score';

Temporal Dead Zone (TDZ)

Odwołanie do zmiennej let lub const przed jej deklaracją w kodzie powoduje błąd ReferenceError. Obszar między początkiem bloku a deklaracją nazywa się TDZ.

console.log(value); // ReferenceError: Cannot access 'value' before initialization
const value = 42;

const z tablicami i obiektami

const uniemożliwia ponowne przypisanie zmiennej, ale wartość, do której się odwołuje, nadal można modyfikować. Użyj Object.freeze() w przypadku płytko niemutowalnego obiektu albo niemutowalnych wzorców, aby uzyskać głęboką niemutowalność.

const items = [1, 2, 3];
items.push(4);       // OK — mutates the array
items = [];          // Error — can't reassign const

const config = Object.freeze({ maxAge: 30 });
config.maxAge = 99;  // Silently fails in non-strict mode

Dlaczego warto preferować const zamiast let?

Domyślne używanie const ułatwia analizowanie kodu: wiadomo, że zmienna nie zostanie ponownie przypisana w innym miejscu. Używaj let dopiero wtedy, gdy rzeczywiście trzeba ponownie przypisać wartość. Ten nawyk ogranicza liczbę błędów i poprawia czytelność.

Szybkie sprawdzenie

Jaka jest najważniejsza różnica między let a var?

Podsumowanie: zmienne i zakres

Preferuj const w przypadku wartości, którym nie będzie ponownie przypisywana wartość. Używaj let dla wartości, które można zmieniać. Unikaj var. Zakres blokowy (let/const) ogranicza widoczność zmiennych do bloku. Hoisting: var jest inicjalizowane wartością undefined, a let/const powodują błąd TDZ przy zbyt wczesnym odczycie.

Często zadawane pytania

Czy lekcja „Zmienne: let, const, var i zakres” jest bezpłatna?

Tak — pełny tekst „Zmienne: let, const, var i zakres” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Frontend Academy, przejdź na CoddyKit PRO. Kurs Frontend Academy zawiera 4 lekcji w sumie.

Co nauczysz się w „Zmienne: let, const, var i zakres”?

Deklaruj zmienne za pomocą let, const i var. Poznaj zakres blokowy i funkcyjny oraz dowiedz się, dlaczego dla większości wartości preferuje się const. Ćwiczysz Frontend Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.

Czy potrzebuję doświadczenia, aby zacząć Frontend Academy?

Nie wymagamy żadnego doświadczenia. Frontend Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.

Ile czasu zajmuje lekcja „Zmienne: let, const, var i zakres”?

Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.

Czy mogę pisać i uruchamiać kod w tej lekcji Frontend Academy?

Tak. Każda lekcja Frontend Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.

Wszystkie lekcje w tym kursie

Zmienne: let, const, var i zakres
Typy danych: string, number, boolean, null, undefined
Funkcje: deklaracje, wyrażenia i funkcje strzałkowe
Sterowanie przepływem: if, else, switch, for, while

← Powrót do Frontend Academy