Типи даних та оператори

JavaScript типи даних — різні речовини в скляних банках як різні типи значень

У минулому уроці ми створювали змінні та зберігали в них значення. Але значення бувають різних типів — текст, числа, true/false. Розберемо кожен тип та оператори для роботи з ними.

Примітивні типи даних

JavaScript має 7 примітивних типів. П'ять з них ти будеш використовувати щодня, ще два — зустрінеш рідше, але знати про них варто.

string — рядок (текст)

const name = "Олексій";        // подвійні лапки
const city = 'Київ';           // одинарні лапки
const greeting = `Привіт!`;    // зворотні лапки (backticks)

// Backticks дозволяють вставляти змінні:
const message = `Привіт, ${name}! Ти з ${city}.`;
console.log(message); // "Привіт, Олексій! Ти з Київ."

number — число

const age = 25;           // ціле
const price = 99.99;      // дробове
const negative = -10;     // від'ємне
const billion = 1e9;      // 1000000000

// Спеціальні числа:
console.log(1 / 0);       // Infinity
console.log("text" * 2);  // NaN (Not a Number)

В JS немає окремого типу для цілих та дробових чисел — number для всіх. Максимальне безпечне ціле число: 9007199254740991 (приблизно 9 квадрильйонів). Для більших чисел є bigint (див. нижче).

boolean — логічний

Тільки два значення: true або false:

const isLoggedIn = true;
const hasAccess = false;

// Результат порівняння — теж boolean:
console.log(5 > 3);   // true
console.log(1 === 2);  // false

undefined та null — "порожні" типи

Ці два типи часто плутають, бо обидва означають "нічого". Але вони відрізняються хто і чому поставив це "нічого".

undefined — JavaScript каже: "тут нічого, бо ніхто не задав значення":

let result;              // оголошено, але значення не задано
console.log(result);     // undefined

function greet() {}      // функція без return
console.log(greet());    // undefined

const user = { name: "Олексій" };
console.log(user.age);   // undefined — такої властивості немає

null — програміст каже: "тут навмисно нічого":

let selectedUser = null;  // "зараз нікого не обрано"
let searchResult = null;  // "пошук завершився, нічого не знайдено"

Уяви порожню полицю в бібліотеці:

• undefined — полиця порожня, бо на неї ще нічого не ставили
• null — полиця порожня, бо бібліотекар навмисно забрав книгу

// undefined з'являється автоматично (JS ставить сам)
let basket;
console.log(basket);     // undefined — ще нічого не поклали

// null присвоюєш свідомо (ти вирішив)
basket = null;
console.log(basket);     // null — кошик навмисно очищений

bigint — дуже великі числа

number має межу точності: після 9007199254740991 числа починають "округлятися". Для точної роботи з величезними числами є bigint:

// number втрачає точність
console.log(9007199254740991 + 2); // 9007199254740992 — неправильно!

// bigint — точний
console.log(9007199254740991n + 2n); // 9007199254740993n — правильно!

Суфікс n позначає BigInt. Потрібен рідко — для криптографії, фінансових розрахунків з великими сумами, або роботи з ID з бази даних.

symbol — унікальний ідентифікатор

Symbol створює значення, яке гарантовано не дорівнює нічому іншому:

const id1 = Symbol("id");
const id2 = Symbol("id");

console.log(id1 === id2); // false — кожен Symbol унікальний!

Використовується в бібліотеках та фреймворках для створення "прихованих" властивостей об'єктів. На початку тобі не знадобиться, але знати що він існує — корисно.

Зведена таблиця

А що крім примітивів?

Окрім 7 примітивних типів, в JavaScript є посилальні типи (reference types):

• object — колекція пар "ключ: значення" ({ name: "Олексій", age: 25 })
• array — впорядкований список ([1, 2, 3]) — технічно теж об'єкт
• function — блок коду, який можна викликати

Головна різниця: примітиви порівнюються за значенням, а об'єкти — за посиланням (адресою в пам'яті):

// Примітиви — порівнюються за значенням
console.log("Київ" === "Київ"); // true — однакові значення

// Об'єкти — порівнюються за посиланням
console.log([1, 2] === [1, 2]); // false — два різних масиви!
console.log({} === {});          // false — два різних об'єкти!

Два масиви з однаковим вмістом — це все одно два різних об'єкти в пам'яті, як два однакових будинки на різних вулицях.

