Что значит javascript:void(0) и зачем это использовать в ссылках?

Что такое javascript:void(0) и как это работает

Давайте разберёмся по порядку. Конструкция javascript:void(0) состоит из двух частей:

• javascript: — это псевдо-протокол (как http: или ftp:). Когда браузер видит такой href, он вместо перехода по URL выполняет JavaScript-код, который идёт после двоеточия.
• void(0) — это оператор void, который вычисляет выражение в скобках и всегда возвращает undefined. 0 — просто самое короткое выражение, можно было написать void(1) или void('hello') — результат тот же.

Зачем это нужно? Когда пользователь кликает по ссылке, браузер пытается перейти по URL из href. Если там обычная страница — происходит переход. Если там javascript: — выполняется код. Но после выполнения кода браузер смотрит на результат. Если результат — строка, он пытается открыть её как новую страницу (это плохо). А если результат — undefined, браузер ничего не делает. void(0) гарантирует, что вернётся именно undefined.

Пример для понимания

Сравните три варианта:

<!-- Вариант 1: без void — плохо -->
<a href="javascript:alert('Привет')">Кликни</a>
<!-- После alert браузер попытается открыть undefined как страницу — ничего страшного, но некрасиво -->

<!-- Вариант 2: с void — правильно -->
<a href="javascript:void(alert('Привет'))">Кликни</a>
<!-- void гарантирует, что после alert вернётся undefined, и страница не изменится -->

<!-- Вариант 3: современный способ -->
<a href="#" onclick="event.preventDefault(); alert('Привет')">Кликни</a>
<!-- event.preventDefault() отменяет стандартное поведение ссылки -->

Почему это устарело

В современной разработке javascript:void(0) считается плохой практикой по нескольким причинам:

• Нарушает принцип прогрессивного улучшения — если у пользователя отключён JavaScript, ссылка просто ничего не делает (вместо того чтобы вести на реальную страницу-заглушку).
• Плохо для SEO и доступности — скринридеры и поисковые боты не понимают такие ссылки.
• Усложняет отладку — в консоли разработчика такие ссылки выглядят как "javascript:void(0)", что неинформативно.

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

Лучше использовать <button> для действий (открыть модалку, отправить форму) или обычные ссылки с event.preventDefault():

<!-- Для действий используйте button -->
<button onclick="myFunction()">Нажми меня</button>

<!-- Если очень нужно именно ссылка (например, стилизация) -->
<a href="#" onclick="event.preventDefault(); myFunction()">Нажми меня</a>

<!-- Идеальный вариант: ссылка с реальным fallback -->
<a href="/help/page" onclick="event.preventDefault(); openModal()">Открыть справку</a>
<!-- Если JS выключен, пользователь перейдёт на страницу /help/page -->

Таким образом, javascript:void(0) — это исторический костыль, который решал проблему "ссылка не должна никуда вести". Сегодня от него лучше отказаться в пользу более современных и доступных подходов.