Почему цикл for работает так?

Question

[rinatoptimus]

for (i = 0; i < 5; i++) {
  console.log(i);
}
console.log('after loop', i);

Почему console.log('after loop', i); выводит after loop 5, а не after loop 4?

Answer 1

[Алексей Уколов]

Потому что последняя часть блока for выполняется в самом конце 4-ой итерации и только после этого срабатывает следующая проверка, которая завершает цикл.
Возможно, вам станет яснее, если оформить эту логику иначе:

var i = 0;

while (true) {
  if (i >= 5) {
    // Здесь i равен 5
    break;
  }

  console.log(i);

  i++; // в тот момент, когда i становится равным 4-ём, цикл ещё работает и инкремент выполняется
}

console.log('after loop', i);

Answer 2

[akass]

И что странного? Вывел 4, сделал инкремент, проверил условие, вышел. Но после инкремента уже 5. https://learn.javascript.ru/while-for

Comments

[rinatoptimus]

"Но после инкремента уже 5", а так как выводим только те, что меньше пяти, пятерку не выводим. А она выводится. Никак не уловлю.

[akass]

rinatoptimus: Так 5 выводится уже не в цикле. Переменная же осталась доступной.

Answer 3

[Dark Hole]

Все очень просто for это
for(инициализация; проверка; изменение) действие;
Так вот, он работает так -

1. Инициализация
   
2. Проверка
   Если проверка - false - закончить цикл
   Иначе - продолжить
3. Действие
   
4. Изменение - далее опять на 2
   

После 4того раза мы прибавляем к i 1. Ясен пень, она становится 5. После чего проверка нам дает false и цикл прекращается. Но 5-то никуда не делась?

Если вы все-равно ничего не поняли, объясню проще.
Чтобы цикл прекратился проверка должна вернуть false, верно? Т.к. 4 удовлетворяет она будет напечатана в цикле , улавливаете? 4++ - это уже 5. А 5 < 5 возвратит false. Если она вернется в 4 - то цикл просто не сможет закончится... то она должна снаружи не удовлетворять проверку.

PS Странно, что у вас он вообще работает - область видимости i - только в цикле.

Comments

[Алексей Уколов]

область видимости i - только в цикле

Воу-воу-воу, вы что? Не говоря уже о том, что в коде в принципе нет var, в js нет блочной области видимости и есть hoisting.

Answer 4

[gleendo]

Жизненный цикл переменной i из вашего примера:
1. i = 0 (Удовлетворяет условию)
2. i = 1 (Удовлетворяет условию)
3. i = 2 (Удовлетворяет условию)
4. i = 3 (Удовлетворяет условию)
5. i = 4 (Удовлетворяет условию)
6. i = 5 (Не удовлетворяет условию) 5 не меньше 5. Выходим из цикла.
7. Выводим в консоль i. Смотрим на последнюю (шестую) итерацию. i = 5. Выводится 5.

Comments

[Dark Hole]

опоздали))

[rinatoptimus]

Но ведь в 6 шаге i < 5, а не равно 5. Откуда вы берете, что i = 5?

[gleendo]

rinatoptimus: На пятом шаге i равно 4 и увеличивается на один постинкрементом (i++). А значит после итерации цикла i будет равно 5. На шестом снова заходим в цикл, проверяем условие (i < 5). В это время i уже равно 5 и значит условию не удовлетворяет. Выходим из цикла и вызываем console.log. Выведется 5.

[rinatoptimus]

evg_: Спасибо, вот теперь ясно! Спасибо всем!

Answer 5

[sitev_ru]

Заменил for на while - стало понятнее...

var i = 0;
while (i < 5) {
  console.log(i);
  i++;
}
console.log('after loop', i);

Выход из цикла если 5 < 5

Comments

[rinatoptimus]

Когда i стало равным 5, почему он все равно выводит 5? Это же не удовлетворяет условию.

[sitev_ru]

он же выводит ПОСЛЕ ЦИКЛА!!!

[rinatoptimus]

sitev_ru: 0 меньше 5? Да, выводим. 1 меньше 5? Да, выводим. 2 меньше 5? Да, выводим. 3 меньше 5? Да, выводим. 4 меньше 5? Да, выводим. 5 меньше 5? Нет, но п...й, выводим.
Так получается?

[sitev_ru]

rinatoptimus, 0 меньше 5? Да, выводим. 1 меньше 5? Да, выводим. 2 меньше 5? Да, выводим. 3 меньше 5? Да, выводим. 4 меньше 5? Да, выводим. 5 меньше 5? Нет, не выводим...

[rinatoptimus]

sitev_ru: выводится же: joxi.ru/Rmz9NXXSWPRzqr

[sitev_ru]

rinatoptimus, ну и в какой строчке? приглядись внимательнее... я не вижу)))

[sitev_ru]

rinatoptimus, выводится 0, 1, 2, 3, 4

[sitev_ru]

rinatoptimus, а строчка "after loop" выводится не в цикле, а ПОСЛЕ ЦИКЛА!