Utilizziamo i cookie per migliorare la tua esperienza sul sito
CodeWorlds

Podstawowe typy danych (string, number, boolean, null, undefined)

Jak w Parku Jurajskim mamy różne gatunki dinozaurów, każdy z unikalnymi cechami i zachowaniami, tak w JavaScript mamy różne typy danych, z których każdy służy konkretnym celom. Zrozumienie tych typów jest kluczowe dla skutecznego programowania – to jak znajomość różnic między Velociraptorem a Triceratopsem dla pracownika parku.

Typy pierwotne (primitive types)

JavaScript posiada pięć głównych typów pierwotnych: string, number, boolean, null i undefined. Są to podstawowe "gatunki" w naszym cyfrowym parku.

1. String - teksty

Typ

string
reprezentuje tekst - sekwencję znaków ujętą w pojedyncze (
'
), podwójne (
"
) lub grawisowe (
 
) cudzysłowy. To jak tabliczki informacyjne w Parku Jurajskim, które przekazują odwiedzającym ważne komunikaty.

1// Różne sposoby deklarowania stringów
2const dinoName = "Tyrannosaurus Rex";
3const warningSign = 'Uwaga! Nie zbliżaj się do ogrodzenia!';
4const locationInfo = `Znajdujesz się w sektorze B4`;
5
6// Stringi mogą zawierać specjalne znaki
7const multilineWarning = "Uwaga!
8Nie karm dinozaurów!";  // 
9 oznacza nową linię
10
11// Długość stringa (liczba znaków)
12const nameLength = dinoName.length;  // 16
13
14// Łączenie stringów (konkatenacja)
15const fullWarning = warningSign + " " + dinoName + " jest niebezpieczny!";
16
17// Template literals (szablony tekstowe) - tylko z grawisami (``)
18const modernWarning = `${warningSign} ${dinoName} jest niebezpieczny!`;

Stringi są jak uniwersalny język komunikacji w parku - służą do wyświetlania informacji, wysyłania wiadomości i etykietowania zasobów.

Metody stringów

Stringi w JavaScript posiadają wbudowane metody, które pozwalają na ich manipulację, podobnie jak pracownicy parku mają narzędzia do zarządzania ekspozycjami:

1const species = "Velociraptor";
2
3// Zmiana wielkości liter
4const upperCase = species.toUpperCase();  // "VELOCIRAPTOR"
5const lowerCase = species.toLowerCase();  // "velociraptor"
6
7// Wyszukiwanie w stringu
8const hasRaptor = species.includes("raptor");  // true
9const position = species.indexOf("raptor");    // 5 (indeksy zaczynają się od 0)
10const startsWith = species.startsWith("Velo"); // true
11const endsWith = species.endsWith("tor");      // true
12
13// Wycinanie fragmentów
14const firstFour = species.substring(0, 4);     // "Velo"
15const lastSix = species.slice(-6);             // "raptor"
16
17// Zamiana fragmentów
18const newSpecies = species.replace("Veloci", "Micro"); // "Microraptor"
19
20// Podział stringa na tablicę
21const announcement = "Uwaga! Wszyscy goście proszeni są o ewakuację!";
22const words = announcement.split(" ");  // ["Uwaga!", "Wszyscy", "goście", ...]

2. Number - liczby

Typ

number
reprezentuje zarówno liczby całkowite, jak i zmiennoprzecinkowe (ułamki dziesiętne). W przeciwieństwie do wielu innych języków programowania, JavaScript nie rozróżnia tych dwóch rodzajów - wszystkie są po prostu
number
.

To jak system numeryczny w parku używany do wszystkiego - od liczenia dinozaurów po mierzenie ich wagi czy wysokości.

