Zmienne i typy danych

Każdy skrypt coś pamięta: cenę z pola formularza, liczbę kliknięć, imię użytkownika, to, czy checkbox jest zaznaczony. Miejsca na te wartości to zmienne, a rodzaje wartości to typy danych. W tej lekcji nauczysz się deklarować zmienne trzema słowami kluczowymi (i wiedzieć, którego używać), nadawać im nazwy, za które egzaminator daje punkt, oraz rozpoznawać typ wartości – bo od typu zależy, czy + doda, czy sklei.

Zmienna to karteczka z nazwą

Zmienna to nazwa, pod którą program przechowuje wartość. Deklarujesz ją słowem let, podajesz nazwę i – zwykle od razu – wartość:

let cena = 120;
console.log(cena);
console.log(cena * 2);
cena = 150;            // nowa wartość pod tą samą nazwą
console.log(cena);

Wygodna metafora: zmienna to żółta karteczka z nazwą, przyklejona do wartości. let cena = 120 przykleja karteczkę „cena” do liczby 120. cena = 150 odkleja ją od 120 i przykleja do 150. Stara wartość zostaje bez nazwy i przeglądarka ją sprząta. Ta metafora jest lepsza niż „pudełko”, bo dwie karteczki mogą wisieć na tej samej wartości – przyda się to, gdy poznasz tablice i obiekty.

Słownictwo, które będzie wracać:

• deklaracja – utworzenie zmiennej: let cena;
• inicjalizacja – pierwsze nadanie wartości: let cena = 120; (deklaracja i inicjalizacja w jednym),
• przypisanie – zapisanie wartości znakiem =: cena = 150;. Jeden znak = to zawsze „zapisz”, nigdy „czy równe” – porównania mają == i === (lekcja Porównania i warunki).

Zmienna zadeklarowana bez wartości ma specjalną wartość undefined („nieokreślona”):

let liczbaKlikniec;
console.log(liczbaKlikniec);
liczbaKlikniec = 0;
console.log(liczbaKlikniec);

let, const i var

JavaScript ma trzy słowa do deklarowania zmiennych. Współczesny kod używa dwóch pierwszych; trzecie musisz znać, bo zadania egzaminacyjne są w nim napisane.

const – stała

const deklaruje zmienną, do której nie można przypisać nowej wartości. Trzeba ją od razu zainicjalizować. Używaj jej domyślnie: większość wartości w skrypcie (cena za sztukę, stawka VAT, znaleziony element strony) nie zmienia się po ustaleniu, a const chroni cię przed przypadkowym nadpisaniem.

const stawkaVat = 0.23;
console.log("VAT:", stawkaVat);
stawkaVat = 0.08;      // TypeError: Assignment to constant variable.

let – zmienna

Gdy wartość ma się zmieniać – licznik kliknięć, suma zamówienia, numer aktualnego zdjęcia w galerii – użyj let. Zasada praktyczna: zacznij od const, a jeśli edytor podkreśli ci przypisanie, zmień na let.

let suma = 0;
suma = suma + 45;      // zabieg 1
suma = suma + 30;      // zabieg 2
console.log("Do zapłaty:", suma, "zł");

var – dialekt egzaminacyjny

Przed 2015 rokiem var był jedynym sposobem deklaracji. Działa, ale ma dwie cechy, które w większym kodzie prowadzą do błędów: pozwala zadeklarować tę samą zmienną drugi raz (literówka zamiast błędu daje cichy bałagan) i ignoruje bloki – zmienna z var wewnątrz if czy pętli „wycieka” poza klamry.

let liczba = 5;
let liczba = 10;
console.log(liczba);

let liczba = 5;
let liczba = 10;       // SyntaxError: Identifier 'liczba' has already been declared
console.log(liczba);

var liczba = 5;
var liczba = 10;       // var na to pozwala – bez ostrzeżenia
console.log(liczba);

Różnica zasięgu, w skrócie (dokładnie: lekcja Zasięg, hoisting, domknięcia):

if (true) {
  var starySposob = "widoczne poza blokiem";
  let nowySposob = "widoczne tylko w bloku";
  console.log(nowySposob);
}
console.log(starySposob);
console.log(typeof nowySposob);  // "undefined" – poza blokiem ta zmienna nie istnieje

Nazwy zmiennych

Reguły, których pilnuje przeglądarka:

• nazwa składa się z liter, cyfr, _ i $, ale nie może zaczynać się cyfrą: cena2 tak, 2cena nie,
• bez spacji i myślników: cena-brutto to odejmowanie cena - brutto,
• wielkość liter ma znaczenie: Cena, cena i CENA to trzy różne zmienne,
• nie wolno użyć słów kluczowych języka: let, const, if, for, function, class, return, new…

