Zadanie 15: Zasięg zmiennych (Scope) w JavaScript

Wstęp

Zanim przejdziemy do zasięgu, przypomnijmy: Zmienna to "pojemnik" na dane, któremu nadajemy nazwę. Pozwala nam ona przechowywać informacje (tekst, liczby, obiekty) i odwoływać się do nich w kodzie.

Zasięg (Scope) określa, w której części Twojego kodu dana zmienna jest "widoczna" i dostępna do użycia. W JavaScript wyróżniamy trzy główne rodzaje zasięgu.

Rodzaje zasięgu

1. Zasięg Globalny (Global Scope)

Zmienna zdefiniowana poza jakąkolwiek funkcją lub blokem kodu. Jest ona dostępna w każdym miejscu Twojego skryptu.

let markaAuta = "Tesla"; // Zmienna globalna

function pokazAuto() {
    console.log(markaAuta); // Ma dostęp do globalnej zmiennej
}

2. Zasięg Lokalny / Funkcyjny (Local Scope)

Zmienna zdefiniowana wewnątrz funkcji. Jest ona "zamknięta" w tej funkcji – nie masz do niej dostępu na zewnątrz.

function przygotujKawe() {
    let rodzajKawy = "Espresso"; // Zmienna lokalna
    console.log(rodzajKawy); // Działa
}

przygotujKawe();
// console.log(rodzajKawy); // BŁĄD! Ta zmienna tutaj nie istnieje.

3. Zasięg Blokowy (Block Scope)

Zmienne tworzone za pomocą let oraz const wewnątrz nawiasów klamrowych { } (np. w instrukcji if lub pętli for) są dostępne tylko wewnątrz tych nawiasów.

if (true) {
    let tajneHaslo = "12345"; // Zasięg blokowy
    console.log(tajneHaslo);
}
// console.log(tajneHaslo); // BŁĄD! Zmienna let nie wychodzi poza blok { }.

[!IMPORTANT] Stare słowo kluczowe var nie posiada zasięgu blokowego (ignoruje nawiasy { } w instrukcjach if), dlatego obecnie zaleca się używanie wyłącznie let i const.

Zadania do samodzielnego wykonania

Utwórz dokument HTML i wewnątrz tagu <script> rozwiąż poniższe zadania. Obserwuj błędy w konsoli przeglądarki (F12).

1. Globalny podróżnik: Stwórz zmienną globalną miasto o wartości "Bielsko-Biała". Stwórz funkcję podroz(), która wypisze w konsoli: "Jadę do: " + miasto. Wywołaj funkcję.
2. Lokalny sekret: Napisz funkcję tajnaWiadomosc(). Wewnątrz niej stwórz zmienną sekret o treści "To jest tajemnica". Spróbuj wypisać tę zmienną za pomocą console.log() poza funkcją i zobacz jaki błąd się pojawi.
3. Bitwa zasięgów: Stwórz zmienną globalną liczba = 10. Następnie stwórz funkcję, w której stworzysz nową zmienną o tej samej nazwie let liczba = 50. Wypisz ją wewnątrz funkcji i sprawdź, którą wartość pokaże JS.
4. Blokowa pułapka: Użyj instrukcji if (true) { ... }. Wewnątrz stwórz zmienną const rok = 2024. Spróbuj wypisać ją zaraz po zamknięciu nawiasu klamrowego if.
5. Pętla i let: Stwórz pętlę for (let i = 0; i < 3; i++) { ... }. Wewnątrz pętli wypisuj wartość i. Po zakończeniu pętli spróbuj wypisać i w konsoli. Wyjaśnij (sobie), dlaczego wynik jest błędem.
6. Próba nadpisania: Stwórz stałą (const) globalną KRAJ = "Polska". W dowolnej funkcji spróbuj przypisać jej nową wartość "Niemcy". Co powie konsola?
7. Zmienna w funkcji: Napisz funkcję sumuj(a, b). Wewnątrz stwórz zmienną wynik = a + b. Wywołaj funkcję, a następnie spróbuj wyświetlić wynik poza nią.
8. Wiele bloków: Stwórz dwa oddzielne bloki kodu { } jeden po drugim. W każdym z nich stwórz zmienną let x = 10. Czy program działa? Czy zmienne o tej samej nazwie w różnych blokach się "gryzą"?
9. Parametr jako zmienna lokalna: Sprawdź, czy argument funkcji (np. function test(argument)) jest dostępny poza funkcją.
10. Refaktoryzacja zasięgu: Masz zmienną globalną let saldo = 100. Napisz funkcję zmienSaldo(), która zmieni jej wartość na 200. Sprawdź wartość saldo przed wywołaniem funkcji i po jej wywołaniu.

Git Help

git add .
git commit -m "HTML Zadanie 15: Variable Scope concepts"