Deklaracja zmiennych (var, let, const)

W Parku Jurajskim różne gatunki dinozaurów wymagają różnych poziomów zabezpieczeń - łagodny Brachiosaurus może przebywać w otwartym wybiegu, podczas gdy agresywny Velociraptor potrzebuje wzmocnionego, zamkniętego pomieszczenia. Podobnie w JavaScript mamy trzy różne sposoby deklarowania zmiennych: var, let i const, z których każdy oferuje inny poziom "zabezpieczeń" i elastyczności.

Podstawy deklaracji zmiennych

Zmienne w JavaScript to jak oznaczone zagrody w Parku Jurajskim - pozwalają na przechowywanie i organizację danych, do których możemy później się odwoływać. Zanim będziemy mogli użyć zmiennej, musimy ją zadeklarować.

1// Deklaracja zmiennej dinosaur przy użyciu słowa kluczowego var
2var dinosaur = "T-Rex";
3
4// Deklaracja zmiennej height przy użyciu słowa kluczowego let
5let height = 5.6;
6
7// Deklaracja stałej MAX_SPEED przy użyciu słowa kluczowego const
8const MAX_SPEED = 27;

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

Zakres (scope) zmiennych

1. var - Zakres funkcyjny

Zmienne zadeklarowane za pomocą var mają zakres funkcyjny, co oznacza, że są widoczne w całej funkcji, w której zostały zadeklarowane.

1function monitorDinosaurs() {
2    var count = 5;
3
4    if (count > 3) {
5        var status = "Przekroczono limit bezpieczeństwa!";
6        console.log(status);  // "Przekroczono limit bezpieczeństwa!"
7    }
8
9    console.log(status);  // "Przekroczono limit bezpieczeństwa!" - zmienna jest dostępna poza blokiem if
10}
11
12// console.log(count);  // Błąd! 'count' nie jest zdefiniowane - var ma zakres funkcyjny

To jak system bezpieczeństwa, gdzie alarm uruchomiony w jednej części parku (wewnątrz bloku if) nadal jest słyszalny w całym centrum kontroli (funkcja monitorDinosaurs), ale nie poza parkiem.

2. let - Zakres blokowy

Zmienne zadeklarowane za pomocą let mają zakres blokowy - są widoczne tylko wewnątrz bloku, w którym zostały zadeklarowane.

1function securityCheck() {
2    let safetyStatus = "Normalny";
3
4    if (emergencyDetected) {
5        let alarmLevel = "Czerwony";
6        console.log(alarmLevel);  // "Czerwony"
7    }
8
9    // console.log(alarmLevel);  // Błąd! 'alarmLevel' nie jest zdefiniowane - zmienna dostępna tylko w bloku if
10}

To jak komunikacja przez radio z ograniczonym zasięgiem - informacja o alarmie (zmienna alarmLevel) jest dostępna tylko w strefie zagrożenia (blok if), a nie w całym centrum dowodzenia.

3. const - Niezmienna wartość

const podobnie jak let ma zakres blokowy, ale dodatkowo wprowadza ograniczenie: raz przypisana wartość nie może być zmieniona.

1function setupEnclosure() {
2    const ENCLOSURE_ID = "A-7";
3    const MAX_CAPACITY = 3;
4
5    // ENCLOSURE_ID = "B-3";  // Błąd! Nie można zmienić wartości stałej
6
7    let currentDinosaurs = 2;
8    currentDinosaurs = 3;  // OK - zmienne let mogą zmieniać wartość
9}

To jak identyfikatory zagród w parku - raz przypisany numer zagrody (np. "A-7") nie może być zmieniony, aby uniknąć pomyłek i niebezpieczeństwa.

Hoisting (wynoszenie)

W JavaScript deklaracje zmiennych i funkcji są "wynoszone" (hoisted) na górę ich zakresu. To jak przygotowywanie wszystkich zagród w parku przed przywiezieniem dinozaurów.

1. var - pełny hoisting

Zmienne zadeklarowane za pomocą var są wynoszone wraz z ich deklaracją, ale bez inicjalizacji:

1console.log(dinosaurCount);  // undefined - deklaracja jest hoistowana, ale nie inicjalizacja
2var dinosaurCount = 10;

Jest to równoważne:

1var dinosaurCount;  // Deklaracja jest wyniesiona na górę
2console.log(dinosaurCount);  // undefined
3dinosaurCount = 10;  // Inicjalizacja pozostaje w oryginalnym miejscu

2. let i const - częściowy hoisting

Zmienne zadeklarowane za pomocą let i const również są wynoszone, ale nie są inicjalizowane - próba dostępu do nich przed deklaracją powoduje błąd:

1// console.log(dinoSpecies);  // Błąd: Cannot access 'dinoSpecies' before initialization
2let dinoSpecies = "Velociraptor";
3
4// console.log(MAX_WEIGHT);   // Błąd: Cannot access 'MAX_WEIGHT' before initialization
5const MAX_WEIGHT = 8000;

To jak procedura zabezpieczania - zagrody są przygotowane (hoisting), ale nikt nie może do nich wejść (użyć zmiennej), dopóki nie zostaną oficjalnie otwarte (zadeklarowane).

Redeclaration - ponowna deklaracja

1. var - pozwala na ponowną deklarację

1var securityLevel = "Niski";
2var securityLevel = "Wysoki";  // Dozwolone - nadpisuje poprzednią deklarację

To jak przeprowadzanie dinozaura z jednej zagrody do drugiej bez żadnych ograniczeń.

2. let i const - nie pozwalają na ponowną deklarację w tym samym zakresie

1let carnivoreCount = 5;
2// let carnivoreCount = 7;  // Błąd! 'carnivoreCount' zostało już zadeklarowane
3
4const MAX_VISITORS = 150;
5// const MAX_VISITORS = 200;  // Błąd! 'MAX_VISITORS' zostało już zadeklarowane

To jak ścisła kontrola translokacji dinozaurów - nie można przypisać tego samego gatunku do dwóch różnych zagród jednocześnie.

Kiedy używać var, let i const

Kiedy używać const

const to najbezpieczniejsza opcja - używaj jej zawsze, gdy wartość zmiennej nie będzie się zmieniać. To jak metalowe ogrodzenia dla drapieżników:

1const PARK_NAME = "Jurassic Park";
2const ADMIN_PASSWORD = "clevergirl123";
3const DANGEROUS_SPECIES = ["T-Rex", "Velociraptor", "Dilophosaurus"];

Nawet dla obiektów i tablic, których zawartość może się zmieniać, ale referencja pozostaje stała:

1const parkStatus = {
2    isOpen: true,
3    visitorCount: 372
4};
5
6// Dozwolone - zmieniamy właściwość obiektu, nie samą referencję
7parkStatus.visitorCount = 373;
8
9// Błąd! Nie można przypisać nowego obiektu do stałej
10// parkStatus = { isOpen: false, visitorCount: 0 };

Kiedy używać let

let to dobry wybór dla zmiennych, których wartość będzie się zmieniać, ale chcemy ograniczyć ich zakres do bieżącego bloku. To jak elastyczne zagrody dla łagodniejszych dinozaurów:

1function monitorParkSectors() {
2    for (let i = 0; i < sectors.length; i++) {
3        let currentSector = sectors[i];
4        let dangerLevel = assessDanger(currentSector);
5
6        if (dangerLevel > 7) {
7            let emergencyProtocol = selectProtocol(dangerLevel);
8            activateAlarm(currentSector, emergencyProtocol);
9        }
10    }
11    // Zmienna i, currentSector, dangerLevel, emergencyProtocol nie są już dostępne tutaj
12}

Kiedy używać var

Z powodu potencjalnych problemów, var jest obecnie rzadko zalecane w nowoczesnym JavaScript. Jednak może być przydatne w specyficznych sytuacjach, gdzie potrzebujemy zmienną z zakresem funkcyjnym.

1function legacyCode() {
2    if (condition) {
3        var oldSystemVariable = "wartość";
4    }
5
6    // Dostęp do zmiennej poza blokiem, gdzie została zadeklarowana
7    console.log(oldSystemVariable);
8}