Детально про масиви, об'єкти та функції — у наступних уроках цього блоку. А про те, чому ця різниця критично важлива — в уроці про мутабельність.

typeof — перевірка типу

console.log(typeof "hello");     // "string"
console.log(typeof 42);          // "number"
console.log(typeof true);        // "boolean"
console.log(typeof undefined);   // "undefined"
console.log(typeof null);        // "object" ← історичний баг!
console.log(typeof 123n);        // "bigint"
console.log(typeof Symbol("x")); // "symbol"

null vs undefined у порівняннях

console.log(null == undefined);  // true  — JS вважає їх "схожими"
console.log(null === undefined); // false — але це різні типи

console.log(null == 0);         // false — null "рівний" тільки undefined
console.log(undefined == 0);    // false

Арифметичні оператори

console.log(10 + 3);   // 13  — додавання
console.log(10 - 3);   // 7   — віднімання
console.log(10 * 3);   // 30  — множення
console.log(10 / 3);   // 3.333... — ділення
console.log(10 % 3);   // 1   — залишок від ділення
console.log(2 ** 3);   // 8   — степінь (2³)

Конкатенація рядків

Оператор + з рядками з'єднує їх:

console.log("Hello" + " " + "World"); // "Hello World"
console.log("Вік: " + 25);            // "Вік: 25" (число стає рядком!)

Скорочені оператори

let count = 10;
count += 5;    // count = count + 5 → 15
count -= 3;    // count = count - 3 → 12
count *= 2;    // count = count * 2 → 24
count /= 4;    // count = count / 4 → 6

count++;       // count = count + 1 → 7
count--;       // count = count - 1 → 6

Оператори порівняння

Повертають true або false:

console.log(5 > 3);     // true
console.log(5 < 3);     // false
console.log(5 >= 5);    // true
console.log(5 <= 4);    // false
console.log(5 === 5);   // true  — строге порівняння
console.log(5 !== 3);   // true  — строга нерівність

=== vs == (строге vs нестроге)

console.log(5 === "5");  // false — різні типи (number vs string)
console.log(5 == "5");   // true  — JS конвертує і порівнює значення

console.log(0 === false); // false
console.log(0 == false);  // true  — неочевидно!

Логічні оператори

// && — І (AND): обидва true → true
console.log(true && true);    // true
console.log(true && false);   // false

// || — АБО (OR): хоча б один true → true
console.log(true || false);   // true
console.log(false || false);  // false

// ! — НЕ (NOT): інвертує
console.log(!true);           // false
console.log(!false);          // true

Практичний приклад

const age = 25;
const hasTicket = true;

// Можна на концерт?
const canEnter = age >= 18 && hasTicket;
console.log(canEnter); // true

// Знижка для студентів або пенсіонерів?
const isStudent = true;
const isPensioner = false;
const hasDiscount = isStudent || isPensioner;
console.log(hasDiscount); // true

Перетворення типів

// Рядок → Число
console.log(Number("42"));     // 42
console.log(Number("hello"));  // NaN
console.log(parseInt("42px")); // 42 — ігнорує текст після числа

// Число → Рядок
console.log(String(42));       // "42"
console.log((42).toString());  // "42"

// Що завгодно → Boolean
console.log(Boolean(0));       // false
console.log(Boolean(""));      // false
console.log(Boolean(null));    // false
console.log(Boolean(1));       // true
console.log(Boolean("text"));  // true

Falsy значення (стають false):

0, "" (порожній рядок), null, undefined, NaN, false, 0n (BigInt zero)

Все інше — truthy (стає true).

Підсумок

• 7 примітивних типів: string, number, boolean, undefined, null, bigint, symbol — вони імутабельні (їх значення не можна змінити, лише створити нове)
• undefined — значення не задано (JS ставить автоматично). null — навмисна відсутність (ставиш ти свідомо)
• typeof — перевірка типу (обережно: typeof null повертає "object")
• Template literals: `Привіт, ${name}!` — найзручніший спосіб для рядків
• === — завжди використовуй строге порівняння (ніколи ==)
• && (І), || (АБО), ! (НЕ) — логічні оператори
• Falsy: 0, "", null, undefined, NaN, false

Що далі?

У наступному уроці вивчимо умовні конструкції — if/else, тернарний оператор та switch.