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

Умови й цикли

Програма весь час вирішує й повторює: показати кнопку чи ні, яку мітку поставити задачі, пройтись по всіх рядках таблиці. Для рішень є умови, для повторень — цикли. У шаблонах Angular ти побачиш їх як @if, @switch і @for — і працюють вони рівно за тими самими правилами, що й тут.

if, else if, else

if виконує блок коду, лише якщо умова truthy — памʼятаєш вісім falsy-значень з першого уроку? else if перевіряє наступну умову, якщо попередня не спрацювала. else — запасний варіант, коли не спрацювало нічого.

const daysLeft = 2;

if (daysLeft < 0) {
  console.log('Прострочено');
} else if (daysLeft <= 3) {
  console.log('Горить');        // спрацює ця гілка
} else {
  console.log('Є час');
}

Перевірки йдуть згори вниз, і виконується перша гілка, що підійшла, — решта вже не перевіряються. Тому порядок важливий: якби daysLeft <= 3 стояло першим, прострочена задача з -5 теж потрапила б у «Горить».

Порівняння й логіка

Є нюанс, який постійно трапляється в коді: && і || повертають не true чи false, а одне з самих значень. a || b поверне a, якщо воно truthy, інакше — b. Тому так часто пишуть значення за замовчуванням:

const name = userName || 'Гість';    // імені немає — буде 'Гість'
const size = pageSize || 20;         // ⚠️ якщо pageSize = 0, теж буде 20

Другий рядок — пастка: 0 falsy, тож законний нуль теж підміниться. Для перевірки «чи є значення» існує окремий оператор ??: він реагує лише на null і undefined. Детально — в уроці про обʼєкти.

Тернарний оператор

Коли треба не виконати один із двох блоків, а вибрати одне з двох значень, є коротший запис: умова ? якщоТак : якщоНі.

const label = done ? 'Готово' : 'В роботі';

// те саме через if — довше
let label2;
if (done) {
  label2 = 'Готово';
} else {
  label2 = 'В роботі';
}

У шаблонах Angular він трапляється постійно: {{ done ? 'Готово' : 'В роботі' }}. Правило: тернарний — для простого вибору значення. Якщо всередині зʼявляється ще один тернарний, перепиши на if: вкладені тернарні читати важко.

switch: багато варіантів одного значення

let label;
switch (status) {
  case 'todo':
    label = 'Зробити';
    break;
  case 'in-progress':
    label = 'В роботі';
    break;
  case 'done':
    label = 'Готово';
    break;
  default:
    label = 'Невідомо';     // жоден case не підійшов
}

switch порівнює через ===. Найчастіша помилка — забутий break: без нього виконання «провалюється» в наступний case і йде далі, доки не зустріне break. У шаблонах Angular цього немає: @switch і @case не провалюються.

Цикли

Класичний for — коли знаєш, скільки разів повторювати:

for (let i = 1; i <= 3; i++) {
  console.log('Крок', i);
}
// Крок 1, Крок 2, Крок 3

Три частини в дужках: з чого почати (let i = 1), поки повторювати (i <= 3) і що робити після кожного кроку (i++ — збільшити на один).

for...of — коли треба пройтись по всіх елементах колекції. Рядок — теж колекція символів, а масиви (наступний урок) перебирають саме так:

for (const letter of 'Angular') {
  console.log(letter);      // A, n, g, u, l, a, r — по одному
}

while — коли наперед невідомо, скільки буде кроків: «повторюй, поки умова правдива».

let attempts = 0;
while (attempts < 3) {
  attempts++;
}

У будь-якому циклі break одразу виходить з циклу, а continue пропускає решту поточного кроку й переходить до наступного.

Для завдання знадобиться ще один оператор — залишок від ділення %. 7 % 2 — це 1: сім на два ділиться із залишком один. Тож число парне, коли n % 2 === 0.

Підсумок

• if / else if / else перевіряються згори вниз, спрацьовує перша гілка.
• Тернарний a ? b : c — щоб вибрати значення, switch — для багатьох варіантів, і не забувай break.
• || повертає перше truthy-значення — зручно, але підмінює нуль і порожній рядок.
• for — коли знаєш кількість кроків, for...of — щоб пройти колекцію, while — коли кроків наперед не знаєш.