Reguły, których pilnuje egzaminator i każdy, kto czyta twój kod:

• nazwa mówi, co zmienna przechowuje: cenaZaKg, liczbaRat, wybraneMiasto, czyZaznaczony. Nazwy a, x1, zm, temp to od 2024 roku strata osobnego kryterium „znaczące nazewnictwo zmiennych i funkcji w języku polskim lub angielskim”,
• zapis camelCase: pierwsze słowo małą literą, każde następne wielką: kosztCalkowity, totalCost,
• bez polskich znaków w nazwach: kosztCalkowity, nie kosztCałkowity. Przeglądarka by to przyjęła, ale literówki typu ł/l są niewidoczne, a na obcym komputerze kodowanie może zawieść. Polskie znaki trzymaj w napisach i komentarzach,
• po polsku albo po angielsku – ale konsekwentnie w całym skrypcie.

// dobrze: od razu wiadomo, co jest czym
const cenaZaKg = 12.5;
const wagaKg = 3;
const kosztCalkowity = cenaZaKg * wagaKg;
console.log("Koszt:", kosztCalkowity, "zł");

// źle (działa, ale egzaminator odejmie punkt za nazewnictwo):
const a = 12.5;
const b = 3;
const c = a * b;
console.log(c);

Typy danych

Każda wartość w JavaScripcie ma typ. Typ decyduje, co można z wartością zrobić: liczby dodajesz, napisy sklejasz, wartości logiczne sprawdzasz w warunku. Na początek potrzebujesz pięciu typów prostych; dwa pozostałe proste (bigint, symbol) są rzadkie, a typ złożony object (w tym tablice i funkcje) ma własne lekcje.

string – napis

Tekst w cudzysłowach "…", apostrofach '…' albo odwrotnych apostrofach `…` (szablony, lekcja Napisy). Napisem jest wszystko, co stoi w cudzysłowach – także "120" i "true".

const imie = "Ola";
const miasto = 'Gdańsk';
const kodPocztowy = "80-001";   // to napis, nie liczba – bo w cudzysłowach
console.log(imie, miasto, kodPocztowy);
console.log("Ala" + "Nowak");   // + dla napisów = sklejanie (konkatenacja)

number – liczba

JavaScript ma jeden typ liczbowy dla całkowitych i ułamkowych. Separator dziesiętny to zawsze kropka, nigdy przecinek. Liczby piszesz bez cudzysłowów.

const liczbaRat = 12;
const cena = 19.99;
const temperatura = -4;
console.log(liczbaRat + cena);     // dodawanie
console.log(typeof liczbaRat, typeof cena);

boolean – wartość logiczna

Tylko dwie wartości: true (prawda) i false (fałsz), bez cudzysłowów. Powstają m.in. z porównań i ze stanu checkboxa (.checked).

const zalogowany = true;
const regulaminZaznaczony = false;
const czyDorosly = 17 >= 18;        // porównanie daje boolean
console.log(zalogowany, regulaminZaznaczony, czyDorosly);

undefined – „nic nie przypisano”

Wartość zmiennej zadeklarowanej bez inicjalizacji, brakującego parametru funkcji czy nieistniejącej właściwości obiektu. Zwykle sygnał, że czegoś zabrakło.

null – „celowo puste”

Wartość, którą programista wpisuje sam, żeby powiedzieć „tu nie ma nic”. Zwraca ją też document.getElementById(...), gdy nie znajdzie elementu – stąd komunikat Cannot read properties of null.

let wybranyKurs;              // jeszcze nic nie wybrano
let znalezionyElement = null; // celowo: niczego nie ma
console.log(wybranyKurs, znalezionyElement);
console.log(wybranyKurs === undefined, znalezionyElement === null);

Operator typeof

typeof wartość zwraca napis z nazwą typu. Przydaje się w konsoli, gdy nie wiesz, co dostałeś – zwłaszcza z formularza.

var x = "true";
console.log(typeof x);

console.log(typeof "Ola");       // string
console.log(typeof "true");      // string – bo w cudzysłowach!
console.log(typeof 42);          // number
console.log(typeof 4.2);         // number – jeden typ dla wszystkich liczb
console.log(typeof true);        // boolean
console.log(typeof undefined);   // undefined
console.log(typeof (5 > 3));     // boolean – typ wyniku porównania
console.log(typeof typeof 5);    // string – bo typeof zawsze zwraca napis

Zmienna może zmienić typ