To jak stare, mniej bezpieczne zagrody w parku - działają, ale lepiej zastąpić je nowocześniejszymi rozwiązaniami.

Najlepsze praktyki

1. Używaj przede wszystkim const

Zawsze zaczynaj od const dla swoich zmiennych. Jeśli później okaże się, że potrzebujesz zmienić wartość, zamień na let. To jak zasada w Parku Jurajskim - najpierw zastosuj najsilniejsze zabezpieczenia, a dopiero jeśli okaże się, że potrzebujesz więcej elastyczności, rozważ mniej restrykcyjne opcje.

1// Zacznij od const
2const dinoData = fetchDinosaurData();
3
4// Jeśli potrzebujesz modyfikować wartość, użyj let
5let dangerLevel = 0;
6for (const dino of dinoData) {
7    if (dino.aggressive) {
8        dangerLevel++;
9    }
10}

2. Unikaj var w nowym kodzie

W nowoczesnym JavaScript (ES6+) zazwyczaj lepiej jest używać let i const zamiast var.

3. Deklaruj zmienne na początku ich zakresu

To pomaga w zrozumieniu, jakie zmienne są używane w danym bloku kodu:

1function processEnclosure(enclosureId) {
2    // Wszystkie deklaracje na początku
3    const enclosure = getEnclosure(enclosureId);
4    let dinosaurCount = enclosure.inhabitants.length;
5    let feedingRequired = false;
6
7    // Logika funkcji poniżej
8    if (timeElapsed > 4) {
9        feedingRequired = true;
10    }
11
12    //
13}

4. Używaj znaczących nazw zmiennych

Podobnie jak w parku każde pomieszczenie czy procedura ma jasne oznaczenie, tak w kodzie zmienne powinny mieć znaczące nazwy:

1// ŹLE
2const x = 5;
3let y = getZ();
4
5// DOBRZE
6const maxDinosaursPerEnclosure = 5;
7let currentSafetyRating = calculateSafetyScore();

Deklaracje zmiennych w TypeScript

TypeScript rozszerza JavaScript o statyczne typowanie, co daje dodatkową warstwę bezpieczeństwa - jak jeszcze solidniejsze ogrodzenia w parku:

1// Definiowanie typów dla lepszego bezpieczeństwa
2let dinoName: string = "Velociraptor";
3const maxSpeed: number = 45;
4const isDangerous: boolean = true;
5
6// Definiowanie typów złożonych
7interface Dinosaur {
8    name: string;
9    species: string;
10    height: number;
11    weight: number;
12    dangerous: boolean;
13}
14
15const trex: Dinosaur = {
16    name: "Rexy",
17    species: "Tyrannosaurus Rex",
18    height: 5.6,
19    weight: 8000,
20    dangerous: true
21};

Typy w TypeScript działają jak dodatkowe protokoły bezpieczeństwa - zapobiegają umieszczeniu "roślinożercy w zagrodzie mięsożerców" (przypisaniu wartości niewłaściwego typu).

Przykład praktyczny: System monitoringu Parku Jurajskiego

Poniższy przykład ilustruje prawidłowe użycie var, let i const w bardziej rozbudowanym scenariuszu:

1// Stałe wartości konfiguracyjne - nie zmieniają się
2const PARK_NAME = "Jurassic Park";
3const DANGER_LEVELS = {
4    LOW: 1,
5    MEDIUM: 2,
6    HIGH: 3,
7    CRITICAL: 4
8};
9const DANGEROUS_SPECIES = ["T-Rex", "Velociraptor", "Dilophosaurus"];
10
11// Funkcja monitorująca park
12function monitorPark() {
13    // Stan parku - może się zmieniać
14    let isOpen = true;
15    let visitorCount = getCurrentVisitors();
16    let activeAlerts = [];
17
18    // Przegląd każdego sektora
19    for (let i = 0; i < parkSectors.length; i++) {
20        const sector = parkSectors[i];  // Referencja do sektora nie zmienia się w pętli
21        let sectorStatus = checkSectorStatus(sector);
22
23        // Sprawdź dinozaury w sektorze
24        for (const dinosaur of sector.dinosaurs) {
25            // Species jest stałe - nie zmienia się
26            const species = dinosaur.species;
27
28            // Poziom zagrożenia może się zmieniać
29            let dangerLevel = DANGER_LEVELS.LOW;
30
31            // Ocena zagrożenia
32            if (DANGEROUS_SPECIES.includes(species)) {
33                dangerLevel = DANGER_LEVELS.HIGH;
34
35                // Sprawdź infrastrukturę bezpieczeństwa
36                const fenceStatus = checkFenceStatus(sector.id);
37                const powerStatus = checkPowerStatus(sector.id);
38
39                if (fenceStatus !== "Operational" || powerStatus < 90) {
40                    dangerLevel = DANGER_LEVELS.CRITICAL;
41
42                    // Lokalny protokół awaryjny
43                    let emergencyProtocol = selectEmergencyProtocol(species);
44                    activeAlerts.push({
45                        sector: sector.id,
46                        species: species,
47                        protocol: emergencyProtocol
48                    });
49
50                    // Dodanie alertu może wpłynąć na status parku
51                    if (dangerLevel === DANGER_LEVELS.CRITICAL) {
52                        isOpen = false;
53                    }
54                }
55            }
56        }
57    }
58
59    // Zwróć raport statusu parku
60    return {
61        parkName: PARK_NAME,
62        open: isOpen,
63        visitors: visitorCount,
64        alerts: activeAlerts
65    };
66}

Podsumowanie

1. var:

   • Ma zakres funkcyjny
   • Jest w pełni hoistowane (wyniesione)
   • Pozwala na ponowną deklarację
   • Jak starsze, mniej bezpieczne zagrody w parku

2. let:

   • Ma zakres blokowy
   • Jest częściowo hoistowane (nie można używać przed deklaracją)
   • Nie pozwala na ponowną deklarację w tym samym zakresie
   • Jak standardowe zagrody z możliwością modyfikacji

3. const:

   • Ma zakres blokowy
   • Jest częściowo hoistowane (nie można używać przed deklaracją)
   • Nie pozwala na ponowną deklarację ani nadpisanie wartości
   • Pozwala na modyfikację zawartości obiektów i tablic
   • Jak wzmocnione zagrody dla najniebezpieczniejszych dinozaurów

Wybór między var, let i const jest jak wybór odpowiednich zabezpieczeń w Parku Jurajskim - zależy od konkretnych potrzeb, ale zawsze warto zaczynać od najsilniejszych (const) i rozluźniać je tylko wtedy, gdy jest to absolutnie konieczne.

W następnej lekcji przyjrzymy się podstawowym typom danych w JavaScript, które są jak różne gatunki dinozaurów w naszym parku - każdy z nich ma swoje unikalne cechy i zastosowania.

1// Patrol Parku - Pętle i Iteracja
2// Ćwiczenie: Używanie pętli for, while, for...of
3
4// Pętla for - klasyczna iteracja
5console.log("=== Patrol Zagród (pętla for) ===");
6const enclosures = ["T-Rex", "Raptor", "Triceratops", "Brachio", "Stego"];
7
8for (let i = 0; i < enclosures.length; i++) {
9  console.log("Zagroda " + (i + 1) + ": " + enclosures[i] + " - OK");
10}
11
12// Pętla for...of - iteracja po elementach
13console.log("\n=== Karmienie (for...of) ===");
14for (const dino of enclosures) {
15  console.log("Karmienie: " + dino);
16}
17
18// Pętla while
19console.log("\n=== Skanowanie DNA (while) ===");
20let samples = 3;
21while (samples > 0) {
22  console.log("Skanowanie próbki " + samples + "...");
23  samples--;
24}
25
26// Twoje zadanie:
27// 1. Użyj pętli for do przeszukania bazy DNA
28// 2. Użyj for...of do wypisania gatunków
29// 3. Użyj while z warunkiem zatrzymania
30
31// Twój kod tutaj:
32