1// Liczby całkowite
2const dinoCount = 37;
3const parkSectors = 12;
4
5// Liczby zmiennoprzecinkowe (ułamki dziesiętne)
6const trexHeight = 5.6;  // metry
7const raptorSpeed = 38.5;  // km/h
8
9// Notacja naukowa
10const atomSize = 1.5e-10;  // 0.00000000015
11const dinosaurCellCount = 3.2e12;  // 3,200,000,000,000
12
13// Nieskończoność i NaN (Not a Number)
14const infinity = Infinity;  // Wartość nieskończona
15const negInfinity = -Infinity;  // Wartość ujemnie nieskończona
16const notANumber = NaN;  // Wynik nieprawidłowej operacji matematycznej, np. 0/0

Operacje na liczbach

Liczby w JavaScript wspierają wszystkie standardowe operacje matematyczne, podobnie jak naukowcy w parku przeprowadzają różne obliczenia:

1// Podstawowe operacje arytmetyczne
2const sum = 10 + 5;    // 15 (dodawanie)
3const diff = 10 - 5;   // 5 (odejmowanie)
4const product = 10 * 5;  // 50 (mnożenie)
5const quotient = 10 / 5;  // 2 (dzielenie)
6const remainder = 10 % 3;  // 1 (modulo - reszta z dzielenia)
7const power = 10 ** 2;  // 100 (potęgowanie - 10 do potęgi 2)
8
9// Obiekt Math do zaawansowanych operacji
10const roundedHeight = Math.round(trexHeight);  // 6 (zaokrąglenie)
11const ceilingHeight = Math.ceil(trexHeight);   // 6 (zaokrąglenie w górę)
12const floorHeight = Math.floor(trexHeight);    // 5 (zaokrąglenie w dół)
13const randomNumber = Math.random();   // Losowa liczba między 0 a 1
14const maxSpeed = Math.max(42, 35, 38, 40);  // 42 (najwyższa wartość)
15const sqrtValue = Math.sqrt(25);  // 5 (pierwiastek kwadratowy)

Uwaga na dokładność liczb zmiennoprzecinkowych

W JavaScript (i wielu innych językach) liczby zmiennoprzecinkowe mogą prowadzić do nieoczekiwanych wyników, podobnie jak nieprzewidziane zachowania dinozaurów:

1const precisionIssue = 0.1 + 0.2;  // Oczekujemy 0.3, ale dostajemy 0.30000000000000004
2
3// Rozwiązanie - użycie zaokrąglenia lub stałej przeskalowanej:
4const fixedResult = Number((0.1 + 0.2).toFixed(1));  // 0.3
5const scaledResult = (0.1 * 10 + 0.2 * 10) / 10;  // 0.3

3. Boolean - wartości logiczne

Typ

boolean
ma tylko dwie możliwe wartości:
true
(prawda) lub
false
(fałsz). To jak system alarmowy w parku, który może być włączony lub wyłączony.

1// Podstawowe wartości boolean
2const fenceActive = true;
3const parkClosed = false;
4
5// Wyrażenia logiczne zwracają boolean
6const isTRexDangerous = true;
7const isParkOpen = !parkClosed;  // true (negacja)
8const isSafeToEnter = fenceActive && isParkOpen;  // true (AND - i)
9const needsAttention = !fenceActive || parkClosed;  // false (OR - lub)

Wartości boolean są kluczowe dla podejmowania decyzji w programie - podobnie jak systemy bezpieczeństwa w parku, które decydują, czy otworzyć bramę, uruchomić alarm czy ewakuować sektor.

1// Użycie boolean w instrukcjach warunkowych
2if (fenceActive) {
3    console.log("Zagroda zabezpieczona");
4} else {
5    console.log("UWAGA! Zagroda niezabezpieczona!");
6    activateEmergencyProtocol();
7}
8
9// Operatory porównania zwracają boolean
10const isDangerousSpecies = dinosaurType === "Velociraptor" || dinosaurType === "T-Rex";
11const isHerbivore = dinosaurDiet !== "mięsożerca";
12const isTooBig = dinosaurHeight > 3;
13const isInRange = visitorDistance >= 50;

4. null - celowy brak wartości

Wartość

null
reprezentuje celowy brak wartości - jest to jawne wskazanie, że zmienna nie zawiera żadnej wartości. To jak pusta zagroda w parku, specjalnie przygotowana, ale aktualnie bez dinozaura.

