Zmienne let i const w JavaScript — ćwiczenia dla początkujących

Od 2015 roku JavaScript ma dwa nowoczesne sposoby deklarowania zmiennych: let (wartość można zmieniać) i const (stała). Starsze var zachowuje się inaczej i bywa źródłem trudnych do znalezienia błędów. Na lekcji uczniowie sprawdzają, co się dzieje przy zmianie stałej, jak działa zasięg bloku i dlaczego const nie oznacza niezmiennej tablicy.

Scenariusz jest przeznaczony na 45 minut dla klasy po pierwszej lekcji JavaScript — na przykład po pierwszej lekcji JavaScript. Zadania wymagają tylko console.log (w lekcji — funkcji pokaz).

Przygotowanie stanowisk

Potrzebna jest przeglądarka z konsolą (F12) i edytor tekstu. Rozpakuj pakiet z sekcji materiałów do osobnego folderu. W folderze start jest index.html (nie zmieniasz go) oraz app.js z funkcją pokaz, która wypisuje tekst w konsoli i na stronie. Po zapisaniu app.js odśwież stronę. Gotowe rozwiązanie jest w folderze rozwiazanie. Serwer i Node.js nie są wymagane.

Cele i plan lekcji

Po zajęciach uczeń potrafi:

• wybrać let albo const i uzasadnić wybór;
• rozpoznać błąd TypeError przy zmianie stałej;
• wyjaśnić różnicę zasięgu bloku (let, const) i funkcji (var);
• wyjaśnić, że const blokuje przypisanie, ale nie zmianę zawartości tablicy lub obiektu;
• rozpoznać błąd ReferenceError przy użyciu zmiennej przed deklaracją.

let, const i var

let deklaruje zmienną, której wartość można zmienić. const deklaruje stałą — nie można jej przypisać nowej wartości (próba kończy się błędem TypeError), a deklaracja wymaga od razu wartości. Domyślnie warto używać const, a let tylko dla zmiennych, które naprawdę się zmieniają (liczniki, sumy).

Zasięg. Zmienna let i const istnieje tylko w bloku { ... }, w którym ją zadeklarowano (również w pętli for). Zmienna var ma zasięg funkcji, więc „wycieka” z bloku if lub pętli — dlatego we współczesnym kodzie unika się var.

const a tablice. const lista = [1, 2] blokuje tylko przypisanie nowej wartości do lista; elementy tablicy można dodawać i zmieniać (lista.push(3)).

Strefa martwa. Zmienna let lub const istnieje od początku bloku, ale nie można jej użyć przed linią deklaracji — próba kończy się błędem ReferenceError.

Zadania

Zadanie 1. let i const. Zadeklaruj let licznik = 0, zwiększ go o 1 i wypisz. Zadeklaruj const PI = 3.14, spróbuj go zmienić w bloku try ... catch i wypisz nazwę błędu oraz wartość PI.

Zadanie 2. Zasięg bloku. W bloku if (true) { ... } zadeklaruj var a = 5, let b = 6 i const c = 7. Poza blokiem wypisz a oraz typeof b i typeof c.

Zadanie 3. Tablica, strefa martwa i pętla. Dodaj element do tablicy zadeklarowanej przez const, a potem spróbuj przypisać jej nową tablicę. Użyj zmiennej let przed jej deklaracją. Sprawdź typeof i po pętli for (let i = 0; ...).

Dla chętnych: sprawdź, co wypisze typeof nieistniejaca (bez błędu) i dlaczego odwołanie do niej bez typeof byłoby błędem.

Rozwiązanie i wyniki

function pokaz(...czesci) {
  const tekst = czesci.join(" ");
  console.log(tekst);
  document.querySelector("#wynik").textContent += tekst + "\n";
}

// Zadanie 1
let licznik = 0;
licznik = licznik + 1;
pokaz("licznik:", licznik);
const PI = 3.14;
try {
  PI = 3;
} catch (blad) {
  pokaz("blad:", blad.name);
}
pokaz("PI:", PI);

// Zadanie 2
if (true) {
  var a = 5;
  let b = 6;
  const c = 7;
}
pokaz(a, typeof b, typeof c);

// Zadanie 3
const lista = [1, 2];
lista.push(3);
pokaz("lista:", lista.join(", "));
try {
  lista = [];
} catch (blad) {
  pokaz("blad:", blad.name);
}
try {
  pokaz(zmienna);
  let zmienna = 1;
} catch (blad) {
  pokaz("blad:", blad.name);
}
for (let i = 0; i < 3; i++) {
}
pokaz("po petli:", typeof i);

Program wypisze:

licznik: 1
blad: TypeError
PI: 3.14
5 undefined undefined
lista: 1, 2, 3
blad: TypeError
blad: ReferenceError
po petli: undefined

Dla chętnych: typeof zwraca napis undefined także dla zmiennej, która nie istnieje, i nie zgłasza błędu — to jedyny bezpieczny sposób sprawdzenia nieistniejącej zmiennej.

Typowe błędy

Pytania kontrolne i punktacja

1. Kiedy użyjesz const, a kiedy let?
2. Czy const lista = []; lista.push(1); jest błędem?
3. Co wypisze typeof x dla zmiennej x zadeklarowanej przez let w bloku, jeśli sprawdzimy ją poza blokiem?

Odpowiedzi: const — gdy wartość się nie zmienia, let — gdy zmienna ma się zmieniać (licznik, suma). Nie, push zmienia zawartość, a nie przypisuje nowej tablicy. undefined (operator typeof nie zgłasza błędu dla nieistniejącej zmiennej).

Proponowana punktacja (razem 10 punktów): zadanie 1 — let z licznikiem 1 pkt, const z try/catch 2 pkt, wypisanie wartości 1 pkt; zadanie 2 — trzy deklaracje i wypis 2 pkt, wyjaśnienie zasięgu 1 pkt; zadanie 3 — push 1 pkt, błąd przypisania 1 pkt, strefa martwa 1 pkt. Zadanie dla chętnych nie jest wymagane do pełnej oceny.

Materiały do pobrania

• Pakiet JavaScript: materiały do lekcji, rozwiązanie i karta pracy
• Karta pracy ucznia — otwórz i wydrukuj

Rozpakuj ZIP przed otwarciem plików. Materiały są dostępne bez logowania; publiczne rozwiązanie służy nauce i samodzielnemu sprawdzeniu, a nie poufnemu sprawdzianowi.

Co dalej?

Następny krok to typy danych i obiekty. Ten materiał rozwija dział o zmiennych w kursie JavaScript w TablicaPro, gdzie znajdziesz prezentacje, ćwiczenia i testy do prowadzenia lekcji.

Źródła techniczne: let w MDN oraz const w MDN. Zobacz też lekcję o tablicach.