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

Проблемы с var

Ключевое слово var имеет функциональную область видимости, а не блочную, что часто приводит к неожиданному поведению. Переменные, объявленные через var, всплывают (hoisting) в начало функции, но остаются неинициализированными до строки присваивания. Это может вызвать ошибки, когда переменная используется до её объявления.

// Пример проблемы с var
function example() {
  console.log(x); // undefined, а не ошибка
  var x = 10;
  if (true) {
    var x = 20; // переопределяет внешнюю x
  }
  console.log(x); // 20
}

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

Проблемы с querySelectorAll()[0]

Метод querySelectorAll возвращает статическую NodeList, и доступ по индексу [0] жёстко привязан к порядку элементов в DOM. Если HTML-структура изменится (например, добавится новый элемент перед целевым), код перестанет работать корректно. Лучше использовать querySelector, который возвращает первый подходящий элемент, или присваивать элементам уникальные идентификаторы.

// Плохая практика
const firstButton = document.querySelectorAll('button')[0];

// Хорошая практика
const firstButton = document.querySelector('button');
// Или с уникальным id
const submitButton = document.querySelector('#submit-btn');

Также querySelectorAll()[0] менее производителен, так как сначала собирает все элементы, а затем берёт первый.

Вывод

Используйте let/const для объявления переменных и querySelector или уникальные идентификаторы для доступа к DOM-элементам. Это делает код более предсказуемым, безопасным и устойчивым к изменениям.