1// Zmienna z wartością null
2let selectedDinosaur = null;  // Aktualnie żaden dinozaur nie jest wybrany
3
4// Null jest często używany jako wartość początkowa
5let scannedChip = null;  // Przed skanowaniem chip nie zawiera danych
6
7// Sprawdzanie, czy wartość to null
8if (selectedDinosaur === null) {
9    console.log("Żaden dinozaur nie został wybrany");
10}
11
12// Null jest wartością falsy
13if (!selectedDinosaur) {
14    console.log("To się również wyświetli dla null");
15}

5. undefined - niezdefiniowana wartość

Wartość

undefined
oznacza, że zmienna została zadeklarowana, ale nie została jej przypisana żadna wartość. To jak niezagospodarowana działka w parku - istnieje, ale nie określono jeszcze, co na niej będzie.

1// Zadeklarowana, ale niezainicjalizowana zmienna
2let newDinosaur;  // automatycznie ma wartość undefined
3
4// Funkcja bez jawnego return zwraca undefined
5function checkEnclosure() {
6    // Brak instrukcji return
7}
8const result = checkEnclosure();  // result ma wartość undefined
9
10// Sprawdzanie, czy wartość to undefined
11if (newDinosaur === undefined) {
12    console.log("Dinozaur nie został jeszcze określony");
13}
14
15// undefined jest wartością falsy
16if (!newDinosaur) {
17    console.log("To się również wyświetli dla undefined");
18}

Różnice między null i undefined

Choć oba typy reprezentują "brak wartości", istnieją między nimi ważne różnice:

  • null
    to celowy brak wartości (jak pusta zagroda)
  • undefined
    to niezamierzony brak wartości (jak nieprzydzielone miejsce)
1// typeof pokazuje różnicę
2typeof null;        // "object" (to jest historyczny błąd w JavaScript)
3typeof undefined;   // "undefined"
4
5// W kontekście równości
6null == undefined;  // true (równość nieścisła)
7null === undefined; // false (równość ścisła)

Symbol i BigInt - nowsze typy pierwotne

Od ES6 (ES2015) JavaScript posiada dwa dodatkowe typy pierwotne: Symbol i BigInt.

Symbol - unikalny identyfikator

1// Tworzenie unikalnych identyfikatorów
2const dinoId = Symbol('dino-id');
3const enclosureId = Symbol('enclosure-id');
4
5// Każdy Symbol jest unikalny
6const id1 = Symbol('id');
7const id2 = Symbol('id');
8console.log(id1 === id2);  // false, choć mają ten sam opis

BigInt - duże liczby całkowite

1// Tworzenie BigInt przez dodanie 'n' na końcu liczby lub funkcję BigInt()
2const dinoGenomeSize = 9007199254740991n;
3const sameBigInt = BigInt(9007199254740991);
4
5// BigInt może reprezentować liczby większe niż Number.MAX_SAFE_INTEGER
6console.log(Number.MAX_SAFE_INTEGER);  // 9007199254740991

Sprawdzanie typu

Aby zidentyfikować typ danej wartości (podobnie jak identyfikacja gatunku dinozaura), możemy użyć operatora

typeof
:

1typeof "Triceratops";  // "string"
2typeof 42;            // "number"
3typeof true;          // "boolean"
4typeof null;          // "object" (uwaga: to jest historyczny błąd w JavaScript)
5typeof undefined;     // "undefined"
6typeof Symbol();      // "symbol"
7typeof 42n;           // "bigint"
8
9// Dla funkcji i obiektów
10typeof function() {};  // "function"
11typeof {};             // "object"
12typeof [];             // "object" (tablice są obiektami w JavaScript)

Konwersja typów (type coercion)

JavaScript automatycznie konwertuje typy podczas operacji, co czasem może prowadzić do nieoczekiwanych rezultatów - podobnie jak nieoczekiwane zachowanie hybrydowych dinozaurów w parku.

