8. Цикл

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

Припустимо, ми хочемо п’ять разів написати в консолі повідомлення “Привіт, раді вітати вас на girls.js!”. Ми можемо зробити це таким чином:

console.log("Привіт, раді вітати вас на girls.js!");
console.log("Привіт, раді вітати вас на girls.js!");
console.log("Привіт, раді вітати вас на girls.js!");
console.log("Привіт, раді вітати вас на girls.js!");
console.log("Привіт, раді вітати вас на girls.js!");

Трохи забагато для написання, чи не так? Ми можемо зробити цей код простішим!

Цикл for

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

for (початок циклу; вираз, чи завершувати цикл, чи ще ні; приріст/зменшення лічильника ) {
    код, який ми хочемо повторити певну кількість разів
}

Переробімо наш код з повідомленням!

стартова умова: ми починаємо з 0, тому створюємо змінну-лічильник (яка існує тільки для циклу),

let i = 0;

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

i <= 5;

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

i += 1

Отже, цикл буде виглядати наступним чином:

for (let i = 0; i <= 5; i += 1) { 
     console.log("Привіт, раді вітати вас на girls.js!");
}

Ми також можемо зменшувати лічильник. Ми знаємо, що нам потрібно 5 повідомлень, тому можемо записати цикл так:

початок циклу: починаємо з 5, тобто let i = 5;

кінець циклу: повторюємо, поки не досягнемо 0, тобто поки i більше нуля, i > 0;

збільшення/зменшення лічильника: кожен цикл відраховує від п’яти, тобто i -= 1;

for (let i = 5; i > 0; i -= 1) {
  console.log("Привіт, раді вітати вас на girls.js!");  
}

Спробуйте написати наведений вище цикл у своєму JS-файлі. Зробіть так, щоб код повторювався 10 разів.

Час для наших книжок! Нагадаємо: ми хочемо додати ідентифікатор (id) до наступних 30 книг.

Ми можемо зробити це ось так:

console.log("id-1");
console.log("id-2");
console.log("id-3");
console.log("id-4");
console.log("id-5");
console.log("id-6");
....
console.log("id-30");

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

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

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

Консоль показує нам числа від 0 до 29. Нарешті, ми починаємо рахувати з 0 і повторюємо код, поки лічильник не стане менше 30. Коли воно досягає 30, ми зупиняємо цикл. Отже, нам потрібно трохи переробити наш цикл. Наш ідентифікатор починається з 1, і ми повторюємо цикл до тих пір, поки елементи не стануть рівними 30.

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

Чудово! Тепер давайте додамо відсутній елемент id, тобто рядок “id-“. Для цього ми можемо використовувати додавання. Коли ми додаємо рядок до числа, JS перетворює все це в рядок!

for (let i = 1; i <= 30; i += 1) { 
     console.log("id-" + i);
}

Завдання

Використай наведений вище цикл, щоб присвоїти ідентифікатор 50 книгам. Збережи код у своєму JS-файлі.

Цикл while

Крім циклу for, в JavaScript є цикл while, структура якого виглядає наступним чином:

while (вираз для перевірки того, чи потрібно продовжувати цикл) {
    код, який потрібно повторювати, доки виконується умова в дужках
}

Цикл for виконується певну кількість разів. Цикл while виконується до тих пір, поки вираз у круглих дужках є істинним.

Зверни увагу, що в цьому циклі немає лічильника. Тому його часто додають вручну. Повернемося до нашого повідомлення 5 людям:

let counter = 0;
while(counter < 5) {
    console.log("Привіт, раді вітати вас на girls.js!");  
    counter += 1;
}

Ми визначаємо змінну, яка є нашим лічильником, поза циклом. У кожному циклі ми збільшуємо лічильник на 1.

Завдання

Напишіть у своєму JS-файлі такий цикл while, який 10 разів виведе в консоль “JavaScript — це круто!”.