Если вы вдруг видели конструкцию javascript:void(0) в коде, но не до конца понимали, зачем это нужно, то сегодня будем закрывать этот пробел. Такое часто встречается в HTML, особенно в ссылках, и используется для отмены их стандартного поведения. В общем, посмотрим, что делает javascript:void(0)и когда его стоит, а когда не стоит использовать.
Понимание оператора void
В JavaScript оператор void() используется, когда нужно выполнить выражение, но не возвращать никакого значения (то есть undefined). Проще говоря, он позволяет выполнить код без каких-либо побочных эффектов, связанных с возвратом значений.
Самый частый вариант его использования — тот самый javascript:void(0). Это выражение встречается в HTML-документах, чаще всего в атрибуте href у ссылок. Оно позволяет сделать так, чтобы ссылка никуда не вела и не перезагружала страницу при клике.
Что такое javascript:void(0)
Запись javascript:void(0) — это выражение, которое выполняет код и всегда возвращает undefined. Оно часто используется в HTML-документах, чтобы предотвратить стандартное поведение браузера при выполнении определённых действий.
Чаще всего пишут void 0, потому что 0 — это просто удобная заглушка, но можно подставить любое другое значение (void 1, void true). Главное, что результат всегда будет undefined, а код — предсказуемым.
Синтаксис javascript:void(0)
Синтаксис очень простой, смотрите сами:
void выражение
где выражение — это любой код, который нужно выполнить. И поскольку оператор void всегда возвращает undefined, результат выполнения этого выражения не имеет значения.
Несколько примеров, которые показывают, как работает void:
console.log(void 1); // undefined
void console.log("Это выражение выполнилось, но вернуло undefined");
// Можно использовать в IIFE (немедленно вызываемые функции)
void function() {
console.log("Функция вызвалась и отработала");
}();
В первом случае void просто игнорирует результат выражения и возвращает undefined. Во втором — выполняет console.log, но не возвращает ничего. В третьем примере void используется перед немедленно вызываемой функцией (IIFE), чтобы явно указать, что её результат не имеет значения.
Примеры использования
Оператор javascript:void(0); чаще всего используется в ссылках и обработчиках событий, когда нужно запустить JavaScript-код без перезагрузки страницы и изменения URL. Это удобно, когда мы хотим:
- Запретить стандартное поведение ссылок (чтобы страницу не перебрасывало вверх при
href=”#”). - Запускать скрипты при клике на элементы, не вызывая переходов.
- Обрабатывать события без изменения текущего состояния страницы.
Дальше разберём подробнее.
Пример использования с onClick
В HTML ссылки <a> по умолчанию ожидают, что у них будет атрибут href с адресом. В принципе, его можно вообще не указывать — ссылка всё равно останется кликабельной, но в разных браузерах поведение может отличаться. Например, может не выглядеть как обычная ссылка (не будет подчёркивания и курсора в виде руки).
Если <a> нужна только для JavaScript (обработка onClick), то часто в href ставят якорную ссылку на какую-то часть страницы, которая в нашем случае не ведёт никуда #:
<a href=”#” onclick=”changeText();”>Нажми меня</a>
Проблема в том, что у # есть побочный эффект: браузер воспринимает его как якорь и при клике либо перебрасывает страницу вверх (если нет других id на странице), либо изменяет URL, добавляя #.
Чтобы этого избежать, вместо # используют javascript:void(0);:
<a href=”javascript:void(0);”>Ссылка</a>
Теперь браузер не будет выполнять переход, а просто запустит JavaScript-код (который всё равно ничего не сделает).
Вывод до нажатия
Допустим, нам нужно, чтобы при клике на ссылку <a> изменялся текст в элементе <p>:
<p id="message">До нажатия</p>
<a href="javascript:void(0);" onclick="changeText();">Нажми меня</a>
<script>
function changeText() {
document.getElementById("message").innerText = "После нажатия";
}
</script>
Что здесь происходит:
- Элемент
<p>изначально содержит текст «До нажатия». - При клике на ссылку
<a>сjavascript:void(0);браузер не выполняет переход. - Запускается функция
changeText(), которая меняет текст в<p>на «После нажатия».
В итоге использование javascript:void(0); в href предотвращает перезагрузку страницы и изменение URL.
Вывод после нажатия
Другой вариант — изменить текст самой ссылки, то есть элемента <a>, после клика. Удобно, если нужно показать, что действие уже выполнено.
<a href=”javascript:void(0);” onclick=”this.innerText = ‘После нажатия'”>До нажатия</a>
Что происходит:
- По умолчанию ссылка отображается с текстом «До нажатия».
- При клике
this.innerText = ‘После нажатия’меняет текст самой ссылки. - Страница не обновляется, ссылка остаётся активной, но с новым текстом.
Это простой способ динамически менять контент без перезагрузки страницы.
Цвет ссылки
По умолчанию браузеры меняют цвет ссылок после их посещения (обычно с синего на фиолетовый). Но если ссылка <a> использует javascript:void(0), браузер не считает её переходом, и цвет остаётся прежним.
<a href=”javascript:void(0);” onclick=”alert(‘Просто кликнули!’)”>Кликни меня</a>
После клика ссылка не станет посещённой и её цвет не изменится. Это полезно, если хочется сохранить стиль элементов, но при этом обрабатывать клик на JavaScript.
Зачем использовать javascript:void(0)?
Когда нужно выполнить JavaScript-код по клику на ссылку, но при этом не хочется, чтобы страница перезагружалась или куда-то уезжала:
- Чтобы ссылки не перезагружали страницу. Например, если у нас кнопка в
<a>, но обработка клика идёт через JS. - Когда нужно просто запустить скрипт. Например, открыть модальное окно или сменить текст на странице.
- Чтобы избежать побочных эффектов. В некоторых случаях браузер может использовать то, что возвращает функция, а
voidпомогает это проигнорировать.
Но javascript:void(0); не единственное решение. Есть способы получше.
Когда избегать использования javascript:void(0)
В 2025 году javascript:void(0); уже не считается хорошей практикой. Сейчас есть более удобные и читаемые способы добиться того же результата. Но в легаси-коде этот приём всё ещё встречается, поэтому полезно понимать, как это работает.
Конструкция javascript:void(0); удобна тем, что её можно вставить прямо в HTML без лишнего кода в JavaScript. Она мгновенно предотвращает переход по ссылке и не требует дополнительных обработчиков. Но главный недостаток — это устаревший стиль написания кода. В современном фронтенде стараются разделять логику и разметку, поэтому инлайновый JavaScript типа href=”javascript:void(0); — плохая практика.
Лучше делать так:
- Вместо
javascript:void(0);в ссылках использоватьevent.preventDefault()для предотвращения стандартного поведения. - Вместо
void function() { … }();для IIFE использовать(() => { … })();или(function() { … })();. - JavaScript-ссылки
href=”javascript:void(0);”лучше заменить на<button>или вешать обработчик событий через JS.
В редких случаях void используют, чтобы явно указать, что результат функции должен игнорироваться. Например, void doSomething(); в обработчиках событий, чтобы избежать нежелательных побочных эффектов (если doSomething() что-то возвращает, а браузер интерпретирует это как команду).
Но даже такие сценарии встречаются всё реже, так что лучше использовать современные альтернативы.
Вам слово
Приходите к нам в соцсети поделиться своим мнением о статье и почитать, что пишут другие. А ещё там выходит дополнительный контент, которого нет на сайте: шпаргалки, опросы и разная дурка. В общем, вот тележка, вот ВК — велком!
