Фундамент Ф1 · урок 1 з 12

Значення, типи й змінні

Будь-яка програма працює зі значеннями: кількість задач, назва звіту, «чи вибрано рядок», список користувачів. У JavaScript кожне значення має тип, і більшість «дивної» поведінки мови — чому '5' + 1 дає '51', а порожній масив вважається «правдою» — пояснюється саме типами. Це перший урок фундаменту: на ньому стоїть і TypeScript, і кожен шаблон Angular.

Змінна — це ярлик на значенні

Змінна — це імʼя, за яким програма знаходить значення. Уяви ярлик на коробці: на ярлику написано count, у коробці лежить 3. Коли пишеш count, JavaScript знаходить коробку з цим ярликом і бере те, що всередині.

let count = 3;           // let — значення можна буде замінити
count = count + 1;       // тепер 4

const title = 'Звіт';    // const — ярлик приклеєно назавжди
title = 'Інший звіт';    // ✗ TypeError: Assignment to constant variable

Правило на щодень: пиши const, а let — лише коли значення справді змінюватиметься (лічильник, проміжний результат). Так код читається легше: бачиш const — знаєш, що нижче ця змінна вже не зміниться.

Третє слово, var, ти зустрінеш у старому коді. Нового з ним не пиши: у нього заплутані правила видимості (про них — в уроці 7), і саме через них колись придумали let і const.

Імена змінних пишуть у стилі camelCase: перше слово з малої літери, кожне наступне — з великої: taskCount, isSelected, currentUser. Великі й малі літери різні: count і Count — дві різні змінні, і це джерело половини помилок «змінна не визначена».

Типи значень: їх небагато

Значень у JavaScript безліч, а видів — лише вісім. Сім із них прості, їх називають примітивами. Восьмий — обʼєкт, і з нього зроблено все складне: масиви, функції, дати.

Дізнатися тип допомагає оператор typeof. У нього дві історичні дивини, які варто просто запамʼятати: typeof null дає 'object' — це помилка ще з 1995 року, яку вже не виправити, — і масив теж 'object'. Для масивів є окрема перевірка Array.isArray().

Рядки: три види лапок

Одинарні '…' і подвійні "…" лапки однакові: у проєкті просто обирають одні й тримаються їх (в Angular зазвичай одинарні). Особливі треті — зворотні `…`. У них можна вставляти значення через ${…} і переносити рядки. Це шаблонні рядки, і ти користуватимешся ними постійно.

const done = 3;
const total = 5;

const a = 'Готово ' + done + ' з ' + total;   // склеювання плюсом — працює, але читається важко
const b = `Готово ${done} з ${total}`;         // те саме шаблонним рядком

Числа й перетворення типів

Тип number один на всі числа. Дробові числа компʼютер зберігає у двійковій системі, тому 0.1 + 0.2 дає 0.30000000000000004. Так у всіх мовах програмування, не лише в JavaScript. Гроші рахують у копійках, а для показу округлюють: (0.1 + 0.2).toFixed(2).

Головна пастка — неявне перетворення типів. Якщо в одній операції зустрілись різні типи, JavaScript мовчки перетворює один на інший, і правила тут не інтуїтивні:

Звідки це береться в житті: усе, що приходить із поля вводу, адреси сторінки чи localStorage, — рядок, навіть якщо там цифри. Перед арифметикою перетворюй явно: Number(value).

NaN (Not a Number) — значення-помилка, результат невдалої арифметики. Воно не дорівнює навіть самому собі (NaN === NaN — false), тому перевіряють його через Number.isNaN(x).

== проти ===

Для порівняння є два оператори. Подвійний == перед порівнянням перетворює типи за тими самими неочевидними правилами, тому 0 == '' дає true, і '1' == 1 теж true. Потрійний === нічого не перетворює: різні типи — одразу false.

Пиши завжди === і !==. Лінтер в Angular-проєкті однаково вимагатиме саме їх.

Truthy і falsy: що вважається «правдою»

В умові if (…) не обовʼязково стоїть true чи false: будь-яке значення JavaScript сам перетворить на «так» або «ні». Значень, що стають «ні» (їх називають falsy), рівно вісім — їх варто знати напамʼять:

false   0   -0   0n   ''   null   undefined   NaN

Усе інше — truthy, і тут пастки: рядок '0', рядок 'false', порожній масив [] і порожній обʼєкт {} — це «так». Boolean(x) показує, чим стане значення в умові.

У шаблонах Angular це трапляється щодня. @if (tasks.length) спрацює, коли задач більше нуля, бо 0 — falsy. А от @if (tasks) спрацює й на порожньому масиві: масив завжди truthy. Тому перевіряй довжину, а не сам масив.

undefined і null

Обидва означають «немає значення», але різними голосами. undefined каже сама мова: змінну оголосили без значення, в обʼєкта немає такої властивості, функція нічого не повернула. null пишеш ти, коли свідомо кажеш «тут порожньо»: користувач нічого не вибрав, задача ще без виконавця.

let selected;             // undefined — значення ще не задано
selected = null;          // null — «нічого не вибрано», сказано явно

const task = { title: 'Звіт' };
task.assignee;            // undefined — такої властивості немає

Як безпечно працювати з тим, чого може не бути (?. і ??), — в уроці про обʼєкти.

Підсумок

• const за замовчуванням, let — коли значення змінюється, var — ніколи.
• Сім простих типів і обʼєкт. typeof показує тип, з двома дивинами: null і масив.
• Різні типи в одній операції мовчки перетворюються — тому === і явний Number().
• Falsy рівно вісім: false, 0, -0, 0n, '', null, undefined, NaN. Решта — truthy, навіть [].