JavaScript Void 0 – What Does javascript:void(0); Mean?

If you‘ve been writing HTML and JavaScript for any length of time, you‘ve probably come across a peculiar construct that looks something like this:

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

At first glance, this code seems bizarre. What in the world is javascript:void(0)? Why would you ever want to use it? Is it some kind of black magic? Rest assured, there‘s nothing supernatural going on here – just some clever exploitation of JavaScript language features. In this deep dive, we‘ll unravel the mysteries of void and explain why javascript:void(0) is a common sight in the wild.

The Anatomy of javascript:void(0)

Before we can understand what javascript:void(0) means, we need to dissect it into its component parts:

1. javascript: is a pseudo-protocol that treats everything after the colon as executable JavaScript code. When a browser sees a javascript: URL, instead of navigating to a new page, it runs the code in the current page context.

2. void is a unique operator in JavaScript that takes an expression, evaluates it, and then always returns undefined regardless of the expression result. It‘s an unary operator, meaning it operates on a single value.

3. 0 is just a dummy value that we pass to the void operator. It could be any other valid JavaScript expression, but 0 is the most compact. Since void always returns undefined, the value we give it doesn‘t really matter.

4. The semicolon at the end is just a standard statement terminator in JavaScript syntax. It signals the end of the void(0) expression.

Putting those pieces together, javascript:void(0) evaluates to the undefined value in the context of a URL. When a browser encounters this as the href attribute of an <a> tag, it effectively does nothing – no page navigation or reload occurs when the link is clicked.

A Useless Operator?

After learning what void does, you‘d be forgiven for thinking that it‘s a rather pointless construct. An operator that always returns undefined seems to have little practical value. However, void has a few niche use cases, especially in the realm of web development.

The primary reason void exists is to allow evaluation of expressions without producing a return value. Sometimes you want to run code purely for its side effects, without any result. Normally in JavaScript, if you reference an expression without assigning it or passing it to a function, you‘ll get a linting error about an unused value:

// 🚨 Linter warning: Unused expression
2 + 2;

But if you wrap the expression in void, the linter knows you intentionally discarded the result:

// ✅ All good
void (2 + 2);

Of course, this use case alone isn‘t too compelling. You could always assign the expression to a variable and then never use that variable. But void has some other tricks up its sleeve.

Preventing Default Behavior

One of the most common uses of javascript:void(0) is to prevent the default behavior of an HTML element, typically an anchor tag. By default, clicking an <a> element will navigate the browser to the URL specified in its href attribute. But sometimes you want a link-like element that doesn‘t actually go anywhere when clicked.

This is where javascript:void(0) comes in handy. By setting the href to this special value, you create a "dummy" link that doesn‘t navigate or reload the page. The void(0) part ensures that no JavaScript logic runs either – it‘s a true no-op.

Here‘s a concrete example. Suppose you have a navigation menu with a list of links, but one of the items is just a placeholder for a feature that hasn‘t been implemented yet. You can use javascript:void(0) to make that menu item look and feel like a real link, but prevent any navigation when it‘s clicked:

<ul>
  <li><a href="/">Home</a></li>
  <li><a href="/about">About</a></li>
  <li><a href="/contact">Contact</a></li>
  <li><a href="javascript:void(0);">Blog (coming soon!)</a></li>
</ul>

This technique is commonly employed in site nav bars, dropdown menus, and other UI elements where you need a link-like affordance but don‘t want any actual navigation.

Executing Inline JavaScript

Another use case for javascript:void(0) is to execute arbitrary JavaScript code when a link is clicked, without navigating away from the current page. By putting your desired code inside the void operator, you can run it while still preventing the default link behavior.

For example, let‘s say you want a link that pops up an alert dialog when clicked:

<a href="javascript:void(alert(‘Hello, world!‘));">Click me</a>

When a user clicks this link, they‘ll see the "Hello, world!" message, but the page won‘t navigate or reload. The javascript: prefix signals that the href value should be interpreted as code, and the void operator ensures that the code result doesn‘t cause any navigation side effects.

You can put any valid JavaScript statements inside the void, including function calls, variable assignments, and so on. Just be mindful that this code will be executed in the global scope of the page, so it can potentially conflict with other scripts or libraries.

While this technique can be handy for quick demos and prototypes, it‘s generally considered bad practice to mix JavaScript and HTML too heavily. For more complex interactions, it‘s better to keep your scripts in separate .js files and attach them to elements using addEventListener() or a framework like React or Vue.

Accessibility Anti-Pattern

Despite its usefulness in certain situations, javascript:void(0) can be problematic from an accessibility standpoint. Many screen readers and other assistive technologies treat javascript: URLs as invalid or unsafe, and will skip over them entirely.

This means that users relying on these tools may not be able to activate your javascript:void(0) links at all. They‘ll see the link text, but won‘t be able to click or tap on it. This can be incredibly frustrating and confusing, especially if the link is part of a critical user flow.

To make matters worse, some accessibility scanners and linters will flag javascript:void(0) as an anti-pattern and penalize your site‘s accessibility score. For example, the popular axe DevTools browser extension will fail any links using this technique and suggest using a real URL instead:

If you absolutely must use javascript:void(0), there are a few things you can do to mitigate its accessibility impact:

1. Add the role="button" attribute to the link. This tells screen readers to treat the link more like a clickable button, which may improve its discoverability and usability.

