Що таке loop у Javascript? Як працють цикли for та while у Javascript?

У JavaScript, loop (петля, цикл або як каже словотвір - колобіг) є конструкцією мови, яка дозволяє виконувати блок коду повторно кілька разів. Вона дозволяє автоматизувати повторні дії або обробку списків (масивів) даних. У JavaScript є кілька типів loop'ів. Найпоширеніші два це: for і while. Цикл for

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

for (ініціалізація; умова; крок) {
    // блок коду, який повторюється
}

З першого погляду незрозуміло що таке ініціалізація, умова та крок. У циклі for в JavaScript, ініціалізація, умова і крок є складовими частинами, які допомагають контролювати виконання циклу.

 Ініціалізація (initialization): Це початкове значення або початкове налаштування змінних, які використовуються в циклу. Вона виконується, лише один раз перед початком виконання циклу. Ініціалізація зазвичай включає оголошення змінної і присвоєння початкового значення. Розглянемо реальний приклад циклу for: 

for (let i = 0; i < 5; i++) {
    // блок коду, який повторюється	
}

У цьому прикладі let i = 0 є ініціалізацією. Змінна i створюється і ініціалізується значенням 0 перед початком циклу. Умова (condition): Це умова, яка перевіряється перед кожною ітерацією циклу. Якщо умова виконується (має значення true), то виконується блок коду циклу. Якщо умова не виконується (має значення false), то виконання циклу завершується і виконується наступний код після циклу. У нашому прикладі i < 5 є умовою. Поки i менше 5, цикл буде виконуватись. Як тільки i стає рівним або більшим за 5, цикл припиняється. Крок (step): Це операція, яка виконується після кожної ітерації циклу. Вона змінює значення змінної, яка використовується в циклі, для наступної ітерації. Після кожної ітерації змінна i збільшується на 1.

Таким чином, ініціалізація, умова і крок разом допомагають контролювати повторення блоку коду в циклі for, вказуючи початкову точку, умову продовження та зміни, які відбуваються після кожної ітерації. Приклад циклу for, який надрукує в консоль браузера цифри від 1 до 5.

for (let i = 1; i <= 5; i++) {
    console.log(i);
}

Приклад використання for для масиву. Пройдемось циклом по масиву даних (масив з іменами котів).

const cats = ['Хумус', 'Куля', 'Коржик', 'Чілі', 'Том'];

for (let i = 0; i < cats.length; i++) {
    console.log('Кіт: ' + cats[i]);
}

У цьому прикладі створюється масив cats, що містить різних котів. Потім цикд for використовується для проходження крізь елементи масиву і виведення кожного кота в консоль браузеру. Змінна i використовується для відстеження поточного індексу елементу масиву, і вона збільшується з кожною ітерацією (i++). В консолі ми побачемо наступне:

Кіт: Хумус
Кіт: Куля
Кіт: Коржик
Кіт: Чілі
Кіт: Том

Цикл while

Цикл while виконує блок коду, доки певна умова є істинною. Вона має такий синтаксис:

while (умова) {
    // блок коду, який повторюється
}

В цьому випадку умова є чимось більш зрозумілим. Наприклад, такий цикл виведе числа від 1 до 5:

let i = 1;
while (i <= 5) {
    console.log(i);
    i++;
}

У циклі while, умова є виразом, який перевіряється перед кожною ітерацією. Якщо умова є істинною (має значення true), то виконується блок коду. Якщо умова є хибною (має значення false), то виконання циклу завершується. У прикладі блок коду console.log(i) виконується, доки i менше 5. Змінна i збільшується на 1 після кожної ітерації. Коли i стає рівним або більшим за 5, умова стає хибною, і цикл завершується. Умова в циклі while грає важливу роль у контролюванні повторення блоку коду у петлі. Важливо впевнитися, що умова змінюється в процесі виконання петлі, щоб уникнути безкінечного циклу. Безкінечний цикл у JavaScript - це цикл, який ніколи не завершується і продовжує повторюватися безкінечно. Такий цикл може виникнути, коли умова циклу завжди має значення true, або коли умова не оновлюється таким чином, щоб цикл можна було закінчити.

while (true) {
  // блок коду, який повторюється завжди
}

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

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

const cats = ['Хумус', 'Куля', 'Коржик', 'Чілі', 'Том'];

let i = 0;
while (i < cats.length) {
    console.log('Кіт: ' + cats[i]);
    i++;
}

У цьому прикладі також створюється масив cats, що містить різних котів. Змінна i ініціалізується на початку поза циклом зі значенням 0. Потім while виконується, доки i менше довжини масиву cats. У кожній ітерації петлі виводиться назва кота на консоль, після чого значення i збільшується на 1 (i++). В консолі ми побачемо наступне:

Кіт: Хумус
Кіт: Куля
Кіт: Коржик
Кіт: Чілі
Кіт: Том