Цикли

JavaScript цикли — гончарне коло створює форму повторенням руху

У минулому уроці ми навчилися приймати рішення (if/else). Але що якщо потрібно виконати щось 100 разів? Писати 100 рядків коду — не варіант. Для цього є цикли — конструкції, що повторюють блок коду.

for — найпоширеніший цикл

for (let i = 0; i < 5; i++) {
  console.log(i);
}
// 0, 1, 2, 3, 4

Три частини:

for (ініціалізація; умова; крок) {
  // тіло циклу
}

Приклади

// Рахуємо від 1 до 10
for (let i = 1; i <= 10; i++) {
  console.log(i);
}

// Парні числа від 0 до 20
for (let i = 0; i <= 20; i += 2) {
  console.log(i); // 0, 2, 4, 6, ... 20
}

// Зворотний відлік
for (let i = 10; i >= 0; i--) {
  console.log(i); // 10, 9, 8, ... 0
}

while — поки умова true

let count = 0;

while (count < 5) {
  console.log(count);
  count++;
}
// 0, 1, 2, 3, 4

while корисний, коли не знаєш заздалегідь, скільки ітерацій буде:

// Ділимо число на 2, поки воно більше 1
let num = 64;

while (num > 1) {
  num = num / 2;
  console.log(num); // 32, 16, 8, 4, 2, 1
}

do...while — мінімум одна ітерація

На відміну від while, do...while спочатку виконує, потім перевіряє:

let input;
do {
  input = "yes"; // уяви, що тут введення від користувача
  console.log("Виконано!");
} while (input !== "yes");

Тіло виконається хоча б один раз, навіть якщо умова відразу false.

break — вийти з циклу

for (let i = 0; i < 100; i++) {
  if (i === 5) {
    break; // зупиняємо цикл
  }
  console.log(i);
}
// 0, 1, 2, 3, 4 (не дійшов до 100)

Пошук елемента

const numbers = [3, 7, 12, 5, 18, 2];
let found = -1;

for (let i = 0; i < numbers.length; i++) {
  if (numbers[i] > 10) {
    found = numbers[i];
    break; // знайшли — далі шукати немає сенсу
  }
}
console.log("Перше число > 10:", found); // 12

continue — пропустити ітерацію

for (let i = 0; i < 10; i++) {
  if (i % 2 === 0) {
    continue; // пропускаємо парні
  }
  console.log(i);
}
// 1, 3, 5, 7, 9

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

Цикл всередині циклу — для роботи з двовимірними структурами:

// Таблиця множення 3×3
for (let row = 1; row <= 3; row++) {
  let line = "";
  for (let col = 1; col <= 3; col++) {
    line += `${row * col}\t`;
  }
  console.log(line);
}
// 1  2  3
// 2  4  6
// 3  6  9

for vs while — що обирати?

Практика

// 1. Сума чисел від 1 до 100
let sum = 0;
for (let i = 1; i <= 100; i++) {
  sum += i;
}
console.log("Сума 1..100 =", sum); // 5050

// 2. Факторіал (5! = 5 × 4 × 3 × 2 × 1)
const n = 5;
let factorial = 1;
for (let i = 1; i <= n; i++) {
  factorial *= i;
}
console.log(`${n}! =`, factorial); // 120

// 3. FizzBuzz — класична задача
for (let i = 1; i <= 30; i++) {
  if (i % 15 === 0) {
    console.log("FizzBuzz");
  } else if (i % 3 === 0) {
    console.log("Fizz");
  } else if (i % 5 === 0) {
    console.log("Buzz");
  } else {
    console.log(i);
  }
}

Підсумок

• for — коли знаєш кількість ітерацій (найчастіший)
• while — коли чекаєш на умову
• do...while — мінімум одне виконання
• break — повний вихід з циклу
• continue — пропуск поточної ітерації
• Уникай нескінченних циклів — завжди змінюй лічильник

Що далі?

У наступному уроці вивчимо функції — як організувати код у перевикористовувані блоки.