Пошук уроків, статей та іншого контенту
Дізнайтеся, як цикли дозволяють багаторазово виконувати код без його дублювання. Розгляньте типові задачі, де повторення використовуються для обробки даних, підрахунків і автоматизації дій.
Цикл — це конструкція JavaScript, яка дозволяє багаторазово виконувати один і той самий блок коду.
Наприклад, нам потрібно вивести числа від 1 до 5. Без циклу довелося б написати:
console.log(1);
console.log(2);
console.log(3);
console.log(4);
console.log(5);Такий код працює, але він дублюється і швидко стає незручним. За допомогою циклу те саме завдання можна виконати коротше:
for (let number = 1; number <= 5; number++) {
console.log(number);
}Цикл самостійно:
створює початкове значення;
перевіряє умову;
виконує код;
змінює значення;
повторює ці кроки, доки умова залишається істинною.
Цикли корисні щоразу, коли потрібно виконати однакову дію кілька разів.
Типові приклади:
вивести числа в певному діапазоні;
обробити всі елементи масиву;
порахувати суму або кількість значень;
знайти найбільше чи найменше число;
повторити дію задану кількість разів;
перевірити багато значень;
створити список або набір елементів;
автоматизувати однотипні операції.
Без циклів для кожного повторення довелося б створювати окремий рядок коду. Це збільшує програму та кількість можливих помилок.
forЦикл for найчастіше використовують, коли заздалегідь відома кількість повторень.
for (початкове_значення; умова; зміна) {
// код, який повторюється
}Розглянемо приклад:
for (let i = 0; i < 3; i++) {
console.log("Привіт!");
}Результат:
Привіт!
Привіт!
Привіт!У цьому прикладі:
let i = 0 — створює лічильник і задає його початкове значення;
i < 3 — умова продовження циклу;
i++ — збільшує лічильник на одиницю після кожного повторення;
тіло циклу — код між фігурними дужками.
forКод:
for (let i = 1; i <= 4; i++) {
console.log(i);
}виконується так:
i отримує значення 1;
перевіряється умова i <= 4;
виводиться значення i;
i збільшується на 1;
цикл повторюється.
Результат:
1
2
3
4Цикл можна використати для підрахунку суми чисел.
let sum = 0;
for (let number = 1; number <= 5; number++) {
sum = sum + number;
}
console.log(sum);Результат:
15Змінна sum спочатку дорівнює 0. На кожному повторенні до неї додається поточне число:
0 + 1 = 1;
1 + 2 = 3;
3 + 3 = 6;
6 + 4 = 10;
10 + 5 = 15.
Такий підхід називають накопиченням результату.
Цикли особливо корисні для роботи з масивами. Масив може містити багато значень, які потрібно обробити однаково.
const prices = [120, 80, 250, 40];
for (let i = 0; i < prices.length; i++) {
console.log(`Ціна товару: ${prices[i]} грн`);
}Результат:
Ціна товару: 120 грн
Ціна товару: 80 грн
Ціна товару: 250 грн
Ціна товару: 40 грнВластивість length містить кількість елементів масиву. Якщо в масиві чотири елементи, prices.length дорівнює 4.
Індекси масиву починаються з нуля:
const colors = ["червоний", "зелений", "синій"];
console.log(colors[0]); // червоний
console.log(colors[1]); // зелений
console.log(colors[2]); // синійТому умова i < prices.length не допускає звернення до неіснуючого індексу.
whileЦикл while використовують, коли повторення мають тривати, поки виконується певна умова.
let number = 1;
while (number <= 3) {
console.log(number);
number++;
}Результат:
1
2
3У циклі while важливо самостійно змінювати значення, від якого залежить умова. Якщо цього не зробити, цикл може стати нескінченним:
let number = 1;
while (number <= 3) {
console.log(number);
// Помилка: number не збільшується
}У такому випадку number завжди дорівнює 1, тому умова number <= 3 ніколи не стане хибною.
for, а коли whileВикористовуйте for, якщо:
кількість повторень відома;
потрібно пройти числа від одного значення до іншого;
потрібно обробити всі елементи масиву за індексами.
Використовуйте while, якщо:
кількість повторень наперед невідома;
цикл має працювати до настання певної події;
умова є важливішою за лічильник.
Наприклад, for добре підходить для виведення чисел від 1 до 10, а while — для повторення спроби, доки користувач не введе правильне значення.
Оператор остачі від ділення % допомагає перевірити, чи є число парним. Якщо остача від ділення на 2 дорівнює 0, число парне.
for (let number = 1; number <= 10; number++) {
if (number % 2 === 0) {
console.log(number);
}
}Результат:
2
4
6
8
10Цикл перевіряє кожне число, а умовна конструкція if виводить лише ті числа, які відповідають умові.
const numbers = [-3, 5, 0, 8, -1, 4];
let positiveCount = 0;
for (let i = 0; i < numbers.length; i++) {
if (numbers[i] > 0) {
positiveCount++;
}
}
console.log(`Позитивних чисел: ${positiveCount}`);Результат:
Позитивних чисел: 3Алгоритм працює так:
створюється лічильник positiveCount;
цикл проходить усі елементи масиву;
кожне число перевіряється умовою numbers[i] > 0;
якщо число позитивне, лічильник збільшується;
після завершення циклу виводиться результат.
Іноді потрібно зупинити цикл раніше. Для цього використовують break.
for (let number = 1; number <= 10; number++) {
if (number === 5) {
break;
}
console.log(number);
}Результат:
1
2
3
4Коли number стає рівним 5, команда break одразу завершує цикл.
Команда continue пропускає поточне повторення та переходить до наступного:
for (let number = 1; number <= 5; number++) {
if (number === 3) {
continue;
}
console.log(number);
}Результат:
1
2
4
5Число 3 не виводиться, але цикл продовжує роботу.
Наступна програма знаходить суму парних чисел у масиві:
const numbers = [3, 8, 11, 4, 6, 9];
let evenSum = 0;
for (let i = 0; i < numbers.length; i++) {
const number = numbers[i];
if (number % 2 === 0) {
evenSum += number;
}
}
console.log(`Сума парних чисел: ${evenSum}`);Результат:
Сума парних чисел: 18Парні числа в масиві — 8, 4 і 6. Їхня сума дорівнює 18.
for (let i = 0; i <= numbers.length; i++) {
console.log(numbers[i]);
}Індекс останнього елемента масиву дорівнює numbers.length - 1, тому зазвичай потрібно використовувати умову:
i < numbers.lengthlet i = 1;
while (i <= 5) {
console.log(i);
}Значення i не змінюється, тому цикл ніколи не завершиться. Потрібно додати зміну лічильника:
let i = 1;
while (i <= 5) {
console.log(i);
i++;
}Якщо потрібно порахувати суму, змінну-накопичувач зазвичай починають із 0:
let sum = 0;Якщо потрібно порахувати кількість елементів, лічильник також починають із 0:
let count = 0;Цикл може не виконатися жодного разу або стати нескінченним, якщо початкове значення, умова та зміна лічильника не узгоджені.
Наприклад:
for (let i = 5; i <= 10; i--) {
console.log(i);
}Лічильник зменшується, але умова очікує, що він збільшуватиметься до 10. Для такого циклу потрібно або змінити умову, або використовувати i++.
Виведіть у консоль числа від 10 до 1.
Порахуйте суму чисел від 1 до 100.
Виведіть лише непарні числа від 1 до 20.
Знайдіть найбільше число в масиві [12, 5, 27, 8, 19].
Порахуйте, скільки чисел більші за 10 у масиві [4, 15, 22, 7, 11, 3].
Створіть цикл while, який виведе числа від 1 до 5.
Цикл повторює блок коду без його дублювання.
for зручно використовувати, коли кількість повторень відома.
while працює, поки певна умова є істинною.
Цикли часто використовують для обробки масивів, підрахунків і перевірки даних.
Лічильник допомагає керувати кількістю повторень.
У циклі важливо правильно визначити умову завершення.
break повністю завершує цикл.
continue пропускає поточне повторення.