What Javascript Void(0) actually means?

Beniamin Marcu -

JavaScript is a powerful and essential tool in web development, enabling dynamic interactions, form validations, and complex functionality within websites. One peculiar snippet that developers often encounter, especially when working with hyperlinks or buttons, is javascript:void(0).

As a frontend developer or even as a backend developer maybe you have found javascript: void(0);(javascript void) written as a value for a href attribute inside an anchor tag (<a>) and you wondered what that means.

Example:


<a href="javascript:void(0);" onclick="clickFunction()">
  Click
</a>

At first glance, it might seem cryptic or confusing to those unfamiliar with its purpose. What exactly does this code do, and why is it used so frequently?

In this article, we will try to provide an explanation for the javascript void syntax in order for you to know when and why it's used. To do that we will have to take it element by element.

Javascript void keyword

As in other programming languages, void keyword from Javascript, is an operator that has the role to tell the program NOT to return the result of an expression and it returns undefined instead.

For example, the following expression will return the value of the mathematical operation:


let sum = 1 + 1;
console.log(sum); // 2

And the next expression will return undefined:


let sum = void(1 + 1);
console.log(sum); // undefined

Even though the variable sum is undefined, Javascript still executes the expression (1 + 1):


let sum = void console.log(1 + 1); // 2
console.log(sum); // undefined

From the above, we can observe that the code that it is after the void operator will always be executed but the return of the expression will always be undefined. The role of 0 inside the void operator is simply just the one of a placeholder.

🔥 Learn UI/UX with our bestselling book! Check out "Roots of UI/UX Design" by Creative Tim!

Use Javascript Void(0) as the value of href

The javascript: part is a possible value for the href attribute. This value tells your browser that the next text is a Javascript code and it should be treated accordingly. There are also other possible values for the href attribute like mailto:, file:, tel:, sms: etc.

What is Javascript Void(0)?

By using javascript:void(0), the <a> tag will not send you to other web address. It will also not refresh the page as links usually do when you don't specify a value for the href attribute.

If you are wondering why we don't just remove the href attribute, the answer is that by removing the href attribute we will also remove the link appearance of the <a> element. That means that the cursor will not change when hovering the <a> tag. The cursor will act like it is on normal text.

In other words, by adding javascript:void(0) as the value of href attribute we will create a link that does nothing.

The example link from the beginning of this article will run the clickFunction function when the tag is clicked, but without refreshing the page or sending you to a different page.

You may be interested: 15 JavaScript Courses - Learn Web Development, HTML, and CSS

When to use Javascript Void(0)?

Thankfully, with all the updates made in Javascript, you will never have to use it as there are better alternatives to it.

In order to prevent the default behavior of a <a> tag, it's generally recommended to use the <button> tag for buttons and the <a> tag for links. Also, if you need or want to change the cursor, it's recommended to use CSS instead of changing the tag to <a>.

In conclusion, we hope that now you have a better understanding of what javascript:void(0); is. Since it does nothing that you can't do with only HTML/CSS, the syntax presented at the beginning is not so common these days. Use this piece of information only to know what role it has when you see it somewhere, but keep your code clean and follow our advice on best practices.

How to fix Javascript Void(0)

Fixing the issue of finding javascript:void(0) depends on the context in which you encounter it:

1. Finding javascript:void(0) in a Browser

If you find javascript:void(0) as an error or broken link in your browser, it may be the result of:

Cause: The link is written using javascript:void(0) to prevent the default behavior of the link (such as navigating to a new page), but the intended functionality tied to the link might not be working properly.
How to fix: Ensure that the JavaScript functionality associated with the link (e.g., a button click event, modal popup, or AJAX request) is correctly implemented and not throwing any errors. You can do this by:

  • Opening the browser's developer tools (usually accessed via F12 or Ctrl+Shift+I) and checking the console for any JavaScript errors.
  • Verifying that the JavaScript file linked to the page is loading correctly and contains the proper functions.

2. Fixing Code that Uses javascript:void(0)

If you find javascript:void(0) in your code and you need to fix or improve it:

  • Why: The code is using javascript:void(0) to prevent link navigation but is otherwise redundant or outdated.

  • How to fix: Use event handling with event.preventDefault() instead. This will prevent the default link action without needing to rely on javascript:void(0).

    <a href="#" onclick="handleClick(event)">Click me</a>

<script>
  function handleClick(event) {
    event.preventDefault();
    // Your code here
  }
</script>

What Does javascript:void(0) Mean in Chrome?

In Chrome (as in other browsers), javascript:void(0) is a JavaScript expression often used in hyperlinks or other clickable elements to prevent any action from occurring.

When you use javascript:void(0) as the href attribute in a link (e.g., <a href="javascript:void(0)">), it effectively does the following:

  • It prevents the default action of the link, which is to navigate to a new page or reload the current one.
  • No value is returned, and no other side effect occurs from this expression.

This construct is often used when developers want the link to trigger some JavaScript action (like opening a modal, performing an AJAX request, or triggering a button event) without causing the page to reload or navigate anywhere.

Example:

<a href="javascript:void(0)" onclick="myFunction()">Learn more</a>

<script>
  function myFunction() {
    alert("Alert!");
  }
</script>