JavaScript jest językiem dynamicznie typowanym: typ należy do wartości, nie do zmiennej. Ta sama zmienna let może najpierw trzymać liczbę, a potem napis. To wygodne, ale bywa źródłem błędów, gdy z formularza dostajesz napis "5", a myślisz, że masz liczbę 5.

let dane = 5;
console.log(dane, typeof dane);
dane = "5";
console.log(dane, typeof dane);
dane = dane + 1;
console.log(dane, typeof dane);   // "51" – napis plus liczba to sklejenie

Na egzaminie

Ściąga

Zadania

// Dane pacjenta – const, bo w tym skrypcie ich nie zmieniamy
const imieNazwisko = "Ola Nowak";
const wiek = 17;
const wzrostM = 1.68;
const ubezpieczony = true;
let numerSali;             // jeszcze nie przydzielono – undefined
let uwagiLekarza = null;   // celowo puste

console.log("Pacjent:", imieNazwisko, "(" + typeof imieNazwisko + ")");
console.log("Wiek:", wiek, "(" + typeof wiek + ")");
console.log("Wzrost:", wzrostM, "(" + typeof wzrostM + ")");
console.log("Ubezpieczony:", ubezpieczony, "(" + typeof ubezpieczony + ")");
console.log("Sala:", numerSali, "(" + typeof numerSali + ")");
console.log("Uwagi:", uwagiLekarza, "(" + typeof uwagiLekarza + ")");

const liczba rat = 12;
let 1cena = 4500;
const miasto;
var x = "Katowice";
let suma = 0;
let suma = suma + 100;
const czyZgoda = "true";

// 1. spacja w nazwie → camelCase
const liczbaRat = 12;
// 2. nazwa nie może zaczynać się cyfrą
let cena = 4500;
// 3. const wymaga wartości od razu
const miasto = "Katowice";
// 4. var x – nieznacząca nazwa i stary zapis; miasto już mamy wyżej
// 5–6. druga deklaracja let tej samej nazwy to SyntaxError – samo przypisanie
let suma = 0;
suma = suma + 100;
// 7. "true" w cudzysłowach to napis; wartość logiczna jest bez cudzysłowów
const czyZgoda = true;

console.log(liczbaRat, cena, miasto, suma, czyZgoda, typeof czyZgoda);

console.log(typeof 42);
console.log(typeof "42");
console.log(typeof (42 > 40));
console.log(typeof null);
console.log(typeof undefined);
console.log(typeof nieZadeklarowana);
console.log(typeof typeof 42);
console.log(typeof 42.0);
console.log(typeof "");
console.log(typeof (1 + "1"));

console.log(typeof 42);             // number
console.log(typeof "42");           // string – cudzysłowy
console.log(typeof (42 > 40));      // boolean – wynik porównania
console.log(typeof null);           // object – pułapka historyczna
console.log(typeof undefined);      // undefined
console.log(typeof nieZadeklarowana); // undefined – typeof nie zgłasza błędu dla nieistniejącej nazwy
console.log(typeof typeof 42);      // string – typeof zwraca napis
console.log(typeof 42.0);           // number – jeden typ liczbowy
console.log(typeof "");             // string – pusty napis to nadal napis
console.log(typeof (1 + "1"));      // string – liczba + napis = sklejenie "11"

var a = 5000;
var b = 3000;
r = 10;
var s = a + b;
var w = s / r;
console.log("Koszt: " + s + " zl, rata: " + w + " zl");

const cenaKursuReact = 5000;      // const – cena z cennika się nie zmienia
const cenaKursuJs = 3000;
const liczbaRat = 10;             // const – w tym skrypcie stała; z formularza byłaby let
const kosztCalkowity = cenaKursuReact + cenaKursuJs;
const rata = kosztCalkowity / liczbaRat;
console.log("Koszt: " + kosztCalkowity + " zl, rata: " + rata + " zl");

// Kalkulator rat – dane wejściowe (lekcja 2: tylko zmienne i typy)
const cenaReact = 5000;        // number
const cenaJavaScript = 3000;   // number
const liczbaRat = 10;          // number
const miasto = "Warszawa";     // string

let reactWybrany = true;       // boolean – w lekcji 13 przyjdzie z checkbox.checked
let javaScriptWybrany = false; // boolean

console.log("Miasto: " + miasto + " (" + typeof miasto + ")");
console.log("Kurs React wybrany: " + reactWybrany + " (" + typeof reactWybrany + ")");

Test powtórkowy

var wynik;
console.log(wynik);

let cena = 100;
cena = 120;
console.log(cena);

let dane = 7;
dane = "siedem";
console.log(typeof dane);

console.log(rabat);
let rabat = 10;