1// Automatyczna konwersja na string
2"Dinozaur " + 5;  // "Dinozaur 5" (liczba 5 została skonwertowana na string)
3
4// Automatyczna konwersja na number
5"5" - 2;  // 3 (string "5" został skonwertowany na liczbę)
6"5" * 2;  // 10 (string "5" został skonwertowany na liczbę)
7
8// Automatyczna konwersja na boolean
9if ("Dinozaur") {
10    // Ten kod się wykona, bo niepusty string jest traktowany jako true
11}
12
13if (0) {
14    // Ten kod się NIE wykona, bo 0 jest traktowane jako false
15}

Wartości falsy i truthy

W JavaScript każda wartość może być skonwertowana na boolean. Wartości automatycznie konwertowane na

false
nazywamy "falsy", a te konwertowane na
true
- "truthy".

Wartości falsy:

  • false
  • 0
  • ""
    (pusty string)
  • null
  • undefined
  • NaN

Wszystkie inne wartości są truthy, w tym:

  • true
  • Każda liczba inna niż 0 (włącznie z ujemnymi i ułamkami)
  • Każdy niepusty string
  • Każdy obiekt, tablica i funkcja
1// Przykłady konwersji na boolean
2Boolean(0);        // false
3Boolean("");       // false
4Boolean(null);     // false
5Boolean(undefined);// false
6Boolean(NaN);      // false
7
8Boolean(1);        // true
9Boolean("text");   // true
10Boolean([]);       // true (pusta tablica jest truthy)
11Boolean({});       // true (pusty obiekt jest truthy)

Jawna konwersja typów

Aby uniknąć nieoczekiwanych rezultatów, zaleca się jawne konwertowanie typów - podobnie jak w Parku Jurajskim zawsze lepiej jest mieć pełną kontrolę nad dinozaurami:

1// Konwersja na string
2String(42);           // "42"
3(42).toString();      // "42"
442 + "";              // "42" (używa niejawnej konwersji)
5
6// Konwersja na number
7Number("42");         // 42
8parseInt("42", 10);   // 42 (druga liczba to system liczbowy, np. 10 dla dziesiętnego)
9parseFloat("42.5");   // 42.5
10+"42";                // 42 (używa niejawnej konwersji)
11
12// Konwersja na boolean
13Boolean(1);           // true
14Boolean(0);           // false
15!!"wartość";          // true (podwójna negacja)

Bezpieczne sprawdzanie typów

W rzeczywistych aplikacjach, podobnie jak w protokołach bezpieczeństwa parku, warto stosować rygorystyczne sprawdzanie typów:

1// Sprawdzanie, czy zmienna jest stringiem
2function isString(value) {
3    return typeof value === 'string' || value instanceof String;
4}
5
6// Sprawdzanie, czy zmienna jest liczbą (z dodatkowym sprawdzeniem NaN)
7function isNumber(value) {
8    return typeof value === 'number' && !isNaN(value);
9}
10
11// Sprawdzanie, czy zmienna jest boolean
12function isBoolean(value) {
13    return typeof value === 'boolean';
14}
15
16// Sprawdzanie, czy zmienna ma wartość null
17function isNull(value) {
18    return value === null;
19}
20
21// Sprawdzanie, czy zmienna ma wartość undefined
22function isUndefined(value) {
23    return typeof value === 'undefined';
24}

Praktyczny przykład: System inwentaryzacji dinozaurów

Poniższy przykład ilustruje użycie różnych typów danych w kompleksowym systemie:

