javascript:void(0), what is it?

What is javascript:void(0)?

Sometimes you’ll find a string like the following in an HTML page’s code

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

But what’s it for? Here we’re telling the browser that when a user clicks that link, nothing should happen.

Sometimes you’ll also find this form

<a href="#">Click me</a>

Perfectly legal and valid, but with a small risk: the page scrolling up, to the top of the page.

In fact we can usually use links in the form

<a href="#anchor-in-the-page">Click me</a>

to make the page scroll to an element with id="anchor-in-the-page".

Why use JavaScript?

If you read the official void documentation on MDN you’ll find that void evaluates the expression we pass it and then returns undefined.

When a browser finds a URI inside a link in the javascript: form, it runs the code and then replaces the page’s content with the return value, unless the code or function returns undefined.

<a href="javascript:void(0);">Click here to do nothing</a>

<a href="javascript:void(document.body.style.backgroundColor='green');">
  Click here for a green page background
</a>

Uses of void in JavaScript

We can still use void for the purposes it was actually designed for.

Imagine you’ve written an event handler for a checkbox. On click we want it to run some operation. We might write something like this.

checkbox.onclick = () => runOperation();

On checkbox click, the function runs and then the checkbox changes state.

BUT

If in some particular situation the function happens to return, say, false, the flow of actions stops and the checkbox doesn’t change state. If that’s intentional, it’s not a problem. But if it’s not intentional and we want to avoid it, we can write the event handler like this:

checkbox.onclick = () => void runOperation();

This makes sure that if someone changes that function in an unexpected way down the line, its return value will be ignored regardless, and we won’t block the checkbox’s default behavior.

Another way to use void is to run a function and immediately discard the return value.

void (function () {
  console.log("Boom!");
})();

Watch out for precedence

void resolves expressions with a well-defined precedence, which is worth paying attention to in order to avoid unintended results. Consider these two examples, also taken from MDN

void 2 === "2";
void (2 === "2");

What actually gets interpreted and run is the following:

void 2 === "2"; // returns false
void (2 === "2"); // returns undefined

Indeed, the first element right after void is what gets evaluated. In the first line, the first element is the number 2. In the second line, the first element after void is the content of the parentheses.

Functions run and then POOF they’re gone

When you use void, the function or expression in general gets executed and undefined is returned. Note that the function you used no longer exists after execution.

void function test() {
  console.log("test function executed");
};
try {
  test();
} catch (e) {
  console.log("test function is not defined");
  // output: "test function is not defined"
}

Happy coding! 😃