Цикли JavaScript є важливим елементом для будь-якого розробника, і кожен тип циклу має свої особливості та найкращі варіанти використання.
1. Цикл for — "Оригінальна трилогія"
Цей цикл дуже надійний та структурований, працює, коли ви знаєте точно, скільки разів потрібно повторити дію. Наприклад, можна використовувати його, щоб надрукувати серії епізодів:
for (let i = 0; i < 3; i++) {
console.log(Епізод ${i + 4}: Новий цикл);
}
Як працює:
- let i = 0 — починає з 4-го епізоду.
- i < 3 — зупиняється після трьох епізодів.
- i++ — переходить до наступного.
Використовувати, коли:
✅ Ви точно знаєте кількість ітерацій.
2. Цикл while — "Термінатор"
Цей цикл продовжується до тих пір, поки умова не стане хибною. Наприклад:
let count = 0;
while (count < 5) {
console.log(Я повернусь (${count}));
count++;
}
Ключовий момент:
Ви самі керуєте лічильником, і якщо забули збільшити його, цикл стане нескінченним.
Використовувати, коли:
✅ Не знаєте точно, скільки разів потрібно повторити дію.
3. Цикл do...while — "Момент з хрещенням"
Цей цикл гарантує, що хоча б один раз виконається дія, навіть якщо умова буде неправдивою. Наприклад, це корисно для отримання вводу користувача:
let input;
do {
input = prompt("Скажи привіт моєму маленькому другу:");
} while (input !== "hello");
Реальне використання:
Ідеальний для отримання вводу користувача хоча б один раз перед перевіркою.
4. Цикл for...of — "Збір супергероїв"
Цей цикл чудово підходить для перебору елементів масивів, рядків, мап чи наборів:
const heroes = ["Iron Man", "Thor", "Black Widow", "Hulk"];
for (const hero of heroes) {
console.log(${hero} вступив у бій.);
}
Переваги:
Не потрібно працювати з індексами, зосереджуєтесь на елементах.
Використовувати для:
✅ Масивів, рядків, мап, наборів тощо.
5. Цикл for...in — "Стиль Ocean's Eleven"
Цей цикл дозволяє перебирати властивості об'єкта:
const thief = {
name: "Danny Ocean",
role: "Mastermind",
target: "Bellagio Vault"
};
for (const key in thief) {
console.log(${key}: ${thief[key]});
}
Обережність:
Цей цикл також перебирає успадковані властивості, тому використовуйте його тільки для об'єктів.
Async/Await — "Часова афера"
Async/await полегшує обробку асинхронних операцій. Це як подорож у часі, коли все працює без помилок:
function fetchQuote() {
fetch("https://api.example.com/quote")
.then(response => response.json())
.then(data => console.log(data.quote))
.catch(error => console.error("Помилка:", error));
}
Це важко читається, коли логіка стає складнішою.
Вступ Async/Await: "Мені подобається, коли план спрацьовує"
Порівняно з обіцянками, async/await набагато зручніше:
async function fetchQuote() {
try {
const response = await fetch("https://api.example.com/quote");
const data = await response.json();
console.log(data.quote);
} catch (error) {
console.error("Помилка:", error);
}
}
Що змінилося:
- async змушує функцію повертати Promise.
- await призупиняє виконання до вирішення Promise, без заморожування додатка.
Імітація затримки — "Пробудження Матриці"
Це приклад симуляції затримки:
async function takeRedPill() {
console.log("Приймаю червону таблетку...");
const message = await new Promise(resolve =>
setTimeout(() => resolve("Ласкаво просимо до реального світу."), 2000)
);
console.log(message);
}
takeRedPill();
Виведення після 2 секунд:
Приймаю червону таблетку...
Ласкаво просимо до реального світу.
Паралельний Async — "Збір супергероїв"
Це дозволяє запускати кілька завдань одночасно і чекати, поки всі вони завершаться:
async function fetchHero(name) {
await new Promise(resolve => setTimeout(resolve, Math.random() * 2000));
return ${name} готовий!;
}
const message = await new Promise(resolve =>
setTimeout(() => resolve("Ласкаво просимо до реального світу."), 2000)
);
console.log(message);
}
takeRedPill();
Чому це класно:
Всі виклики fetchHero() стартують одночасно, що значно прискорює виконання.
Останній акорд: Цикли як професіонал, Async як герой
| Тип циклу | Найкраще для |
|----------------|-------------------------------------------------|
| for | Фіксована кількість ітерацій |
| while | Цикл до зміни умови |
| do...while | Гарантовано хоча б одна ітерація |
| for...of | Ітерація по масивах/рядках/мапах |
| for...in | Ітерація по властивостях об'єкта |
| async/await | Спрощення асинхронних операцій |
Як сказав Тоні Старк:
"Частина подорожі — це її кінець."
Але для тебе це лише початок освоєння JavaScript.
Перекладено з: 🎬 JavaScript Loops & Async/Await: Director’s Cut