Как правильно оформлять js код на многостраничном сайте?

Question

[SabAlex]

Коллеги, добрый день. Не могу сообразить, как корректно оформить js код на многостраничнике?
Суть в чем: на разный страницах есть различные элементы для которых подключаются скрипты. Например функция для слайдера. Но если этого слайдера нет, то строчка

document.getElementById('volume').addEventListener('input', fun1);

приводит к ошибке. Неужели перед всеми вызовами функций надо всегда писать нечто вроде
document.querySelectorAll(".element").length
и при тру выполнять код? Других подходов нет? А то все элементы оборачивать в проверку - это не похоже на удобное решение проблемы...

Comments

[Smirator]

Получается, что все скрипты лежат в одном файле?
Если верно понял, то не самое удобное решение. Правильнее будет подключать скрипты только на те страницы, где они используются. А не таскать всю простыню по всему сайту.

Answer 1

[Надим]

Достаточно одного вопросительного знака на самом деле:

document.getElementById('volume')?.addEventListener('input', fun1);

Comments

[Tim]

а на старые и не обновленные браузеры забить

Answer 2

[imko]

Либо условный оператор опциональной последовательности как написал Надим, либо искать элементы операторами возвращающими не один а коолекцию и перебирать ее с помощью forEach, тогда если элементов в ней нет ни одна итерация и не выполнится, соответственно не будет попытки повесить слушатель на несуществующий элемент

Comments

[Надим]

Что забавно, как этот оператор называется я узнал в сейчас лет от вас, хотя это и не мешало использовать его.