Пошук уроків, статей та іншого контенту
Познайомтеся з циклом while, який виконує код доти, доки задана умова залишається істинною. Навчіться правильно формувати умову та змінювати значення, від яких залежить завершення циклу.
whileЦикл while повторює виконання блоку коду доти, доки задана умова має значення true.
Синтаксис:
while (умова) {
// код, який повторюється
}Порядок роботи циклу:
JavaScript перевіряє умову.
Якщо умова істинна (true), виконується код у фігурних дужках.
Після виконання коду умова перевіряється знову.
Цикл завершується, коли умова стає хибною (false).
let count = 1;
while (count <= 5) {
console.log(count);
count++;
}Результат:
1
2
3
4
5Змінна count починається зі значення 1. На кожній ітерації циклу:
значення count виводиться в консоль;
оператор count++ збільшує його на одиницю;
цикл продовжується, поки count <= 5.
Коли count стає 6, умова count <= 5 має значення false, тому цикл завершується.
Ітерація — це одне виконання тіла циклу.
Умова може використовувати змінні, оператори порівняння та логічні оператори:
let temperature = 25;
while (temperature > 20) {
console.log(`Температура: ${temperature}`);
temperature--;
}У цьому прикладі цикл виконується, поки температура більша за 20.
Можна використовувати різні оператори порівняння:
> — більше;
< — менше;
>= — більше або дорівнює;
<= — менше або дорівнює;
=== — дорівнює;
!== — не дорівнює.
Умова циклу повинна залежати від значення, яке змінюється під час виконання циклу.
Наприклад, можна відлічувати кількість спроб:
let attempts = 3;
while (attempts > 0) {
console.log(`Залишилося спроб: ${attempts}`);
attempts--;
}
console.log("Спроби завершилися");Результат:
Залишилося спроб: 3
Залишилося спроб: 2
Залишилося спроб: 1
Спроби завершилисяОператор attempts-- зменшує значення змінної на одиницю. Після третьої ітерації значення стає 0, тому умова attempts > 0 стає хибною.
Змінювати значення можна і за допомогою звичайного присвоєння:
let number = 1;
while (number < 10) {
console.log(number);
number = number + 2;
}У консоль буде виведено:
1
3
5
7
9Цикл while можна використовувати не лише для лічби. Наприклад, він може обробляти символи рядка:
const word = "JavaScript";
let index = 0;
while (index < word.length) {
console.log(word[index]);
index++;
}Тут:
word.length повертає довжину рядка;
word[index] отримує символ за вказаним індексом;
index++ переходить до наступного символу.
Індекси рядка починаються з 0, тому для слова "JavaScript" індекси мають значення від 0 до 9.
while може не виконатися жодного разуУмова перевіряється до виконання тіла циклу. Якщо вона відразу хибна, код усередині циклу не виконається:
let number = 10;
while (number < 5) {
console.log("Цей текст не буде виведено");
}
console.log("Цикл завершено");Оскільки 10 < 5 — це false, тіло циклу пропускається.
Це відрізняє while від циклу do...while.
do...whileЦикл do...while спочатку виконує код, а вже потім перевіряє умову:
let number = 10;
do {
console.log(number);
number++;
} while (number < 5);Результат:
10Хоча умова number < 5 відразу хибна, тіло циклу виконалося один раз.
Синтаксис:
do {
// код, який виконається хоча б один раз
} while (умова);Використовуйте:
while, якщо код може не виконатися жодного разу;
do...while, якщо код повинен виконатися щонайменше один раз.
Уявімо, що програма зменшує кількість товарів на складі, поки товари не закінчаться:
let products = 5;
while (products > 0) {
console.log(`Продано товар. Залишилося: ${products - 1}`);
products--;
}
console.log("Товарів більше немає");Результат:
Продано товар. Залишилося: 4
Продано товар. Залишилося: 3
Продано товар. Залишилося: 2
Продано товар. Залишилося: 1
Продано товар. Залишилося: 0
Товарів більше немаєУмова products > 0 описує, чи залишилися товари. Після кожної ітерації кількість товарів зменшується.
breakОператор break негайно завершує цикл, навіть якщо його умова все ще істинна:
let number = 1;
while (number <= 10) {
if (number === 5) {
break;
}
console.log(number);
number++;
}Результат:
1
2
3
4Коли number дорівнює 5, виконується break, і цикл завершується.
break зручно використовувати, коли завершення залежить від додаткової умови всередині циклу.
continueОператор continue пропускає поточну ітерацію та переходить до наступної:
let number = 0;
while (number < 5) {
number++;
if (number === 3) {
continue;
}
console.log(number);
}Результат:
1
2
4
5Число 3 не виводиться, тому що для нього виконується continue.
У циклі while важливо змінити значення, яке впливає на умову, до continue. Інакше цикл може стати нескінченним.
let number = 1;
while (number <= 5) {
console.log(number);
}Умова завжди залишається істинною, тому цикл ніколи не завершиться.
Правильний варіант:
let number = 1;
while (number <= 5) {
console.log(number);
number++;
}let number = 5;
while (number > 0) {
console.log(number);
number++;
}Значення збільшується, хоча для завершення циклу його потрібно зменшувати. Такий цикл буде нескінченним.
Правильний варіант:
let number = 5;
while (number > 0) {
console.log(number);
number--;
}Порівняйте ці умови:
let number = 1;
while (number < 5) {
console.log(number);
number++;
}Результат:
1
2
3
4Якщо потрібно вивести також число 5, використовуйте оператор <=:
let number = 1;
while (number <= 5) {
console.log(number);
number++;
}Результат:
1
2
3
4
5Не ставте крапку з комою після умови циклу:
while (number < 5); {
console.log(number);
number++;
}Крапка з комою створює порожній цикл, а блок коду після нього виконується окремо. Це може призвести до помилок або нескінченного виконання.
Правильний запис:
while (number < 5) {
console.log(number);
number++;
}whileЦикл while особливо корисний, коли заздалегідь невідомо, скільки разів потрібно повторити код.
Наприклад:
виконувати спроби, поки не буде отримано правильний результат;
обробляти дані, поки вони не закінчаться;
чекати на виконання певної умови;
повторювати дію, поки користувач не вибере команду завершення.
Якщо кількість повторень відома заздалегідь, часто зручніше використовувати цикл for. Якщо головною умовою є стан програми, while може бути зрозумілішим.
Що виведе цей код?
let number = 2;
while (number <= 10) {
console.log(number);
number += 2;
}Результат:
2
4
6
8
10Спробуйте змінити код так, щоб він:
виводив непарні числа від 1 до 9;
виводив числа від 10 до 1 у зворотному порядку;
виводив лише числа, які діляться на 3, від 3 до 30.
while повторює код, поки його умова має значення true.
Умова перевіряється перед кожною ітерацією.
Цикл може не виконатися жодного разу.
Значення, від якого залежить умова, потрібно змінювати всередині циклу.
Якщо не змінювати таке значення, може виникнути нескінченний цикл.
break повністю завершує цикл.
continue пропускає поточну ітерацію.
do...while завжди виконує тіло циклу щонайменше один раз.