Why use void(0)?

Question

Let's assume for a moment that you must create a JavaScript link that doesn't have a meaningful href. (I know that this practice is questionable.) In this case, why do so many people use...

<a href="javascript:void(0);"> My link </a>

Knowing that void(0) evaluates to undefined, can I simply use the following logic?

<a href="javascript:undefined;"> My link </a>

You can redefine actually `undefined`, and void is useful for non trivial code in javscript links. — Tim Seguine, Dec 19 '13 at 15:02
@Tim actually, you *could* in ES3. This has been changed in ES5 - you can no longer redefine `undefined` in the global scope, attempting to do so will fail silently. — Fabrício Matté, Dec 19 '13 at 15:02
I usually prefer `My link`. Just remember to add `event.preventDefault()` in the handler. — gen_Eric, Dec 19 '13 at 15:02
@RocketHazmat if you will not prevent default behaviour in JS this method will add `#` to url + will scroll page to top — antyrat, Dec 19 '13 at 15:04
@hawkharris.... Curious, even if using the Strict DocType. Why is it ever necessary to create an anchor that does not link. Seems to me that you are creating clickable text that does not link to another site. And would it not make more sense to create a instead — John Hartsock, Dec 19 '13 at 15:06
@JohnHartsock sometimes people use it to style a text like an anchor tag or just make it and leave to implement it later. — Mohammad Areeb Siddiqui, Dec 19 '13 at 15:07
The first answer of this question deserved to be read : [http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0][1] [1]: http://stackoverflow.com/questions/134845/href-attribute-for-javascript-links-or-javascriptvoid0 — Guillaume Raymond, Dec 19 '13 at 15:07
@Mohammad Areeb Siddiqui ... I understand your explanation, but I would say that using tags like that would be, in my opinion, a hack. Utilizing proper semantics with HTML is important. An anchor ( tag) should be used for links, and not for styling, styling should be implemented using CSS. — John Hartsock, Dec 19 '13 at 15:16
It definitely is a hack, but it's a semantic grey area when considering single-page webapps, where clicking on a link gives the client a new page dynamically from the client, rather than asking for a new resource from the server. Especially if it's stateful, where a populated `href` would be misleading. — James M. Lay, Dec 19 '14 at 11:48

score 3 · Accepted Answer · edited Jun 20 '20 at 09:12

Why people use void(x) instead of undefined?

Well both would work but undefined is a reserved variable and its value can be changed:

undefined = true;

This will give true instead of undefined.

Where as void() is a keyword which always returns undefined. Whatever you place inside the keyword:

void('return false plox'); //will return false

More info on this topic here: What does `void 0` mean?

jsFiddle

Note that <a href="#"> is not the same as it still acts as a link and will redirect you, where as the previous methods will cancel the event(similar to event.preventDefault).

Update

Since ECMAScript 5, the global undefined variable is no longer directly editable (See for example Mozilla docs). It now simply shadows the global variable as some have noted.

"`undefined` is a reserved variable and its value can be changed", really? Could you clarify? I've just made this quick test in my Chrome console : `undefined = true; undefined`, but `undefined` is still `undefined`. — , Dec 19 '13 at 15:22

score 1 · Answer 2 · answered Dec 19 '13 at 15:24

There are three differences,

void evaluates the given expression and then returns the undefined
window.undefined is writable whereas void operator will always return undefined
void has fewer characters and results in smaller code, if you are using lot of them

Also, if you are using void to return undefined then you can simply use void 0, which is equivalent to void(0).

Why use void(0)?

2 Answers2

jsFiddle

Linked