What is javascript:void(0)?

If you have done any web development, you have most likely seen javascript:void(0) in some HTML files that you were working on.

What javascript:void(0) is most commonly used for is to return undefined when an anchor tag is clicked, while you are on the page that the href attribute value is pointing to.

What this means is that if you press, for example, the Home page of a website, while you are on the home page of that specific website, JavaScript will return undefined. That way nothing will happen and the page will not be refreshed.

Here is how the tag usually looks like:

<a href="javascript:void(0)">Home</a>

If a user clicks on the above button, instead of the browser loading a brand new page, nothing will happen. This provides a better user experience.

To see the exact difference, we could create one anchor tag and set the href value to javascript:void(0) and one that we leave the value empty as follows:

<div>
	<a href="javascript:void(0)">Link 1</a>
</div>
<div>
	<a href="">Link 2</a>
</div>

Now if you were to click on Link 1 nothing will happen, the page will not be refreshed. But if you were to click on Link 2 your page will get refreshed.

As a next step let’s break the statement down a little bit.

What exactly is javascript:?

The javascript: part is a pseudo-URL address. So when a browser follows a javascript:, it then loads the contents of the page with the returned value. But what if the returned value is false? In that case, it does nothing. And if we want it to return undefined, we have to add the void operator.

Next, let’s review what the void operator is.

What exactly is the void operator?

The void operator checks the given value and then returns undefined. In most cases, it is used mostly to obtain the value undefined by using void(0).

javascript:void(0) alternative

As using the javascript: pseudo-URL address could cause some problems when a user tries to bookmark a specific link. As an alternative to javascript:void(0), you can add the # as the value to your href tags like this:

 <a href="#">Home</a>

The only difference is that this will take you to the top of the page, while javascript:void(0) won’t move you at all. To prevent this behavior you could add onclick="return false;" so that the user does not get taken to the top of the page:

<a href="#" onclick="return false;">Home</a>

With that approach, you would have the same behavior as you would with javascript:void(0).

Conclusion

Using javascript:void(0) will ensure that your users do not navigate to another page and also that their current page does not get reloaded. You could also use the onclick="return false;" approach as an alternative which in some cases might be a bit more readable than using the javascript:void(0) approach.

As a next step, try to use these methods a few times to see how they actually work and pick the one that suits your needs.

I hope that this post has helped you! Best, Bobby