What does javascript:void(0) mean?
The
void
operator evaluates the given
expression and then returnsundefined
.The
void
operator is often used merely
to obtain theundefined
primitive
value, usually using “void(0)
” (which
is equivalent to “void 0
”). In these
cases, the global variableundefined
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
.
What does `void 0` mean?
What does void 0
mean?
void
[MDN] is a prefix keyword that takes one argument and always returns undefined
.
Examples
void 0
void (0)
void "hello"
void (new Date())
//all will return undefined
What's the point of that?
It seems pretty useless, doesn't it? If it always returns undefined
, what's wrong with just using undefined
itself?
In a perfect world we would be able to safely just use undefined
: it's much simpler and easier to understand than void 0
. But in case you've never noticed before, this isn't a perfect world, especially when it comes to Javascript.
The problem with using undefined
was that undefined
is not a reserved word (it is actually a property of the global object [wtfjs]). That is, undefined
is a permissible variable name, so you could assign a new value to it at your own caprice.
alert(undefined); //alerts "undefined"
var undefined = "new value";
alert(undefined) // alerts "new value"
Note: This is no longer a problem in any environment that supports ECMAScript 5 or newer (i.e. in practice everywhere but IE 8), which defines the undefined
property of the global object as read-only (so it is only possible to shadow the variable in your own local scope). However, this information is still useful for backwards-compatibility purposes.
alert(window.hasOwnProperty('undefined')); // alerts "true"
alert(window.undefined); // alerts "undefined"
alert(undefined === window.undefined); // alerts "true"
var undefined = "new value";
alert(undefined); // alerts "new value"
alert(undefined === window.undefined); // alerts "false"
void
, on the other hand, cannot be overidden. void 0
will always return undefined
. undefined
, on the other hand, can be whatever Mr. Javascript decides he wants it to be.
Why void 0
, specifically?
Why should we use void 0
? What's so special about 0
? Couldn't we just as easily use 1
, or 42
, or 1000000
or "Hello, world!"
?
And the answer is, yes, we could, and it would work just as well. The only benefit of passing in 0
instead of some other argument is that 0
is short and idiomatic.
Why is this still relevant?
Although undefined
can generally be trusted in modern JavaScript environments, there is one trivial advantage of void 0
: it's shorter. The difference is not enough to worry about when writing code but it can add up enough over large code bases that most code minifiers replace undefined
with void 0
to reduce the number of bytes sent to the browser.
href= javascript: vs. href= javascript:void(0)
It does not cause problems but it's a trick to do the same as PreventDefault
when you're way down in the page and an anchor as:
<a href="#" onclick="fn()">click here</a>
you will jump to the top and the URL will have the anchor #
as well, to avoid this we simply return false;
or use javascript:void(0);
regarding your examples
<a onclick="fn()">Does not appear as a link, because there's no href</a>
just do a {text-decoration:underline;}
and you will have "link a-like"
<a href="javascript:void(0)" onclick="fn()">fn is called</a>
<a href="javascript:" onclick="fn()">fn is called too!</a>
it's ok, but in your function
at the end, just return false;
to prevent the default behavior, you don't need to do anything more.
Why use javascript:void(0) instead of # in href?
<a href="#">link</a>
adds # to the browser url and jumps to the top of the page.
<a href="javascript:void(0);">link</a>
simply "ignores" the link click.
<a href="#" onclick="return false;">link</a>
also ignores the href.
Don't forget that in some cases javascript might be disabled (very uncommon).
why we are using javascript:void(0) in Angular code
javascript:void(0)
The snippet show above simply ignores the link "click." This can be done in a similar fashion by the following:
<a href="#" onclick="return false;">link</a>
Related Topics
JavaScript "New Array(N)" and "Array.Prototype.Map" Weirdness
Link and Execute External JavaScript File Hosted on Github
++Somevariable Vs. Somevariable++ in JavaScript
How to Prevent a Parent'S Onclick Event from Firing When a Child Anchor Is Clicked
What Are These Three Dots in React Doing
How to Interpolate Variables in Strings in JavaScript, Without Concatenation
What's the Best Way to Detect a 'Touch Screen' Device Using JavaScript
Can You Bind 'This' in an Arrow Function
How to Get Function Parameter Names/Values Dynamically
Json: Why Are Forward Slashes Escaped
How to Distinguish Between Left and Right Mouse Click With Jquery
How to Reload a Page Using JavaScript
Passing Data Between Controllers in Angular Js
Filter Array of Objects Based on Another Array in JavaScript
What Is JavaScript Garbage Collection
How to Check If Element Is Visible After Scrolling