Почему работа for и forEach отличается?

Question

[Руслан Тимурзиев]

Объясните, почему forEach работает, а for нет. Это аккордеон. Вот работающий вариант с forEach:

(function accordeon() {
    var el = document.querySelectorAll('.faq-accordeon-item__question');
    for(var i = 0; i < el.length; i++) {
        el[i].addEventListener('click', function(e) {
            var show = document.querySelectorAll('.faq-accordeon-item__info');

            show.forEach(function(item) {
                item.style.display = 'none';
                console.log(32);
            });

            e.target.nextElementSibling.style.display = 'block';
        });
    }
})();

А вот неработающий с for:

(function accordeon() {
    var el = document.querySelectorAll('.faq-accordeon-item__question');
    for(var i = 0; i < el.length; i++) {
        el[i].addEventListener('click', function(e) {
            var show = document.querySelectorAll('.faq-accordeon-item__info');

            for(var i = 0; i < show.lenght; i++) {
                show[i].style.display = 'none';
                console.log(32);
            }

            e.target.nextElementSibling.style.display = 'block';
        });
    }
})();

Я, конечно, могу оставить forEach, но все же интересно, в чем разница между ними в данном контексте.

Comments

[S@rK]

А вы не считаете что переменная ключ во вложенных цыклах for должна отличатся у вас "i" в обеих цыклах

[Руслан Тимурзиев]

Не знаю, почему так вышло, когда был на работе, вроде писал j во втором for.

Answer 1

[Константин Китманов]

show.lenght — опечатка тут (вместо length).

Comments

[Руслан Тимурзиев]

Спасибо, консоль почему-то молчала про опечатку)

[Константин Китманов]

Руслан Тимурзиев: ну когда вы просто читаете неизвестное свойство, то просто получается undefined. С точки зрения JS i < undefined вполне себе легальная операция, ругаться не на что:)

Кстати сказать, for скорее всего быстрее чем forEach. И вроде бы не во всех браузерах у результата querySelectorAll будет свойство forEach.

Answer 2

[dom1n1k]

Использовать надо for.
Метод querySelectorAll возвращает не массив, а объект типа NodeList, в который метод forEach был добавлен совсем недавно.
https://developer.mozilla.org/en-US/docs/Web/API/N...
То есть работать это будет только в самых свежих браузерах (наверняка тестируете в последнем Хроме).
Ну либо надо полифил добавлять.

Comments

[Николай]

ну в данном случае проще таки в array скастить. Через Array.prototype.slice например.

[dom1n1k]

Можно, популярная практика, но особого смысла не вижу.
Экономии символов там не получается, а ресурсы все-таки подъедает.
Я так делаю только в случаях, если этот массив потом предполагается использовать многократно.

[Руслан Тимурзиев]

Все верно, в сафари смотрел, не работает forEach. Да и скорость у for выше.

[toly19]

+ два цикла используют переменную i
поменяй название переменной

[Руслан Тимурзиев]

toly19: Хорошо, спасибо.