Zmienne, typy danych i operatory w JavaScript

Po co się tego uczymy?

Zanim napiszesz jakikolwiek warunek czy pętlę, musisz rozumieć, jak JavaScript przechowuje i porównuje dane — to fundament, na którym opiera się cała reszta działu, od walidacji formularzy po dynamiczne aktualizowanie koszyka.

Teoria

JavaScript, podobnie jak PHP, jest językiem ze SŁABYM typowaniem — nie musisz deklarować typu zmiennej, JavaScript sam go rozpoznaje na podstawie przypisanej wartości.

Podstawowe typy proste: string (tekst, w cudzysłowie pojedynczym, podwójnym lub w tzw. template literal z odwrotnym apostrofem: `tekst ${zmienna}`), number (JEDEN typ dla wszystkich liczb — całkowitych i zmiennoprzecinkowych, w przeciwieństwie do PHP), boolean (true/false), undefined (zmienna zadeklarowana, ale bez wartości), null (świadomy "brak wartości").

Typy złożone: array (tablica, [1, 2, 3]) i object (obiekt, {klucz: wartość} — odpowiednik tablicy asocjacyjnej z PHP).

Operatory arytmetyczne: + - * / % (reszta z dzielenia), ** (potęgowanie).
Operatory porównania: == (równość "luźna", z konwersją typów — UNIKAJ), === (równość ŚCISŁA, sprawdza też typ — ZAWSZE preferuj), !=/!== (nierówność), >, <, >=, <=.
Operatory logiczne: && (i), || (lub), ! (zaprzeczenie).

typeof zmienna zwraca nazwę typu danej wartości jako tekst — przydatne do debugowania.

Przykład z życia

Kiedy strona sprawdza, czy wpisana cena jest liczbą dodatnią, czy pole nie jest puste, czy dwa wpisane hasła są identyczne — w tle zawsze dzieje się porównanie wartości operatorami takimi jak === czy >.

Kod (JavaScript)

let cena = 9.99;
let iloscSztuk = 3;
let tytul = "Podróż w czasie";
let dostepny = true;

console.log(typeof cena);      // "number"
console.log(typeof tytul);     // "string"
console.log(typeof dostepny);  // "boolean"

// operatory arytmetyczne
let wartoscZamowienia = cena * iloscSztuk;
console.log("Do zapłaty: " + wartoscZamowienia + " zł");

// == vs === - kluczowa różnica
console.log(5 == "5");   // true  (== ignoruje różnicę typów - unikaj!)
console.log(5 === "5");  // false (=== sprawdza też typ - zawsze używaj)

// operatory logiczne
let pelnoletni = true;
let zaakceptowalRegulamin = true;
console.log(pelnoletni && zaakceptowalRegulamin); // true - oba warunki spełnione

Komentarz i wyjaśnienie kodu

Różnica między == a === to jedna z najczęstszych pułapek dla początkujących w JS — 5 == "5" zwraca true, bo JavaScript automatycznie "zamienia" tekst "5" na liczbę przed porównaniem, co bywa źródłem trudnych do wyśledzenia błędów. === nie robi takiej konwersji, więc porównanie liczby z tekstem zawsze da false — to bezpieczniejszy, bardziej przewidywalny wybór, którego powinieneś używać niemal zawsze.

Ćwiczenie samodzielne

Zadeklaruj zmienne reprezentujące cenę i ilość sztuk produktu, oblicz i wypisz łączną wartość zamówienia.

Zadania do pracy własnej

Napisz skrypt porównujący dwie liczby operatorem === i wypisujący wynik porównania.
Zadeklaruj zmienne wiek i maJuzKonto (boolean), a następnie wypisz przez console.log, czy użytkownik może się zarejestrować (musi mieć co najmniej 13 lat I nie mieć jeszcze konta) — użyj operatora &&.
Napisz skrypt reprezentujący pojedynczą pozycję koszyka w serwisie filmowym: zmienne tytulFilmu, cenaJednostkowa, ilosc, oblicz wartoscPozycji (cena razy ilość) oraz sprawdź operatorem >, czy wartość pozycji przekracza 50 zł (np. do naliczenia darmowej dostawy).

Typowe błędy

Najczęstszy błąd to używanie == zamiast === "z przyzwyczajenia" — prowadzi to do zaskakujących wyników przy porównywaniu różnych typów danych. Drugi błąd: mylenie przypisania = z porównaniem === wewnątrz warunków (Lekcja 3). Trzeci: zapominanie, że JavaScript ma tylko JEDEN typ liczbowy (number) — nie ma osobnego typu dla liczb całkowitych jak w C#, więc 10 / 3 da wynik zmiennoprzecinkowy 3.333..., a nie automatycznie zaokrąglony wynik całkowity.

Nawiązanie do egzaminu zawodowego

To realizacja efektu INF.03.5.2.4 z podstawy programowej: "posługuje się typami prostymi i złożonymi, zmiennymi i operatorami w skryptowych językach programowania".