Использование var считается плохой практикой, потому что у него функциональная область видимости, а не блочная, что может привести к неожиданным ошибкам из-за поднятия (hoisting) и переопределения переменных. Современный JavaScript рекомендует использовать let и const, которые имеют блочную область видимости и предотвращают многие типичные ошибки.

Поиск элементов по индексу, например querySelectorAll()[0], тоже нежелателен, так как:

Возвращаемый NodeList может быть пустым, и обращение по индексу без проверки приведёт к ошибке.
Такой код менее читаем и неявно зависит от порядка элементов в DOM, что снижает устойчивость к изменениям разметки.

Лучше использовать методы, которые возвращают один элемент, например querySelector(), или явно проверять наличие элементов перед обращением по индексу.

Пример правильного подхода:

const firstButton = document.querySelector('button.primary');
if (firstButton) {
  firstButton.addEventListener('click', () => {
    console.log('Кнопка нажата');
  });
}

Таким образом, использование let/const и более явных методов поиска элементов повышает читаемость, безопасность и поддержку кода.

Почему использование var и поиск элементов по индексу (querySelectorAll()[0]) является плохой практикой?