Умовні конструкції

JavaScript умовні конструкції — розвилка на стежці в осінньому лісі

У минулому уроці ми вивчили типи даних та оператори порівняння. Тепер навчимося приймати рішення в коді — виконувати різний код залежно від умов.

if — якщо

Найпростіша умова:

const age = 18;

if (age >= 18) {
  console.log("Доступ дозволено");
}

Код всередині { } виконається тільки якщо умова true.

if...else — якщо...інакше

const age = 15;

if (age >= 18) {
  console.log("Доступ дозволено");
} else {
  console.log("Доступ заборонено");
}
// → "Доступ заборонено"

if...else if...else — кілька умов

const score = 85;

if (score >= 90) {
  console.log("Відмінно");
} else if (score >= 70) {
  console.log("Добре");
} else if (score >= 50) {
  console.log("Задовільно");
} else {
  console.log("Незадовільно");
}
// → "Добре"

Перевірки йдуть зверху вниз. Як тільки одна умова true — виконується її блок, решта пропускаються.

Truthy та Falsy

JavaScript автоматично перетворює значення в boolean в умовах:

// Falsy — стають false:
if (0) { }           // не виконається
if ("") { }          // не виконається
if (null) { }        // не виконається
if (undefined) { }   // не виконається
if (NaN) { }         // не виконається
if (false) { }       // не виконається

// Truthy — стають true (все інше):
if (1) { }           // виконається
if ("text") { }      // виконається
if ([]) { }          // виконається (навіть порожній масив!)
if ({}) { }          // виконається (навіть порожній об'єкт!)

Практичне застосування

const userName = ""; // порожній рядок — falsy

if (userName) {
  console.log(`Привіт, ${userName}!`);
} else {
  console.log("Ім'я не вказано");
}
// → "Ім'я не вказано"

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

Скорочений if/else для простих умов:

// Синтаксис: умова ? значення_якщо_true : значення_якщо_false

const age = 20;
const status = age >= 18 ? "дорослий" : "неповнолітній";
console.log(status); // "дорослий"

// Замість:
let status2;
if (age >= 18) {
  status2 = "дорослий";
} else {
  status2 = "неповнолітній";
}

Логічні оператори в умовах

&& (І) — обидві умови true

const age = 25;
const hasTicket = true;

if (age >= 18 && hasTicket) {
  console.log("Ласкаво просимо на концерт!");
}

|| (АБО) — хоча б одна умова true

const isStudent = false;
const isTeacher = true;

if (isStudent || isTeacher) {
  console.log("Знижка 20%");
}

Комбінування

const age = 25;
const isMember = true;
const hasInvite = false;

if (age >= 18 && (isMember || hasInvite)) {
  console.log("Доступ дозволено");
}

switch — вибір з варіантів

Коли потрібно порівняти одне значення з кількома варіантами:

const day = "понеділок";

switch (day) {
  case "понеділок":
  case "вівторок":
  case "середа":
  case "четвер":
  case "п'ятниця":
    console.log("Робочий день");
    break;
  case "субота":
  case "неділя":
    console.log("Вихідний!");
    break;
  default:
    console.log("Невідомий день");
}

Коли switch краще за if/else:

• Порівнюєш одне значення з кількома конкретними варіантами
• Є більше ніж 3-4 варіанти

Практика

// 1. Визначення пори року
const month = 3;
let season;

if (month >= 3 && month <= 5) {
  season = "весна";
} else if (month >= 6 && month <= 8) {
  season = "літо";
} else if (month >= 9 && month <= 11) {
  season = "осінь";
} else {
  season = "зима";
}
console.log(`Місяць ${month} — це ${season}`);

// 2. Перевірка віку з тернарним оператором
const userAge = 16;
const canDrive = userAge >= 18 ? "може водити" : "ще зарано";
console.log(canDrive);

// 3. Перевірка доступу
const role = "editor";
const isActive = true;

if (role === "admin") {
  console.log("Повний доступ");
} else if (role === "editor" && isActive) {
  console.log("Доступ до редагування");
} else {
  console.log("Тільки перегляд");
}

Підсумок

• if/else — основна умовна конструкція
• else if — для кількох умов (перевіряються зверху вниз)
• Тернарний оператор — умова ? true : false (для простих випадків)
• Falsy: 0, "", null, undefined, NaN, false
• && — обидві умови true, || — хоча б одна
• switch — коли одне значення порівнюється з кількома варіантами

Що далі?

У наступному уроці вивчимо цикли — як повторювати дії кілька разів (for, while).