JavaScript void(0): что значит и зачем используется в href

hannadev

Вы наверняка сталкивались с конструкцией javascript:void(0) в коде ссылок. Это простой способ сделать ссылку неактивной, чтобы она не вела никуда, но выглядела как настоящая. Разберём, что она значит и почему до сих пор применяется.

Понимание этой штуки поможет избежать ошибок в интерфейсах и выбрать лучшие альтернативы. Мы разберём оператор void, его роль в JavaScript и реальные примеры из практики. Это сэкономит время на отладку и сделает код чище.

Что такое оператор void в JavaScript

Оператор void в JavaScript вычисляет любое выражение, но всегда возвращает undefined, независимо от результата. Это унарный оператор, который полезен, когда нужно запустить код без возврата значения. Например, void(5 + 3) посчитает сумму, но вернёт undefined. Такая особенность делает его удобным для сценариев, где результат не важен.

В контексте ссылок javascript:void(0) часто встречается в атрибуте href. Браузер видит javascript: и пытается выполнить код вместо перехода по URL. Void(0) гарантирует возврат undefined, так что страница не обновляется и не меняется. Это старый, но надёжный трюк из времён, когда обработчики событий были не такими удобными.

Вот базовые примеры работы void:

void 0 — вычисляет 0, возвращает undefined.
void console.log('Тест') — выводит сообщение в консоль, но результат undefined.
void (function(){ alert('Привет'); })() — запускает IIFE, не давая ей значения.

Выражение	Вычисляемое значение	Результат void
void 0	0	undefined
void(2+2)	4	undefined
void alert()	Выполняет alert	undefined

Зачем используют javascript:void(0) в ссылках

Конструкция javascript:void(0) популярна для создания ‘пустых’ ссылок, которые не должны вести на другие страницы. Представьте кнопку в форме или пункт меню, который открывает модалку через JavaScript. Без void клик мог бы вызвать обновление страницы или ошибку. Void предотвращает это, возвращая undefined, что браузер трактует как отсутствие действия.

В старых проектах это стандарт: href=“javascript:void(0)” плюс onclick с логикой. Альтернатива — href=“#”, но она прыгает на вершину страницы, если не отменить поведение. Void чище, потому что не двигает скролл и не требует дополнительного preventDefault. Однако в современном коде это считается устаревшим из-за проблем с доступностью и семантикой.

Типичные случаи применения:

Кнопки аккордеона или табов, где клик toggles контент.
Ссылки для AJAX-запросов без перезагрузки.
Модальные окна, лаунчеры попапов.

Важно: 0 в void(0) — просто заглушка, можно void(true) или void(‘abc’), результат всегда undefined.

Сравнение с современными альтернативами

Хотя javascript:void(0) работает, есть лучшие способы. Например, используйте <button> вместо <a>, если ссылка не ведёт на URL — это семантически правильно и не требует хаков. С addEventListener и event.preventDefault код становится читаемее и доступнее для скринридеров.

Другой вариант — href=“#” с return false в onclick, но он тоже проблематичен. Void выигрывает в простоте для inline-скриптов, но нарушает CSP в некоторых настройках HTTPS. В новых проектах переходят на делегирование событий и чистый JS без протокола javascript:.

Метод	Преимущества	Недостатки
javascript:void(0)	Быстро, не прыгает скролл	Устарело, проблемы с CSP
href=“#” + preventDefault	Просто	Прыгает на top
`<button>` + JS	Семантика, доступность	Меняем разметку
data-атрибуты + делегирование	Масштабируемо	Больше кода

Преимущества void всё же есть для быстрого прототипинга или legacy-кода.

Практические примеры и подводные камни

Давайте посмотрим код. Классическая пустая ссылка: <a href="javascript:void(0)" onclick="alert('Клик!')">Нажми</a>. Клик покажет алерт, страница не изменится. Теперь с void внутри: <a href="javascript:void(alert('Тест'))">Тест</a> — алерт сработает, но void сделает результат undefined.

Подводные камни: в строгом режиме переопределение undefined невозможно, но void всё равно гарантирует чистый undefined. Проблемы возникают с валидацией HTML — линтеры ругаются на javascript: в href. Плюс, для SEO пустые ссылки вредны, поисковики их не любят. Тестируйте в разных браузерах: старые IE иногда странно себя ведут.

Полезные примеры:

Отмена формы: href="javascript:void(0)" onclick="handleForm()".
Toggle класса: комбо с void и DOM-манипуляциями.
Загрузка контента: void + fetch без релоада.

Нюанс: Избегайте в production — лучше event-обработчики.

Void за пределами ссылок: другие применения

Оператор void не только для href. Его юзают для получения гарантированного undefined: let nothing = void 0;. В старом JS undefined можно было перезаписать, void спасал. Ещё в IIFE: void function(){ ... }() — запускает анонимку без утечки в scope.

В TypeScript void — тип для функций без возврата, но это отдельная история. В React или Vue void редко нужен, там события обрабатываются declarative. Но в ванильном JS void упрощает мини-скрипты. Помните: выражение внутри void выполняется, только значение глотается.

Короткий список трюков:

if (void 0) {} — всегда false.
В аргументах: функции, игнорирующие возврат.
С побочными эффектами: логи, присваивания.

Когда void всё ещё актуален в 2026

Несмотря на альтернативы, javascript:void(0) живёт в миллионах сайтов. Это компромисс между простотой и функционалом для простых задач. В legacy-проектах его трогать рискованно — лучше мигрировать поэтапно на кнопки и обработчики.

Остаётся подумать о контексте: для SPA void не нужен, а для статических страниц — вариант. Изучите addEventListener, чтобы код был future-proof. В итоге void — инструмент в арсенале, но не основной.