Как изменяется переменная в цикле события?

Question

[xenonhammer]

const button = document.getElementById('button');

	button.addEventListener('click', function (e){
		for (var i = 0; i < 3; i++){
			console.log(i);
		}
	});
button.click();

Ребят я не понимаю -> вот то что на верху при вызове события, будет в цикле изменять i. и тогда будет выводится в консоле 0 1 2. Это понятно, но если чуть чуть поменять функцию,

const button = document.getElementById('button');
for (var i = 0; i < 3; i++){
	button.addEventListener('click', function (e){
		console.log(i);
	});
}
button.click();

то я не понимаю почему выводится 3??? как она получается, объясните пожалуйста на пальцах

Answer 1

[Dima Polos]

Нашли кнопку, сохранили ссылку.
Запустили цикл. Появилась переменная i = 0;
На клик по кнопке повесили функцию, которая КОГДА КЛИКНУТ на кнопку возьмет переменную i и выведет в консоль.
Цикл не закончился, переменная i = 1;
На клик по кнопке повесили ЕЩЕ такую же функцию.
Цикл не закончился, переменная i = 2;
На клик по кнопке повесили ЕЩЕ такую же функцию.
Цикл продолжается, но теперь i = 3, условие цикла дает false, цикл прекратился, но i = 3.
По кнопке кликнули....
Запустилась функция номер раз: ищет переменную i, находит, а там 3 -> в консоль ее.
Запустилась функция номер два: ищет переменную i, находит, а там 3 -> в консоль ее.
Запустилась функция номер три: ищет переменную i, находит, а там 3 -> в консоль ее.
ИТОГО: в консоли три тройки.

Comments

[xenonhammer]

Получается что в for при (i=3; 3<3; i++) инкремент все равно происходит, даже если тело функции не исполняется? Теперь все понятно, спасибо

[Dima Polos]

xenonhammer, инкремент происходит в конце каждой итерации, а проверка условия вначале. Механизм этого цикла такой:
1. До запуска создается переменная var i = 0;
2. Проверка условия если true- шаг 3, иначе циклу конец.
3. Тело цикла.
4. В конце тела выполняется инкремент, или то, что укажите в последней секции условия -> (var i = 0; i < 3; ВОТ ЭТО), в конкретном случае - инкремент, а можно там что угодно написать, в принципе, любое выражение.
То есть, i =2 -> в тело цикла заходим, но перед выходом еще раз i++, это еще в теле второй итерации произойдет, и i станет 3. Дальше снова шаг 2, и тут то условие даст false, и тело не исполнится и инкремент не сработает уже тоже.

[Dima Polos]

xenonhammer, https://t.me/school_ofpery тут по циклам есть инфа

[xenonhammer]

Dima Polos, неправильно написал, был в шоке от инсайда))) хотел написать (i=2; 2<3; i++), но все же теперь, все понятно. Спасибо еще раз

Answer 2

[quiplunar]

Правильно, должно выводиться 3, так как при компиляции кода for выполняется 3 раза, и 3 раза добавляется на кнопку событие клика. После выполнения всех итерация i будет равна последнему значению и при клике оно показывается, так как при клике for не срабатывает, т.к он не в функции клика и выполняется при компиляции.

Так-же замените это:

const button = document.getElementById('button');

На современный способ:

const button = document.querySelector('#button');

И вот это:

button.addEventListener('click', function (e){
     console.log(i);
});

На это:

button.addEventListener('click', (event) => {
     console.log(i);
});

(ОПАСНО, менять на стрелочную функцию только при понимании того как она работает, при не уверенности не использовать данный совет)

Comments

[Dima Polos]

Зачем менять обработку клика на стрелочную функцию?

[quiplunar]

Dima Polos, А почему бы и нет? Стрелочная функция выглядит на много элегантнее. Обычные функции нужно использовать только там где нужно сохранить this и если функция не анонимная. Во всех других случаях стрелочная функция лучше выглядит и лучше читается.

[Dima Polos]

quiplunar, окей, согласен) просто если человек только учится, то он скорее всего нюансы с this и кроссбраузерностью не в курсе, так что может потом сам себе в ногу выстрелить) Вот с querySelector - соглашусь, а стрелка - опасно, так как иногда удобно в колбеке через this поработать именно с виновником запуска обработчика.

[quiplunar]

Dima Polos, Да, вы правы. Добавил предупреждение))

Answer 3

[Данил Щучкин]

Это происходит потому что у тебя в начале проходит цикл до того момента пока i не становится равной 3, но при этом addEventListener не срабатывает (он работает только при клике).
А когда ты кликаешь срабатывает addEventListener где i уже равно 3