Łapka LogoŁapka Infa
🌐
INF.03

Zmienne i Typy Danych

var, let czy const? Jak JavaScript zapamiętuje liczby i teksty oraz dlaczego czasem wynik to NaN.

Zmienne i Typy Danych w JS

Pora wejść w świat logiki! Frontend z samego HTML i CSS wygląda ładnie, ale nic nie "robi". Javascript (JS) to silnik, który to wszystko napędza. Na egzaminach INF.03 JS pojawia się prawie zawsze przy obsłudze formularzy i przeliczaniu wyników.

Zmienne – Gdzie trzymamy dane?

Kiedyś (i pewnie na niektórych archaicznych kluczach odpowiedzi CKE) używano wyłącznie słowa var. Dziś to relikt przeszłości.

  1. let – Używamy dla zmiennych, które będą się zmieniać (np. punkty gracza w grze).
  2. const (Constant - stała) – Używamy, gdy wartość się nie zmieni (np. stawka VAT = 23%, uchwyt do przycisku w HTML).
  3. var – Używamy... w zasadzie wcale. (Chyba że w podręcznikach sprzed dekady).
let wynik = 10;
wynik = wynik + 5; // To zadziała! Wynik wynosi teraz 15.

const imie = "Kamil";
// imie = "Marek"; // BŁĄD! Nie można nadpisać stałej.

Typy Danych

JavaScript nie pyta Cię o to, czym jest dana zmienna – domyśla się sam (jest językiem dynamicznie typowanym).

  • Number (liczba): let wiek = 18; lub zmiennoprzecinkowe let cena = 9.99;
  • String (tekst): let miasto = "Warszawa"; (w cudzysłowach lub apostrofach).
  • Boolean (prawda/fałsz): let czyZdal = true;
  • Undefined (niezdefiniowany): let pusta; (zmienna istnieje, ale nie ma wartości).

Pułapka Konkatenacji 🪤

Co się stanie, gdy dodasz liczbę do tekstu? Przeglądarka zgłupieje i "zamieni" liczbę w tekst!

let a = 5;
let b = "10";
console.log(a + b); // Wynik to "510", a nie 15!

To nagminny problem na egzaminach CKE, gdzie pobierasz dane z formularza (który z natury zawsze oddaje tekst!) i próbujesz je zsumować. Rozwiązanie: Musisz przekonwertować tekst na liczbę: parseInt("10") lub parseFloat("10.5").

let a = 5;
let b = parseInt("10");
console.log(a + b); // Wynik to 15!

Ciekawostka: Jeśli spróbujesz pomnożyć tekst, JS spróbuje zrobić to po cichu: "10" * 5 rzuci... 50. Dlaczego tak się dzieje? Bo plus służy też do łączenia napisów, ale mnożenie nie ma takiego drugiego dna. Jeśli jednak spróbujesz pomnożyć "Kot" * 5, otrzymasz słynne NaN (Not a Number).