Lekcja 2: Zmienne i Typy Danych

W tej lekcji poznasz podstawowe elementy języka JavaScript - zmienne oraz typy danych. Zrozumienie tych koncepcji jest kluczowe dla dalszej nauki programowania.

Zmienne w JavaScript

Zmienne to podstawowe "pojemniki" na dane w programowaniu. Pozwalają na przechowywanie wartości, które można później wykorzystać lub zmodyfikować w programie.

Deklarowanie zmiennych

W JavaScript mamy trzy sposoby deklarowania zmiennych:

// Używając var (starszy sposób, rzadziej używany w nowoczesnym JS)
var imie = "Jan";

// Używając let (wprowadzone w ES6, zalecane dla zmiennych, których wartość może się zmieniać)
let wiek = 25;

// Używając const (wprowadzone w ES6, dla stałych wartości, których nie będziemy zmieniać)
const PI = 3.14159;

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

• var - ma zasięg funkcyjny, może być redeklarowana i aktualizowana
• let - ma zasięg blokowy, nie może być redeklarowana, ale może być aktualizowana
• const - ma zasięg blokowy, nie może być redeklarowana ani aktualizowana po inicjalizacji

Przykład różnic w zasięgu:

function przykladFunkcji() {
    if (true) {
        var zmiennaVar = "Jestem var";
        let zmiennaLet = "Jestem let";
        const zmiennaConst = "Jestem const";
    }
    
    console.log(zmiennaVar);    // Zadziała - "Jestem var"
    // console.log(zmiennaLet);    // Błąd - zmiennaLet is not defined
    // console.log(zmiennaConst);  // Błąd - zmiennaConst is not defined
}
przykladFunkcji(); // Wywołanie funkcji, aby zobaczyć wynik

Zasady nazywania zmiennych

• Nazwy zmiennych mogą zawierać litery, cyfry, znaki podkreślenia (_) i znaki dolara ($)
• Nazwa musi zaczynać się od litery, znaku podkreślenia lub znaku dolara (nie może zaczynać się od cyfry)
• Nazwy zmiennych są case-sensitive (rozróżniają wielkość liter)
• Nie można używać słów kluczowych JavaScript jako nazw zmiennych (np. let, const, function)
• Zalecane jest używanie camelCase dla nazw zmiennych (np. mojaZmienna)

Typy danych w JavaScript

JavaScript jest językiem dynamicznie typowanym, co oznacza, że nie musimy deklarować typu zmiennej - jest on określany automatycznie na podstawie przypisanej wartości.

Typy prymitywne

1. String - ciąg znaków, tekst
2. Number - liczby (całkowite i zmiennoprzecinkowe)
3. Boolean - wartości logiczne (true/false)
4. Undefined - zmienna zadeklarowana, ale bez przypisanej wartości
5. Null - specjalna wartość oznaczająca "nic" lub "puste"
6. Symbol - unikalny i niezmienny identyfikator (wprowadzony w ES6)
7. BigInt - do reprezentowania bardzo dużych liczb całkowitych (wprowadzony w ES2020)

Przykłady typów prymitywnych

// String
let imie = "Anna";
let nazwisko = 'Kowalska';  // Można używać pojedynczych lub podwójnych cudzysłowów
let tekst = `Witaj, ${imie}!`;  // Template literals (ES6) - pozwalają na wstawianie zmiennych w tekst

// Number
let wiek = 25;          // Liczba całkowita
let wzrost = 1.75;      // Liczba zmiennoprzecinkowa
let nieskonczonosc = Infinity;  // Specjalna wartość: nieskończoność
let nieNumer = NaN;     // Not a Number - specjalna wartość oznaczająca nieprawidłową operację matematyczną

// Boolean
let czyPelnoletni = true;
let czyZalogowany = false;

// Undefined
let nieprzypisanaZmienna;
console.log(nieprzypisanaZmienna);  // undefined

// Null
let pustaWartosc = null;

