В чем причина разной работы JS с let и var?

Question

[Vallllez]

Для примера имеется несколько кнопок управления видео на сайте к которым с помощью цикла добавлям EventListener.

<article>
                <video>
                    <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
                    Your browser does not support the video tag.
                </video>
                <div class="controlbtn">
                    <button class="btnPlay">Play</button>
                </div>
            </article>
<article>
                <video>
                    <source src=http://techslides.com/demos/sample-videos/small.webm type=video/webm>
                    Your browser does not support the video tag.
                </video>
                <div class="controlbtn">
                    <button class="btnPlay">Play</button>
                </div>
            </article>

window.addEventListener("load", function(event) {

    var videos = document.getElementsByTagName("video");
    var btnsPlay = document.getElementsByClassName("btnPlay");

    for (let i = 0; i < videos.length; i++) {    //var?
        btnsPlay[i].addEventListener("click", function (event) {
            videos[i].play()
        });
    }});

Стоит заменить let на var и получаем ошибку.
Из этого ищу ответ на несколько вопросов:
1.Какова причина разного результата?
2. Что нужно изменить для работы с var?
3.В каких случаях стоит применять let а в каких var?

Comments

[Vallllez]

Антон Спирин, Cannot read property 'play' of undefined
at HTMLButtonElement.

ошибка есть. спецификацию читал. Поэтому и вопрос

[Cursedproha]

Vallllez, берется последнее значение i, когда условие "i < videos.length" уже не выполняется. От того и ошибка.

[Антон Спирин]

Vallllez, просмотрел, что у вас слушатель. Извините. Причина в том, что при var i продолжает существовать после итерации, так как поднимается в глобальный контекст и во всех случаях вызова слушателя берется последнее значение i, а оно в вашем случае равно length, а это выход за индекс массива videos. В случае с let переменная используется локально, перестает существовать поле итерации и на момент вызова слушатель использует значение полученное в момент итерации.
Вот песочница https://jsfiddle.net/o9fcc8sz/
Понажимайте кнопки, посмотрите консоль, а потом замените var на let и попробуйте снова.
Думаю поймете суть.

Добавил в ответ.

Answer 1

[Kovalsky]

Ну это же уже миллиарды раз обсосано, обсуждено, оговорено и так далее; зачем вы задаёте новый вопрос, если очевидно что ответы на все ваши вопросы есть в интернетах.

Comments

[Vallllez]

Спасибо за ответ. Может подскажете что нужно поменять для работы с var? Для того чтобы разобраться на одном примере.

[Kovalsky]

Vallllez, learn.javascript.ru: армия функций

Answer 2

[Антон Спирин]

Причина в том, что при var i продолжает существовать после итерации, так как поднимается в глобальный контекст и во всех случаях вызова слушателя берется последнее значение i, а оно в вашем случае равно length, а это выход за индекс массива videos и как следствие исключение и остановка выполнения приложения. В случае с let переменная используется локально, перестает существовать поле итерации, а на момент вызова слушатель использует значение полученное в момент итерации.
Вот песочница https://jsfiddle.net/m97rsq0a/
Понажимайте кнопки, посмотрите консоль, а потом замените var на let и попробуйте снова.
Думаю поймете суть.

Comments

[Vallllez]

Спасибо за подробный ответ!

Answer 3

[akavato]

let это локальные переменные, не поднимаются, var поднимаются.