What is javascript:void(0) and How it Works?

javascript:void(0) is a very frequently asked javascript interview question for beginners. It's important to understand URI schemes and void() operator in javascript.  In this quick blog, we will cover the details about javascript: URI scheme, void() operator, and their usage with examples along with the use-cases of using javascript:void(0) in the web application  

Table of content

1. What is javascript:void(0) - A detailed explanation
   
   • Understand javascript: and its usage
   • Understand void(0) and its usage
2. When should you avoid using javascript:void(0)?
3. What are the other ways to prevent link navigation?

What is javascript:void(0) - A detailed explanation

javascript:void(0) is used to add a fake navigation to the HTML element. It can be used as part of HTML elements which support navigation targets with href property. When the navigation target (href) is invoked on click. It executes the inline javascript code void(0) which returns undefined. It means this code doesn't do anything but prevent navigation.

Example: javascript:void(0) is generally used to prevent navigation when clicking on the anchor tag, and avoid any refresh of the page.

<a href="https://developer.mozilla.org/en-US/docs/Web/URI/Schemes/javascript">
  Navigate to javascript: URI scheme !!
</a>

<a href="javascript:void(0)">
  Do nothing !!
</a>

Understand javascript: and its usage

JavaScript URLs i.e. javascript: is one of the types of URI schemes which decides the type of protocol used while executing the resources. Some other well-known protocol examples include mailto:<mail id> or tel:9675634298

javascript: is generally used to fake the navigation targets, where rather than having an actual URL, it executes a <JS script>. This script can be any legitimate javascript code which will be executed when this navigation target gets triggered.

For example,

// javascript: followed by inline javascript
<a href="javascript:<script>" >
Execute script on click
</a>

Executing alert box on click

<a href="javascript:alert('Hi FrontendGeek !!')">
  Hi FrontendGeek !!
</a>

Executes console.log on click

<a href="javascript:console.log('button clicked !!')">
  Hi FrontendGeek !!
</a>

// console: button clicked !!

Understand void(0) and its usage

void is an operator which executes the expression and returns undefined every time, the input expression doesn't matter in this case. An expression can be any valid javascript expression, It always returns undefined. 

When void(0) or void 0 is used, it executes the expression and returns undefined, and due to this, there is nothing happens when clicking for navigation.

// void(0) or void 0 returns "undefined"

href="javascript:void(0)"
or
href="javascript:void 0"

When should you avoid using javascript:void(0)?

javascript:void(0) usage is not recommended in web development, since it executes the javascript script inline along with the HTML code itself It can lead to bugs if not properly used. It also introduced a few limitations to the web apps, here are a few examples

1. Hard Accessibility - Using javascript:void(0) leads to poor accessibility support, these inline javascript executions as part of href are not well supported by screen readers.
2. Poor SEO - Most web crawlers navigate through links to find the relationship between pages. These fake navigation links can break the whole crawling of the bot and can lead to an unindexed web page. 

What are the other ways to prevent link navigation?

There are other ways as well to prevent link navigation that can be used instead of javascript:void(0), since this is not a recommended way of preventing the URL navigation

Using preventDefault()

Event's preventDefault() method can be used to prevent the default navigation behaviour of button or anchor tags. It requires some additional javascript setup to register the event listener against the button click event.

When the event is triggered for the navigation, the preventDefault() method suppresses the default behaviour of the HTML elements like refresh on link click or Form submission. here is an example

<a id="greet" href="">
  Hi FrontendGeek !!
</a>

preventDefault()

const link = document.getElementById('#greet');

link.addEventListener('click', (event) => {
  event.preventDefault();
  
  console.log('Hello clicked !!');
})