Вивчай

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

У минулому уроці ми створювали змінні та зберігали в них значення. Але значення бувають різних типів — текст, числа, 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"текст", 'текст', `текст`Текст, імена, повідомлення
number42, 3.14, -5Числа, ціни, вік
booleantrue, falseТак/ні, увімкнено/вимкнено
nullnullНавмисно "порожнє"
undefinedundefinedНе задано

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.

Інфо

Корисні посилання: