Умовні оператори, цикли

17.07.2025
| Коментарів немає

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

  • false
  • undefined
  • null
  • NaN
  • 0
  • 0n
  • ""
if (condition) {
	instruction
}

Інструкція if(...) обчислює умову в дужках як true або false. Це може бути просте порівняння з використанням операторів порівняння, логічних операторів або будь-якого іншого допустимого виразу, який буде перетворено на булеве значення і, якщо результат умови true, виконує інструкцію вкладену у фігурні дужки {}, що йде за оператором if. Вона може містити будь-який валідний код, включаючи привласнення, виклики функцій, цикли та багато іншого.

Оператор if можна розширити необов’язковим блоком else. Блок else дозволяє вказати альтернативний блок коду, який буде виконаний, якщо умова виявиться хибною і дозволяє обробляти хибні умови, забезпечуючи різні шляхи виконання залежно від оцінки умови.

if (condition) {
	instructionA
} else {
	instructionB
}

При необхідності if…else можна розширити ще одним оператором if, який дозволяє послідовно перевіряти кілька умов та виконувати різні блоки коду залежно від результату кожної умови.

if (condition) {
	instructionA
} else if {
	instructionB
} else {
	instructionN
}

Вкладені умови if…else

Вкладені умови — це конструкція, коли один if-оператор розташований всередині іншого. Вони дозволяють вам структурувати складні умови та виконувати код в залежності від кількох умов.

Ось приклад вкладеного if в JavaScript:

let x = 10;
let y = 5;

if (x > 5) {
  console.log("x більше за 5");

  if (y > 2) {
    console.log("y більше за 2");
  } else {
    console.log("y менше або рівне 2");
  }
} else {
  console.log("x менше або рівне 5");
}

У цьому прикладі перевіряється, чи x більше 5. Якщо це правда, виконується перший блок коду, включаючи ще один if. В цьому внутрішньому if перевіряється, чи y більше 2, і відповідно виводиться відповідне повідомлення.

Вираз “якщо вам потрібно більше 3 рівнів вкладення, ви вже облажались і повинні виправити свій програмний код” часто приписується Лінусу Торвальдсу, творцеві Linux. Це висловлює важливість написання чистого, читабельного та підтримуваного коду.

Зайва кількість вкладених рівнів може ускладнювати розуміння та підтримку коду. Це може свідчити про те, що код стає занадто складним або що є потреба в рефакторингу для розбиття логіки на менші та більш керовані частини.

Ось кілька причин, чому рекомендується обмежувати рівні вкладення:

  1. Читабельність: Код з глибоким вкладенням може бути важким для читання та розуміння. Важко слідкувати за логікою.
  2. Підтримка: Глибоко вкладений код часто свідчить про те, що функція або блок коду робить занадто багато роботи. Розбиття складної логіки на менші функції покращує підтримку.
  3. Відлагодження: Відлагодження стає складнішим в глибоко вкладеному коді через ускладнену ідентифікацію проблем.

Ось приклад коду із зайвим вкладенням:

if (умова1) {
  if (умова2) {
    if (умова3) {
      // ... код
    } else {
      // ... код
    }
  } else {
    // ... код
  }
} else {
  // ... код
}

Версія після рефакторингу:

if (умова1 && умова2 && умова3) {
  // ... код
} else if (умова1 && умова2) {
  // ... код
} else if (умова1) {
  // ... код
} else {
  // ... код
}

Версія після рефакторингу зменшила рівні вкладення, спростивши логіку і роблячи код більш зрозумілим та підтримуваним.

Хоча вкладені if можуть бути потрібні для складних логік, їхнє надмірне використання може призвести до погіршення читабельності коду. В таких випадках розглядайте можливість використання логічних операторів (&&, ||) та блоків else if, щоб спростити ваш код та зробити його більш зрозумілим.

Проте на практиці необхідність в глибині вкладеності, більшої, ніж декілька рівнів, виникає досить рідко, оскільки збільшення глибини вкладеності швидко заплутує програму. Якщо вам потрібна додаткова вкладеність, то потрібно переглянути підхід до цього блоку коду.

Використання тернарного оператора

За допомогою тернарного оператора можна здійснювати присвоєння значення змінній в залежності від умови. Ми це можемо зробити за допомогою конструкції if…else

const age = 20;
let accessAllowed;

if (age > 18) {
  accessAllowed = 'allow';
} else {
  accessAllowed = 'don\'t allow';
}

За допомогою тернарного оператора це можна зробити в більш короткій і простій формі.

const accessAllowed = age > 18 ? 'allow' : 'don\'t allow';

Спочатку обчислюється умова age > 18, якщо вона є правдивою, тоді повертається allow, інакше – don’t allow.

Інструкція switch

switch — це конструкція, яка надає альтернативний спосіб керування потоком виконання програми на основі значення виразу. Вона дає змогу порівнювати вираз із кількома різними варіантами та виконувати відповідний код залежно від того, який варіант збігся з виразом. Синтаксис switch має такий вигляд:

switch (expression) {
	case value1:
		// The code to be executed if the expression is equal to value1
		break;
	case value2:
		// The code that will be executed if the expression equals value2
		break;
	default:
		// Code that will be executed if none of the values match
}

Як це працює? expression обчислюється за тим самим алгоритмом, що й ===, потім іде пошук збігів між виразом і значеннями в блоках case. Щойно збіг знайдено, виконується код усередині відповідного блоку case, і виконання триває до кінця switch або до зустрічі оператора break. Якщо жоден із блоків case не відповідає значенню виразу, виконується код у блоці default, якщо він є.

Оператор switch найбільш ефективний, коли у вас є кілька умов для оцінки однієї змінної або виразу на сувору відповідність до значення. Він забезпечує лаконічний та ефективний спосіб обробки різних випадків без використання кількох вкладених операторів if…else. Ще case можна групувати:

let type;

