Типи даних та оператори
У минулому уроці ми створювали змінні та зберігали в них значення. Але значення бувають різних типів — текст, числа, true/false. Розберемо кожен тип та оператори для роботи з ними.
Примітивні типи даних
JavaScript має 7 примітивних типів. Для початку нам потрібні 5:
string — рядок (текст)
const name = "Олексій"; // подвійні лапки
const city = 'Київ'; // одинарні лапки
const greeting = `Привіт!`; // зворотні лапки (backticks)
// Backticks дозволяють вставляти змінні:
const message = `Привіт, ${name}! Ти з ${city}.`;
console.log(message); // "Привіт, Олексій! Ти з Київ."
Template literals (зворотні лапки `) — найзручніший спосіб для рядків. ${...} дозволяє вставляти будь-які вирази прямо в текст. Використовуй їх за замовчуванням.
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 для всіх.
boolean — логічний
Тільки два значення: true або false:
const isLoggedIn = true;
const hasAccess = false;
// Результат порівняння — теж boolean:
console.log(5 > 3); // true
console.log(1 === 2); // false
null — навмисна відсутність
let selectedUser = null; // "ми знаємо, що тут нічого"
undefined — значення не задано
let result; // оголошено, але не задано
console.log(result); // undefined
| Тип | Приклад | Коли |
|---|---|---|
string | "текст", 'текст', `текст` | Текст, імена, повідомлення |
number | 42, 3.14, -5 | Числа, ціни, вік |
boolean | true, false | Так/ні, увімкнено/вимкнено |
null | null | Навмисно "порожнє" |
undefined | undefined | Не задано |
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" ← історичний баг JS!
typeof null повертає "object" — це відомий баг JavaScript з 1995 року, який вже не можна виправити (зламає існуючий код). Просто запам'ятай цю особливість.
Арифметичні оператори
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" (число стає рядком!)
Якщо один з операндів + — рядок, JS перетворює інший теж на рядок: "5" + 3 = "53" (не 8!). Це часта помилка. Для числової арифметики переконайся, що обидва операнди — числа.
Скорочені оператори
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 — неочевидно!
Завжди використовуй === (строге порівняння). == робить неявне перетворення типів, що призводить до неочевидних багів. Це одне з найважливіших правил JavaScript.
Логічні оператори
// && — І (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
Все інше — truthy (стає true).
Підсумок
- 5 примітивних типів: string, number, boolean, null, undefined
- typeof — перевірка типу (обережно з
typeof null) - Template literals:
`Привіт, ${name}!`— найзручніший спосіб для рядків ===— завжди використовуй строге порівняння (ніколи==)&&(І),||(АБО),!(НЕ) — логічні оператори- Falsy:
0,"",null,undefined,NaN,false
Що далі?
У наступному уроці вивчимо умовні конструкції — if/else, тернарний оператор та switch.
Корисні посилання:
- javascript.info: Типи даних — детально про кожен тип (українською)
- MDN: JavaScript Data Types — повна класифікація типів
- MDN: Equality comparisons — чому === краще за ==