javascript:void(0) — What Does It Mean? (with Examples)

You may have encountered javascript:void(0) in an HTML document as a href attribute like this:

<a href="javascript:void(0);" ondblclick="alert('Hello, how are you?')">Double-click me!</a>

A common reason why developers use javascript:void(0) trick is to prevent the page from reloading when clicking a link.

This comprehensive guide teaches you:

  • What javascript:void(0) does.
  • How the javascript:void(0) works.
  • And a bunch of examples.

Speaking of examples, I think the best way to learn what javascript:void(0) does is by taking a look at an example first.

Example—Understanding “javascript:void(0)”

Consider this HTML tag:

<a href="" onclick="alert('This page will reload!')">Click here to try!</a>

If you render this HTML tag, it produces a link that shows an alert when you click it. Feel free to try it below:

Click here to try!

When you clicked the link, did you notice how the page refreshed and jumped back to the top? Frustrating, right?

This is where adding javascript:void(0) in the href attribute helps. It prevents the page from refreshing when clicking the link.

Let’s try it! Here’s the same HTML tag you saw above. This time, the href attribute is javascript:void(0):

<a href="javascript:void(0)" onclick="alert('This page will reload!')">Click here to try!</a>

Below is the link that the above HTML code renders. Feel free to try it again!

Click here to try!

This time the page didn’t refresh thanks to using javascript:void(0).

Now you understand what the javascript:void(0) is used. But the reason for such a funky expression might still be unclear to you. If you want to learn what it does, keep on reading!

The javascript:void(0) Complete Breakdown

In this section, you will learn what the expression javascript:void(0) does and why such a funky expression is needed.

The javascript:void(0) expression has two parts:

  1. javascript: — This prefix tells the href attribute to expect JavaScript to be executed.
  2. void(0) — This is the piece of JavaScript code that gets executed.

Let’s take a closer technical look at these two parts.

1. javascript:

If you want to place JavaScript code in an href attribute, you need to use the javascript: prefix! This tells the anchor tag’s href attribute that it should expect some JavaScript code.

Back in the day, specifying the javascript: prefix was a convention for other HTML attributes too. As an example, here’s how you would specify a JavaScript action in the onclick attribute:

<button onclick="javascript:alert('Hello!')">Click me</button>

Notice that these days adding the javascript: prefix inline event attributes, such as onclick, onsubmit, or onmouseover is unnecessary.

But when you place JavaScript code into an href attribute, you still need to do this! The javascript: prefix tells the href attribute you want to run a JavaScript action instead of refreshing the page.

If you run JavaScript within a href attribute and forget to use the javascript: prefix, the JavaScript code won’t run. This causes the webpage to refresh.

Next, let’s take a look at the actual JavaScript part, that is, the void(0) expression.

2. void(0)

In JavaScript, the void keyword is an operator you can call on a single expression or a value. The void operator evaluates the expression and does not return a value. Instead, it returns undefined.

Using void is useful when an expression produces a value in a place where it shouldn’t. The void operator runs the input expression but returns no value regardless of whether the expression returns a value or not.

For example, consider this piece of JavaScript:

function giveValue() {
    console.log("Running the function!")
    return 100
}

const x = void(giveValue())
console.log(x)

The output of running this piece of code is:

Running the function!
undefined

So even though the giveValue() function returns 100, the void operator neglects that. It surely runs the giveValue() function but doesn’t return a value. That’s why the value of x is undefined instead of 100 when logging into the console.

There are two ways you can call the void operator:

  1. void expression
  2. void(expression)

In other words, you can also do it without parenthesis. For instance, in the above expression you could have done this instead:

const x = void giveValue()

Anyway, one way to look at the void operator is you can use it to obtain the value of undefined. One of the popular ways to obtain the undefined value is by calling void(0). But you could just as well call void(1000) or void(“test”) to get back undefined.

So after all, javascript:void(0) means “Tell the href attribute to run the following piece of JavaScript code: void(0) instead of changing or refreshing the page.”

Why Not “javascript:undefined” Then?

In the previous section, you learned that javascript:void(0) is just a way to obtain the value undefined. In href attributes, this prevents the site from refreshing when the anchor is clicked.

Now you may wonder, why not just do javascript:undefined instead of javascript:void(0).

In modern browsers, you could indeed replace javascript:void(0) with javascript:undefined.

But the reason why javascript:void(0) is better than javascript:undefined is because, in older browsers, undefined is not a keyword! Instead, it’s a writeable property whose value you can change.

For example, in a browser that doesn’t support JavaScript 1.8.5, the following code:

console.log(undefined);
var undefined = 1000;
console.log(undefined);

Produces the following output:

1000

You just successfully defined undefined to be 1000! If you now called javascript:undefined in the href attribute, the page would refresh because the JavaScript expression returns 1000 instead of undefined. To avoid this, it’s safer to use javascript:void(0) instead of javascript:undefined.

Summary

That wraps it up for today!

To recap, you learned that javascript:void(0) prevents a page from refreshing when an anchor is clicked. The javascript:void(0) consists two parts:

  • The javascript: prefix that lets the href know you want to run JavaScript instead of opening a URL.
  • The void(0) statement returns undefined which prevents the page from refreshing.

Thanks for reading. Happy coding!

Read Also