1// Stałe konfiguracyjne
2const PARK_NAME = "Jurassic Park";
3const MAX_CAPACITY = 50;
4const SECURITY_LEVELS = {
5    LOW: 1,
6    MEDIUM: 2,
7    HIGH: 3,
8    CRITICAL: 4
9};
10
11// System inwentaryzacji dinozaurów
12function processDinosaurData(dinoId, name, species, height, isDangerous) {
13    // Sprawdzenie typów danych
14    if (typeof dinoId !== 'number' || !Number.isInteger(dinoId) || dinoId <= 0) {
15        return "Błąd: Nieprawidłowy ID dinozaura";
16    }
17    
18    if (typeof name !== 'string' || name.trim() === '') {
19        return "Błąd: Nieprawidłowa nazwa dinozaura";
20    }
21    
22    if (typeof height !== 'number' || height <= 0) {
23        return "Błąd: Nieprawidłowa wysokość dinozaura";
24    }
25    
26    if (typeof isDangerous !== 'boolean') {
27        return "Błąd: Parametr niebezpieczeństwa musi być typu boolean";
28    }
29    
30    // Przetwarzanie danych
31    let securityLevel = null;
32    
33    if (isDangerous) {
34        securityLevel = height > 3 ? SECURITY_LEVELS.CRITICAL : SECURITY_LEVELS.HIGH;
35    } else {
36        securityLevel = height > 5 ? SECURITY_LEVELS.MEDIUM : SECURITY_LEVELS.LOW;
37    }
38    
39    // Przygotowanie raportu dinozaura
40    const dinoRecord = {
41        id: dinoId,
42        name: name,
43        species: species || "Nieznany", // Zabezpieczenie przed undefined
44        height: height,
45        dangerous: isDangerous,
46        securityLevel: securityLevel,
47        enclosureType: getEnclosureType(securityLevel),
48        lastUpdated: new Date().toISOString()
49    };
50    
51    // Zwracamy raport
52    return dinoRecord;
53}
54
55// Funkcja pomocnicza
56function getEnclosureType(securityLevel) {
57    switch(securityLevel) {
58        case SECURITY_LEVELS.LOW:
59            return "Otwarty wybieg";
60        case SECURITY_LEVELS.MEDIUM:
61            return "Standardowe ogrodzenie";
62        case SECURITY_LEVELS.HIGH:
63            return "Wzmocnione ogrodzenie z monitoringiem";
64        case SECURITY_LEVELS.CRITICAL:
65            return "Izolowana zagroda wysokiego bezpieczeństwa";
66        default:
67            return "Nieokreślony";
68    }
69}
70
71// Przykład użycia
72const trexData = processDinosaurData(
73    1, 
74    "Rexy", 
75    "Tyrannosaurus Rex", 
76    5.6, 
77    true
78);
79
80console.log(trexData);

Podsumowanie

  1. String - reprezentuje tekst

    • Jak tabliczki informacyjne w parku
    • Ujęty w
      '
      ,
      "
      lub
       
    • Posiada wiele wbudowanych metod (np.
      toUpperCase()
      ,
      indexOf()
      )
  2. Number - reprezentuje liczby całkowite i zmiennoprzecinkowe

    • Jak system numeryczny w parku
    • Obsługuje wszystkie standardowe operacje matematyczne
    • Należy uważać na precyzję liczb zmiennoprzecinkowych
  3. Boolean - wartości logiczne

    true
    lub
    false

    • Jak system alarmowy (włączony/wyłączony)
    • Podstawa dla podejmowania decyzji (instrukcje warunkowe)
    • Powstaje też w wyniku operacji porównania
  4. null - celowy brak wartości

    • Jak pusta, przygotowana zagroda
    • Ustawiana jawnie przez programistę
    • Reprezentuje "nic" lub "nieznane"
  5. undefined - niezdefiniowana wartość

    • Jak nieprzydzielone jeszcze miejsce w parku
    • Pojawia się automatycznie dla niezainicjalizowanych zmiennych
    • Również jako domyślny wynik funkcji bez
      return

Zrozumienie typów danych w JavaScript jest fundamentem skutecznego programowania - podobnie jak znajomość różnych gatunków dinozaurów jest kluczowa dla pracowników Parku Jurajskiego. Każdy typ ma swoje zastosowania, ograniczenia i zachowania, które trzeba znać, aby uniknąć nieoczekiwanych "incydentów" w kodzie!

W następnej lekcji omówimy konwersję typów i operacje na typach danych - to jak nauczyć się bezpiecznej i efektywnej pracy z różnymi gatunkami dinozaurów w parku.

Vai a CodeWorlds