# javascript:void(0), what is it?

> What javascript:void(0) is and what it's for, with a few simple examples

- Autore / Author: Diego Betto (https://diegobetto.com/about/)
- Pubblicato / Published: 2025-02-20
- URL: https://diegobetto.com/en/javascript-void-0/
- Tag: javascript, void

## What is `javascript:void(0)`?

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

```html
<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

```html
<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

```html
<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](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/void) 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`**.

```html
<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>
```

> **Avoid it**
>
> The example above is a practice that has fallen out of use. Avoid using it. Better to use
> dedicated event handlers. Think of this as an "old trick".

## 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.

```js
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:

```js
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.

```js
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

```js
void 2 === "2";
void (2 === "2");
```

What actually gets interpreted and run is the following:

```js
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.

```js
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! 😃