JavaScript Void 0 – What Does javascript:void(0); Mean?
Dillion Megida
The word void means «completely empty space» according to the dictionary. This term, when used in programming, refers to a return of «nothing» — an «empty value» so to speak.
What is the void keyword?
When a function is void, it means that the function returns nothing. This is similar to functions in JavaScript which return undefined explicitly, like so:
or implicitly, like so:
Regardless of the expressions and statements in the functions above (adds 2 numbers together, finds the average of 5 numbers, whatever), there is no result returned.
Now we know what the void keyword is all about. What about javascript:void(0) ?
What is javascript:void(0) ?
If we split this up, we have javascript: and void(0) . Let’s look at each part in more detail.
javascript:
This is referred to as a Pseudo URL. When a browser receives this value as the value of href on an anchor tag, it interprets the JS code that follows the colon (:) rather than treating the value as a referenced path.
When «Link» is clicked, here is the result:
As seen above, the browser does not treat href as a referenced path. Instead, it treats it as some JavaScript code starting after «javascript:» and separated by semi-colons.
void(0)
The void operator evaluates given expressions and returns undefined .
1 + 1 is evaluated but undefined is returned. To confirm that, here’s another example:
The result of the above code is:
Here’s another example:
Combining javascript: and void(0)
Sometimes, you do not want a link to navigate to another page or reload a page. Using javascript: , you can run code that does not change the current page.
This, used with void(0) means, do nothing — don’t reload, don’t navigate, do not run any code.
The «Link» word is treated as a link by the browser. For example, it’s focusable, but it doesn’t navigate to a new page.
0 is an argument passed to void that does nothing, and returns nothing.
JavaScript code (as seen above) can also be passed as arguments to the void method. This makes the link element run some code but it maintains the same page.
When the button is clicked, this is the result:
With void , it tells the browser not to return anything (or return undefined ).
Another use case of links with the javascript:void(0) reference is that sometimes, a link may run some JavaScript code in the background, and navigating may be unnecessary. In this case, the expressions would be used as the arguments passed to void .
Conclusion
In this simplified article, we’ve learned what the void operator is, how it works, and how it is used with the javascript: pseudo URL for href attributes of links.
This ensures that a page does not navigate to another page or reload the current page when clicked.
Javascript void 0 что значит
You might have occasionally came across “javascript:void(0)” in an HTML Document. It is often used when inserting an expression in a web page might produce some unwanted effect. To remove this effect, “javascript:void(0)” is used. This expression returns undefined primitive value. This is often used with hyperlinks. Sometimes, you will decide to call some JavaScript from inside a link. Normally, when you click a link, the browser loads a brand new page or refreshes the same page (depending on the URL specified). But you most likely don’t desire this to happen if you have hooked up some JavaScript thereto link. To prevent the page from refreshing, you could use void(0).
Using “#” in anchor tag: When writing the following code in the editor, the web page is refreshed after the alert message is shown.
void operator
Оператор void вычисляет переданное выражение и возвращает undefined .
Синтаксис
Описание
Этот оператор позволяет вставлять выражения, которые производят дополнительные действия, в места, где ожидается undefined .
Оператор void часто используется для получения примитивного значения undefined , используя «void(0)» (что эквивалентно «void 0» ). В подобных случаях можно просто использовать глобальную переменную undefined (предполагая, что её значение по умолчанию не было изменено).
Самовызывающаяся функция (IIFE)
С оператором void можно использовать самовызывающиеся функции.
JavaScript URIs
Когда браузер переходит по javascript: URI , он вычисляет код в URI и заменяет содержание страницы возвращённым значением, если оно не равно undefined . Можно воспользоваться оператором void для возврата undefined . Например:
Однако заметим, что не рекомендуется использовать псевдо-протокол javascript: . Лучше прибегнуть к другим альтернативам, таким, как обработчики событий.
What does "javascript:void(0)" mean?
I’ve seen such href s many times, but I don’t know what exactly that means.
14 Answers 14
The void operator evaluates the given expression and then returns undefined .
The void operator is often used merely to obtain the undefined primitive value, usually using “ void(0) ” (which is equivalent to “ void 0 ”). In these cases, the global variable undefined can be used instead (assuming it has not been assigned to a non-default value).
An explanation is provided here: void operator.
The reason you’d want to do this with the href of a link is that normally, a javascript: URL will redirect the browser to a plain text version of the result of evaluating that JavaScript. But if the result is undefined , then the browser stays on the same page. void(0) is just a short and simple script that evaluates to undefined .
In addition to the technical answer, javascript:void means the author is Doing It Wrong.
There is no good reason to use a javascript: pseudo-URL(*). In practice it will cause confusion or errors should anyone try things like ‘bookmark link’, ‘open link in a new tab’, and so on. This happens quite a lot now people have got used to middle-click-for-new-tab: it looks like a link, you want to read it in a new tab, but it turns out to be not a real link at all, and gives unwanted results like a blank page or a JS error when middle-clicked.
<a href=»#»> is a common alternative which might arguably be less bad. However you must remember to return false from your onclick event handler to prevent the link being followed and scrolling up to the top of the page.
In some cases there may be an actual useful place to point the link to. For example if you have a control you can click on that opens up a previously-hidden <div > , it makes some sense to use <a href=»#foo»> to link to it. Or if there is a non-JavaScript way of doing the same thing (for example, ‘thispage.php?show=foo’ that sets foo visible to begin with), you can link to that.
Otherwise, if a link points only to some script, it is not really a link and should not be marked up as such. The usual approach would be to add the onclick to a <span> , <div> , or an <a> without an href and style it in some way to make it clear you can click on it. This is what StackOverflow [did at the time of writing; now it uses href=»#» ].
The disadvantage of this is that you lose keyboard control, since you can’t tab onto a span/div/bare-a or activate it with space. Whether this is actually a disadvantage depends on what sort of action the element is intended to take. You can, with some effort, attempt to mimic the keyboard interactability by adding a tabIndex to the element, and listening for a Space keypress. But it’s never going to 100% reproduce the real browser behaviour, not least because different browsers can respond to the keyboard differently (not to mention non-visual browsers).
If you really want an element that isn’t a link but which can be activated as normal by mouse or keyboard, what you want is a <button type=»button»> (or <input type=»button»> is just as good, for simple textual contents). You can always use CSS to restyle it so it looks more like a link than a button, if you want. But since it behaves like a button, that’s how really you should mark it up.
(*: in site authoring, anyway. Obviously they are useful for bookmarklets. javascript: pseudo-URLs are a conceptual bizarreness: a locator that doesn’t point to a location, but instead calls active code inside the current location. They have caused massive security problems for both browsers and webapps, and should never have been invented by Netscape.)