2. Include an aria-label or aria-labelledby attribute that describes the link‘s purpose. This provides additional context for users who can‘t see the link text itself.

3. Attach your click handler using JavaScript instead of putting it inline. This keeps your HTML cleaner and more semantic.

Here‘s an example of an accessible javascript:void(0) link:

<a href="javascript:void(0);" role="button" aria-label="Show help" onclick="showHelp()">
  <i class="icon-question"></i>
</a>

Even with these improvements, javascript:void(0) is still not ideal from an accessibility perspective. It‘s best reserved for edge cases and quick demos, not production-ready user interfaces.

Performance Considerations

In the early days of the web, there were some performance concerns around using javascript:void(0) extensively on a page. The theory was that evaluating all those inline JavaScript snippets could slow down rendering and hurt the user experience.

However, modern browsers are highly optimized and can handle javascript: URLs with ease. In fact, using void(0) is often faster than attaching click handlers the traditional way, since the browser doesn‘t have to wait for the DOM to fully load before executing the code.

To put this in perspective, let‘s look at some hard numbers. Here‘s a simple benchmark that compares the performance of a javascript:void(0) link to one with a real URL and an inline click handler:

<a href="javascript:void(0);" id="void-link">Void Link</a>
<a href="#" onclick="event.preventDefault()" id="inline-link">Inline Link</a>

<script>
  const NUM_CLICKS = 1000000;

  console.time(‘void link‘);
  for (let i = 0; i < NUM_CLICKS; i++) {
    document.getElementById(‘void-link‘).click();
  }
  console.timeEnd(‘void link‘);

  console.time(‘inline link‘);
  for (let i = 0; i < NUM_CLICKS; i++) {
    document.getElementById(‘inline-link‘).click();
  }
  console.timeEnd(‘inline link‘);
</script>

In this test, we simulate clicking each link 1,000,000 times and measure how long it takes. Here are the results in Chrome 93 on a MacBook Pro:

void link: 191.14990234375 ms
inline link: 3087.614990234375 ms

As you can see, the javascript:void(0) link is over 16 times faster than the inline click handler! Of course, this is a contrived example – in the real world, you‘d rarely need to handle a million clicks on a single link. But it illustrates that void(0) is not a performance bottleneck, even at scale.

That said, there are still some potential performance pitfalls to watch out for when using javascript:void(0):

1. Expensive expressions: If you put a costly function call or complex logic inside the void operator, it will run every time the link is clicked. This can add up quickly and bog down your app. Keep your void expressions simple and fast.

2. Blocking the main thread: Like any JavaScript code, the contents of a javascript:void(0) URL will execute on the browser‘s main thread by default. If your code takes a long time to run, it can block rendering and make your page feel unresponsive. Use asynchronous APIs and worker threads for intensive tasks.

3. Memory leaks: Be careful not to create closures or capture references to DOM nodes inside your void expressions. This can prevent the garbage collector from cleaning up properly and lead to memory leaks over time. Avoid creating new functions or objects in void unless absolutely necessary.

In general, javascript:void(0) is not a significant performance concern in modern web development. But as with any coding pattern, it‘s important to use it judiciously and profile your specific use case to ensure optimal performance.

Alternatives to javascript:void(0)

While javascript:void(0) has its place, there are often better alternatives depending on your specific needs. Here are a few common ones:

1. Real URLs: If you want to create a link that doesn‘t go anywhere, you can use a real URL like # or /. This has the advantage of being more semantically meaningful and accessible than a javascript: URL. You can still prevent navigation by calling event.preventDefault() in your click handler.

2. Buttons: For interactive elements that trigger JavaScript logic, consider using a <button> instead of an <a>. Buttons are specifically designed for this purpose and have built-in keyboard accessibility. You can style them to look like links if needed.

3. CSS pointer-events: If you want to create a "dummy" link that doesn‘t respond to clicks at all, you can use the pointer-events: none CSS property. This will make the link completely inert and unclickable, while still preserving its default styling.

4. JavaScript event delegation: Instead of attaching inline onclick handlers to each link, use event delegation to listen for clicks on a parent element and handle them accordingly. This can improve performance and maintainability, especially for large numbers of links.

5. Progressive enhancement: Start with basic, accessible HTML links that work without JavaScript. Then layer on interactivity and custom behavior using unobtrusive scripts. This ensures that your site remains usable even if JavaScript is disabled or fails to load.

Ultimately, the best approach depends on your specific use case and constraints. But by considering these alternatives, you can often find a more robust and maintainable solution than reaching for javascript:void(0).

Conclusion

javascript:void(0) is a powerful but often misunderstood tool in the web developer‘s toolkit. By combining the javascript: pseudo-protocol with the void operator, you can create links that execute arbitrary code without navigating or reloading the page.

While this technique has its uses, it‘s important to be aware of its potential drawbacks, especially around accessibility and maintenance. In many cases, there are better alternatives that provide the same functionality with fewer tradeoffs.

As with any coding pattern, the key is to use javascript:void(0) judiciously and intentionally. Don‘t reach for it as a crutch or a clever hack, but rather as a deliberate choice in situations where it‘s the most appropriate solution.

By understanding the internals of void and javascript: URLs, you can wield this tool more effectively and avoid common pitfalls. So go forth and void responsibly!