// Symbol
let symbol1 = Symbol("opis");
let symbol2 = Symbol("opis");
console.log(symbol1 === symbol2);  // false - każdy Symbol jest unikalny

// BigInt
let duzaLiczba = 9007199254740991n;  // Dodanie 'n' na końcu tworzy BigInt

Typ złożony: Object

Oprócz typów prymitywnych, JavaScript ma jeden typ złożony - Object. Obiekty mogą przechowywać kolekcje danych i bardziej złożone encje.

Przykłady obiektów:

// Obiekt (kolekcja par klucz-wartość)
let osoba = {
    imie: "Jan",
    nazwisko: "Kowalski",
    wiek: 30,
    przedstawSie: function() {
        return `Nazywam się ${this.imie} ${this.nazwisko}`;
    }
};

// Tablica (specjalny rodzaj obiektu do przechowywania uporządkowanych kolekcji)
let kolory = ["czerwony", "zielony", "niebieski"];

// Data (wbudowany obiekt do pracy z datami)
let dzisiaj = new Date();

Sprawdzanie typu zmiennej

Do sprawdzenia typu zmiennej możemy użyć operatora typeof:

let tekst = "Hello";
let liczba = 42;
let prawda = true;
let tablica = [1, 2, 3];
let obiekt = { klucz: "wartość" };
let nieprzypisana;
let pustaWartosc = null;

console.log(typeof tekst);        // "string"
console.log(typeof liczba);       // "number"
console.log(typeof prawda);       // "boolean"
console.log(typeof tablica);      // "object" (uwaga: tablice są obiektami w JS)
console.log(typeof obiekt);       // "object"
console.log(typeof nieprzypisana); // "undefined"
console.log(typeof pustaWartosc); // "object" (uwaga: to jest znany błąd w JS)

Konwersja typów

JavaScript często automatycznie konwertuje typy danych, co może prowadzić do nieoczekiwanych wyników:

// Konwersja do String
let liczba = 42;
let tekstLiczby = String(liczba);  // Jawna konwersja
let tekstLiczby2 = liczba + "";    // Niejawna konwersja

// Konwersja do Number
let tekst = "42";
let liczbaZTekstu = Number(tekst);  // Jawna konwersja
let liczbaZTekstu2 = +tekst;        // Niejawna konwersja używając operatora +
let liczbaZTekstu3 = parseInt(tekst, 10);  // Parsowanie do liczby całkowitej (drugi parametr to system liczbowy)

// Konwersja do Boolean
let wartosc = "hello";
let logiczna = Boolean(wartosc);  // Jawna konwersja
let logiczna2 = !!wartosc;        // Niejawna konwersja używając podwójnej negacji

Warto wiedzieć, które wartości są konwertowane na false (tzw. "falsy values"):

• false
• 0, -0, 0n (BigInt zero)
• "", '', `` (pusty string)
• null
• undefined
• NaN

Wszystkie inne wartości są konwertowane na true.

// Deklaracja zmiennych różnych typów
let imie = "Anna";
let nazwisko = "Nowak";
let wiek = 22;
let czyZdalEgzamin = true;
let oceny = [4, 5, 3, 5, 4];
let adres = {
    ulica: "Kwiatowa",
    numer: 15,
    miasto: "Warszawa",
    kodPocztowy: "00-001"
};

// Wyświetlenie informacji w konsoli
console.log("Imię:", imie, "- typ:", typeof imie);
console.log("Nazwisko:", nazwisko, "- typ:", typeof nazwisko);
console.log("Wiek:", wiek, "- typ:", typeof wiek);
console.log("Czy zdał egzamin:", czyZdalEgzamin, "- typ:", typeof czyZdalEgzamin);
console.log("Oceny:", oceny, "- typ:", typeof oceny);
console.log("Adres:", adres, "- typ:", typeof adres);

// Dodatkowe wyświetlenie szczegółów adresu
console.log("Szczegóły adresu:");
console.log(`${adres.ulica} ${adres.numer}, ${adres.kodPocztowy} ${adres.miasto}`);