Опанування Циклу For у JavaScript

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

javascript

Ось розбір цих параметрів:

Initialization: Тут ви ініціалізуєте новий лічильник, який використовується циклом for. Він виконується лише один раз;
Condition: Вираз, що перевіряється перед кожною ітерацією, подібно до циклу while;
Increment/Decrement: Операції, що виконуються над лічильником в кінці кожної ітерації циклу.

Примітка

Ітерація в циклах відноситься до повторення блоку коду певну кількість разів або до досягнення певної умови. Кожен раз, коли блок коду виконується, це вважається однією ітерацією.

Давайте проілюструємо це прикладом:


              123
            
for (let i = 1; i < 5; i++) {
  console.log("Loop iteration:", i);
};

У цьому прикладі:

let i = 1: Ініціалізація, де ми створюємо змінну i всередині циклу for. Ця операція виконується один раз;
i < 5: Умова, яка перевіряється перед кожною ітерацією;
i++: Операція інкременту, яка виконується після кожної ітерації;
console.log("Loop iteration:", i);: Тіло циклу for.

Кожен крок у циклі можна описати наступним чином:

javascript

Крок 2 повторюється, поки умова не стане false.

Може бути корисним розглянути діаграму, щоб отримати чіткіше розуміння того, як працює цикл.

Ви також можете використовувати декремент у циклі for, як показано тут:


              123
            
for (let i = 15; i > 10; i--) {
  console.log("i =", i);
}

Лічильник циклу for унікальний для своєї області видимості, тому вам не потрібно турбуватися про конфлікт імені лічильника з іншими змінними:


              12345678
            
let i = 2077;
console.log("(global) i =", i);

for (let i = 0; i < 4; i++) {
  console.log("(for) i =", i);
}

console.log("(global) i =", i);

Також можуть використовуватися різні вирази для операцій інкременту/декременту:


              123
            
for (let i = 0; i < 40; i += 7) {
  console.log("i =", i);
};

Порівняння циклів for та while

При порівнянні циклів for та while, цикл for часто є простішим та більш лаконічним. Ось приклад еквівалентних циклів:


              1234567891011
            
// `while`
let a = 1;
while (a <= 3) {
  console.log("While:", a);
  a++;
}

// `for`
for (let i = 1; i <= 3; i++) {
  console.log("For:", i);
}

У цьому порівнянні, цикл for є більш простим і займає менше місця в коді. Крім того, цикл for автоматично очищає змінну лічильника (в даному випадку, i) після виконання.

Все було зрозуміло?

Дякуємо за ваш відгук!

Секція 5. Розділ 4