switch (fruitName) {
	case 'apple':
	case 'pear':
	case 'kiwi':
		type = 'Fruit';
		break;
	case 'tomato':
	case 'cucumber':
		type = 'Vegetable';
		break;
	default:
		type = 'Unknown';

Що станеться, якщо не використовувати break? Якщо ви не використали інструкцію break, будуть виконані інструкції наступних case включно з default якщо він є. При цьому перевірка правдивості виразу для всіх наступних case не буде виконуватись!

Якщо ви хочете використовувати switch і виконати код для будь-якої першої умови що є істинною, замість строгого порівняння значень, ви можете використовувати switch з умовою true

Ось приклад:

const age = 17

switch (true) {
  case age > 18:
    console.log('Особа повнолітня');
    break;
  case age > 14:
    console.log('Особа неповнолітня');
    break;
  default:
   console.log('Особа малолітня');
}

За логікою це дуже схоже на if else і в деяких випадках ці конструкції є взаємозамінюваними. 

const age = 17;

if (age > 18) {
  console.log('Особа повнолітня');
} else if (age > 14) {
  console.log('Особа неповнолітня');
} else {
  console.log('Особа малолітня');
}

Як правило, вибір між switch та if-else залежить від особистих вподобань розробника та особливостей конкретного випадку.

Конструкція switch може бути корисною, коли:

  1. Є багато варіантів для перевірки.
  2. Вираження для порівняння виглядає природніше в межах switch.

З іншого боку, if-else може бути більш зручним, коли:

  1. Логіка умов є простою та легко зрозумілою.
  2. Немає необхідності для виразу умови в межах switch. </aside>

Цикл for і while

Цикли є фундаментальною частиною програмування і є конструкцією що дозволяє автоматизувати повторювані дії або обробку даних. Вони дозволяють виконувати однаковий блок коду кілька разів з різними вхідними даними. У JavaScript існують кілька типів циклів, кожен з яких відповідає певному сценарію використання.

Кожен повтор циклу зветься ітерацією. Ітерація — це один прохід (повторення) циклу. У кожній ітерації циклу виконується певний набір інструкцій, а потім перевіряється умова, щоб визначити, чи повинен цикл продовжувати виконуватися або завершитися.

Цикл for Використовується для визначеного числа ітерацій, коли вам заздалегідь відомо, скільки разів потрібно виконати певні дії.

Складові циклу:

  1. Ініціалізація: Початкове значення, з якого починається виконання циклу. Використовується в циклі for.
  2. Умова: Це вираз, який оцінюється перед кожною ітерацією циклу. Якщо умова виконується, цикл продовжується; якщо ні – він завершується.
  3. Тіло – набір інструкцій для виконання на кожному повторенні. Виконується, якщо умова справджується.
  4. Зміна: Операція, яка відбувається після кожної ітерації. Використовується в циклі for для зміни умови.
for (let i = 0; i < 3; i++) {
  console.log(i)
}

/*
Покроковий опис роботи циклу for, що наведено вище

* 1. Ініціалізація змінної i (let i = 0)
* 2. Перевірка умови i < 3 (0 < 3) - умова правдива, переходимо до виконання тіла циклу
* 3. Виконання тіла циклу  console.log(i)  // 0
* 4. Виконання постітераційної інструкції i++ (те саме що i = i + 1)
* 5. Перевірка умови  (1 < 3) - умова правдива, переходимо до виконання тіла циклу
* 6. Виконання тіла циклу  console.log(i) // 1
* 7. Виконання постітераційної інструкції i++
* 8. Перевірка умови  (2 < 3) - умова правдива, переходимо до виконання тіла циклу
* 9. Виконання тіла циклу  console.log(i) // 2
* 10. Виконання постітераційної інструкції i++
* 11. Перевірка умови  (3 < 3) - умова ХИБНА, наступна ітерація не відбувається
* 12. Цикл завершив своє виконання
* */

Будь-яку частину for можна пропустити. Наприклад, ми можемо опустити початок, якщо нам не потрібно нічого робити перед стартом циклу.

let i = 0; // Ми вже маємо оголошену змінну і присвоєне значення

// Немає необхідності в "початку"
for (; i < 3; i++) {
  console.log(i); // 0, 1, 2
}

// Ми також можемо видалити частину "крок"
// Це робить цикл ідентичним до while (i < 3)
let i = 0;

for (; i < 3;) {
  console.log(i++);
}

// Можна взагалі забрати все, отримавши нескінченний цикл:
for (;;) {
	// буде вічно повторюватися
}

Цикл while

Цикл while зазвичай використовується, коли точна кількість ітерацій наперед невідома і залежить від конкретної умови. Він дозволяє динамічно та гнучко змінювати цикл залежно від умов виконання. Умова перевіряється перед кожною ітерацією і якщо умова є true, виконується блок коду. Якщо умова false, цикл завершується.

Ключові компоненти циклу while:

  • Умова — це вираз, який визначає, чи повинен цикл продовжуватися чи завершитися. Воно оцінюється перед кожною ітерацією циклу. Якщо умова дорівнює true, блок коду виконується, якщо умова false, цикл завершується. Якщо умова спочатку помилкова, блок коду повністю пропускається і цикл негайно завершується.
  • Блок коду — містить інструкції або оператори, які виконуються багаторазово доти, доки умова залишається істинною. Він укладений у фігурні дужки {} і може складатися з одного або кількох операторів. Блок коду може містити оголошення змінних, обчислення, виклики функцій або будь-який інший допустимий код JavaScript.
let count = 0;
while (count < 3) {
    console.log(count); // Виведе числа 0, 1, 2
    count++;
}

Якщо умова, задана у циклі while, завжди правдива, то цикл виконуватиметься нескінченно, у результаті вийде нескінченний цикл.

Цикл do while. Оператори continue та break

Цикл do while

Цикл do while — схожий на цикл while, але це конструкція циклу, яка виконує блок коду хоча б один раз, а потім повторює його до тих пір, поки задана умова залишається істинною. Структура циклу do while складається з блоку коду та умови. Спочатку цикл виконує блок коду, а потім оцінює умову. Якщо умова дорівнює true, цикл продовжує виконувати блок коду знову. Цикл завершується лише тоді, коли умова стає false.

let num = 5;

// Цикл do while
do {
    console.log(num); // Виведе число 5
} while (num < 5);

// Цикл while
while (num < 5){
	console.log(num); // не виведе нічого
}

Оператори continue та break:

continue: Цей оператор пропускає поточну ітерацію циклу і переходить до наступної.Помилка

for (let i = 0; i < 5; i++) {
    if (i === 2) {
        continue; // пропустити ітерацію якщо значення 2
    }
    console.log(i); // Виведе числа 0, 1, 3, 4
}



for (let i = 0; i < 5; i++) {
    if (i % 2 === 0) {
        continue; // пропустити ітерацію якщо остача від ділення на 2 дорівнює 0, тобто якщо число є парним або дорівнює 0
    }
    console.log(i); // Виведе числа 1, 3
}

break: Цей оператор негайно завершує виконання всього циклу а не тільки поточної ітерації.Помилка

for (let i = 0; i < 5; i++) {
    if (i === 3) {
        break; // Завершити цикл при значенні 3
    }
    console.log(i); // Виведе числа 0, 1, 2
}

Вкладені цикли

Коли один цикл вкладений в інший цикл, він зветься вкладеним. Така конструкція дозволяє виконувати повторювані дії всередині циклу, одночасно виконуючи ітерацію іншого циклу. Вкладені цикли створюються шляхом розміщення одного циклу всередині іншого циклу. Це дозволяє виконувати ітерації з колекції або набір операцій для кожного елемента зовнішнього циклу, одночасно виконуючи ітерації з іншої колекції або інший набір операцій у внутрішньому циклі.

for (let i = 1; i <= 9; i++) {
	for (let j = 1; j <= 3; j++) {
		console.log(i, j);
	}
}

let output = '';

for (let i = 1; i <= 9; i++) {
	for (let j = 1; j <= 9; j++) {
		output += ' ' + i * j;
		if (i * j < 10) {
			output += ' ';
		}
	}

	output = '';
}

// output - 1  2  3  4  5  6  7  8  9
// output - 2  4  6  8  10 12 14 16 18
// output - 3  6  9  12 15 18 21 24 27
// output - 4  8  12 16 20 24 28 32 36
// output - 5  10 15 20 25 30 35 40 45
// output - 6  12 18 24 30 36 42 48 54
// output - 7  14 21 28 35 42 49 56 63
// output - 8  16 24 32 40 48 56 64 72
// output - 9  18 27 36 45 54 63 72 81

Вкладені цикли зазвичай використовуються під час роботи з багатовимірними масивами або коли необхідно порівняти елементи різних колекцій. Вони дозволяють обробляти дані у структурованій та організованій манері. Важливо враховувати вплив вкладених циклів на продуктивність, оскільки час виконання експоненційно збільшується з кожним додатковим рівнем вкладеності.Помилка

Наданий перелік циклів в JavaScript не є вичерпним. Цикли які ми розгянули ж універсальними і можуть застосовуватися для різних задач. Є й більш спеціалізовані цикли, зокрема for of та for in, ми розглянемо їх більш детально пізніше, коли будемо вивчати роботу з масивами та об’єктами. Ці цикли надають зручний механізм для ітерації через елементи масивів чи властивості об’єктів, дозволяючи ефективно взаємодіяти з їхнім вмістом.

Створення винятків (exceptions) та їх обробка

throw для генерації винятку

throw – це ключове слово в JavaScript, яке використовується для генерації винятку або викидання помилки. Коли ви використовуєте throw, ви повідомляєте JavaScript, що сталася якась критична помилка або умисне виняткове становище, і ви хочете призупинити виконання коду.

Синтаксис виглядає наступним чином:Помилка

throw вираз;

вираз може бути будь-яким виразом, але часто використовується об’єкт Error або його підклас.

Приклад:

function divideNumbers(a, b) {
  if (b === 0) {
    throw new Error("Ділення на нуль недопустиме!");
  }
  return a / b;
}

try {
  const result = divideNumbers(10, 0);
  console.log(result);  // Цей рядок не буде виконано через throw вище
} catch (error) {
  console.error("Сталася помилка:", error.message);
}

У цьому прикладі, якщо параметр b дорівнює нулю, функція divideNumbers викликає throw new Error(), викидаючи помилку. Код, що знаходиться після throw, не буде виконано, а виконання буде переадресовано в блок catch у відповідному операторі try...catch.

throw допомагає керувати виключеннями та створює можливість для більш детальної обробки помилок у вашому коді.Помилка

try catch для відловлювання винятків

У програмуванні незалежно від мови можуть виникати помилки, такі як некоректні дані, недоступність ресурсів або невідомі ситуації. Для обробки цих помилок в JavaScript і багатьох інших мовах використовується механізм try-catch.

Синтаксис:

try {
  // Код, який може викликати помилку
} catch (error) {
  // Обробка помилки
}

Опис компонентів:

  • try: В цьому блоку виконується код, який може викликати помилку.
  • catch (error): Якщо в блоку try виникає помилка, вона перехоплюється і обробляється у цьому блоку. Змінна error містить об’єкт помилки.

Приклад:

try {
  // Код, який може викинути помилку
  let result = 10 / undefined;  // Спроба ділити на undefined
  console.log(result);  // Цей рядок не буде виконано через помилку вище
} catch (error) {
  // Обробка помилки
  console.error('Сталася помилка:', error.message);
}

У даному прикладі, функція divide намагається поділити два числа. Якщо ділення на нуль спричиняє помилку, вона перехоплюється блоком catch, і повідомлення помилки виводиться. Блок finally виконується завжди, незалежно від того, чи виникла помилка чи ні.

try-catch є потужним інструментом для обробки помилок, дозволяючи програмі виконуватися без відмов при непередбачуваних ситуаціях, а також виконати необхідні дії після обробки помилки.

Опціональний блок finally

Після виконання блоку try (у разі помилки або без неї) може бути використаний блок finally, який виконуватиметься завжди, незалежно від того, виникла помилка чи ні.

try {
  // Блок коду, в якому може статися помилка
} catch (error) {
		// Блок коду, який обробляє помилку
} finally {
   // Блок коду, який буде виконано завжди
}
try {
  // Код, який може викинути помилку
  let result = 10 / undefined;  // Спроба ділити на undefined
  console.log(result);  // Цей рядок не буде виконано через помилку вище
} catch (error) {
  // Обробка помилки
  console.error('Сталася помилка:', error.message);
}finally {
   console.log("Це повідомлення виводитиметься завжди")
}

Підсумок

У JavaScript існують різні умовні оператори для розгалуження виконання коду в залежності від певних умов.

Інструкція if...else:

  • Умовна конструкція if: Використовується для виконання блоку коду, якщо певна умова є істинною.
  • Опціональний блок else: Може додаватися для визначення блоку коду, який виконається, якщо умова в інструкції if є хибною.
  • Опціональний блок else if: Дозволяє визначити додаткові умови для розгалуження коду.

Вкладені умови:

  • Вкладені умови: Можна вкладати одну інструкцію if всередину іншої для складнішого розгалуження.
  • Не слід зловживати вкладеними умовами, слідкуйте за читабельністю коду

Інструкція switch:

  • Алгоритм порівняння: Використовується для порівняння виразу зі значеннями у case для визначення виконання певного блоку коду.
  • Інструкція case: Визначає блок коду, який виконується, якщо вираз у switch співпадає зі значенням у case.
  • Опціональний блок default: Визначає блок коду, який виконується, якщо жоден з case не співпадає.

Цикли в JavaScript:

Цикли в JavaScript використовуються для ітерації через колекції або виконання блоку коду кілька разів.

for:

Цикл for: Використовується для ітерації з певною умовою визначення.

while:

Цикл while: Використовується для виконання блоку коду, поки умова залишається істинною.

do while:

Цикл do while: Схожий на while, але виконується принаймні один раз навіть якщо умова невірна.

Оператори:

  • continue: Використовується для переходу до наступної ітерації циклу.
  • break: Припиняє виконання циклу або виходить з нього.

Вкладені цикли:

Вкладені цикли: Можуть бути використані для обробки більш складних сценаріїв, де потрібно вкладати один цикл всередину іншого.

Обробка виключень:

Обробка виключень дозволяє вам елегантно впоратися з помилками та винятками, які можуть виникнути під час виконання програми.

throw: Використовується для “кидання” (генерації) винятку в коді.

Інструкція try...catch:

  • try...catch: Використовується для виконання коду в try блоку, а також для обробки помилок, які можуть виникнути.
  • Опціональний блок finally: Визначає блок коду, який виконується завжди, незалежно від того, чи виникла помилка, чи ні.

Основи JS