Цикл for у JavaScript

Цикли – один із базових інструментів програмування. Вони дозволяють багаторазово виконувати певний блок коду без дублювання однакових інструкцій. Завдяки цьому можна працювати з масивами, обходити елементи колекцій чи організовувати повторювані дії у програмі. У JavaScript одним із найчастіше використовуваних є цикл for.

Що таке цикл for

Цикл for – це конструкція, що дає змогу виконувати блок коду багаторазово, доки виконується задана умова.

Синтаксис:

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

Складові частини:

  • Ініціалізація – визначення змінної, яка керує циклом. Зазвичай це лічильник.
  • Умова – логічна перевірка, яка визначає, чи потрібно продовжувати виконання циклу. Якщо умова дорівнює true, виконується наступна ітерація, якщо false – цикл зупиняється.
  • Оновлення (інкремент/декремент)  – зміна значення лічильника після кожної ітерації.

Приклад простого циклу for

for (let i = 0; i < 5; i++) {
  console.log(`Ітерація №${i}`);
}

/*
Output:
Ітерація №0
Ітерація №1
Ітерація №2
Ітерація №3
Ітерація №4
*/

Що відбувається:

  • Ініціалізація: let i = 0 – створюється змінна-лічильник, початкове значення 0.
  • Умова: i < 5 – цикл виконується доти, доки i менше 5.
  • Зміна: i++ – після кожної ітерації значення лічильника збільшується на 1.
  • Після п’ятої ітерації i дорівнює 5, умова стає false і виконання циклу зупиняється.

Цикл for у зворотному порядку

Можна також рухатись від більшого до меншого значення:

for (let i = 5; i > 0; i--) {
  console.log(i);
}

/*
Output:
5
4
3
2
1
*/

Пропуск ітерацій та достроковий вихід з циклу

Іноді виникає потреба пропустити певну ітерацію циклу або достроково завершити його виконання.

Оператор continue використовується щоб пропустити поточну ітерацію, якщо виконується певна умова. Наприклад, пропустимо крок коли i = 2:

for (let i = 0; i < 5; i++) {
  if (i === 2) continue;
  console.log(i);
}

/*
Output:
0
1
3
4
*/

Оператор break використовується для дострокового завершення циклу, якщо виконується певна умова. Наприклад, зупинимо цикл коли i дорівнює 3:

for (let i = 0; i < 5; i++) {
  if (i === 3) break;
  console.log(i);
}

/*
Output:
0
1
2
*/

Використання циклу for з масивами

Цикл for часто застосовують для перебору масивів:

const fruits = ['apple', 'banana', 'cherry'];

for (let i = 0; i < fruits.length; i++) {
  console.log(fruits[i]);
}

/*
Output:
apple
banana
cherry
*/

Поради щодо використання циклу for у JavaScript

  • Використовуйте let замість var для створення лічильника, щоб уникнути витоку змінної за межі циклу.
  • Оптимізуйте умову: якщо ви перебираєте масив, збережіть його довжину в окрему змінну:
for (let i = 0, len = arr.length; i < len; i++) {...}

  • Якщо немає потреби працювати з індексами, використовуйте інші види циклів:
    • for…of – для перебору елементів масиву
    • for…in – для перебору властивостей об’єкта
Мітки: