Вступ до циклів JavaScript

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

Цикл "for"

Класичний цикл for ідеальний, коли ви знаєте, скільки разів хочете повторити дію.

Синтаксис:

for (ініціалізація; умова; збільшення/зменшення) {
// Код для виконання
}

Приклад:

for (let i = 0; i < 5; i++) {  
 console.log("Ітерація:", i);   
}  
// Виведення: 0, 1, 2, 3, 4

• Використання: Ідеально підходить для ітерації по масивах з відомою довжиною або для повторення завдань певну кількість разів.

Цикл "while"

Використовуйте цикл while, коли потрібно повторювати код до тих пір, поки умова істинна.

Синтаксис:

while (умова) {
// Код для виконання
}

Приклад:

let counter = 0;  
while (counter < 5) {  
 console.log("Лічильник:", counter);  
 counter++;  
}  
// Виведення: 0, 1, 2, 3, 4

• Використання: Чудово підходить для сценаріїв, таких як зчитування даних, поки не буде знайдено певне значення.

Цикл "do...while"

Подібний до while, але гарантує, що код виконається хоча б один раз, навіть якщо умова спочатку хибна.

Синтаксис:

do {
// Код для виконання
} while (умова);

Приклад:

let num = 10;  
do {  
 console.log("Число:", num);   
 num++;  
} while (num < 5); // Умова не виконана, але цикл запускається хоча б один раз  
// Виведення: 10

• Використання: Корисно для завдань, таких як перевірка вводу користувача перед перевіркою умови.

Цикл "for...of"

Введений в ES6, цикл for...of спрощує ітерацію по масивах, рядках або інших ітерабельних об'єктах.

Синтаксис:

for (const item of iterable) {
// Код для виконання
}

Приклад:

const fruits = ["Apple", "Banana", "Cherry"];  
for (const fruit of fruits) {  
 console.log(fruit);   
}  
// Виведення: Apple, Banana, Cherry

• Використання: Чистий і лаконічний спосіб ітерації по масивах або рядках без необхідності керувати індексами.

Цикл "for...in"

Призначений для ітерації по ключах (властивостях) об'єкта.

Синтаксис:

for (const key in object) {
// Код для виконання
}

Приклад:

const user = { name: "Alex", age: 30, role: "Developer" };  
for (const key in user) {  
 console.log(`${key}: ${user[key]}`);  
}  
// Виведення: name: Alex, age: 30, role: Developer

Цикл "forEach"

Метод forEach — це сучасний спосіб ітерації по елементах масиву. Він виконує надану функцію для кожного елемента масиву один раз.

Синтаксис:

array.forEach(function(item, index, array) {
// Код для виконання
});

Приклад:

const numbers = [10, 20, 30];  
numbers.forEach((number, index) => {  
 console.log(`Індекс ${index}: ${number}`);  
});  
// Виведення: Індекс 0: 10, Індекс 1: 20, Індекс 2: 30

• Використання: Спрощує ітерацію по масивах без управління індексами вручну.
• Не можна використовувати break або continue для виходу або пропуску ітерацій.
• Працює тільки з масивами (не з об'єктами чи іншими ітерабельними об'єктами).

Контроль циклів: "break" та "continue"

break: Виходить з циклу одразу.

for (let i = 0; i < 10; i++) {  
 if (i === 5) break; // Зупиняється на 5  
 console.log(i);  
}

continue: Пропускає поточну ітерацію і переходить до наступної.

for (let i = 0; i < 5; i++) {  
 if (i === 2) continue; // Пропускає 2  
 console.log(i); // 0, 1, 3, 4  
}

Кращі практики використання циклів

1. Уникайте нескінченних циклів: Переконайтеся, що ваша умова рано чи пізно стане хибною.
2. Вибирайте правильний цикл: Використовуйте for...of для масивів, for...in для об'єктів.
3. Оптимізуйте продуктивність: Мінімізуйте важкі обчислення всередині циклів.
4. Залишайте код читаємим: Використовуйте описові імена змінних (наприклад, index, а не i для більшої зрозумілості).
   5.
   Знати, коли використовувати forEach: Чудово підходить для читабельності масивів, але уникайте його, якщо потрібно використовувати break раніше або працювати з не-масивними даними.

Висновок

Цикли JavaScript дозволяють вам писати ефективний, чистий і динамічний код. Оволодівши for, while, do...while, for...of, for...in та forEach, ви з легкістю зможете обробляти дані та маніпулювати DOM. Практикуйтесь з реальними прикладами, і скоро цикли стануть вашою другою натурою!

Перекладено з: Introduction to JavaScript Loops