When referring to plain English, void means an empty space that holds nothing. But when talking about the void keyword in JavaScript or other programming languages, it refers to returning nothing. You might have used it as a return type while writing codes. When you want a function or any statement to return any specific data type, you mention return data_type. However, when you want a method to return nothing, you use return void. JavaScript Void 0 is similar to that.
What Does JavaScript Void 0 Mean?
JavaScript void 0 means returning undefined (void) as a primitive value. You might come across the term “JavaScript:void(0)” while going through HTML documents. It is used to prevent any side effects caused while inserting an expression in a web page. For instance, URLs or hyperlinks are the common examples of using JavaScript void 0. Suppose you insert a link and want to call some JavaScript through it. Usually, when you click on a link, the browser will either reload or open a new page. However, if you just want to call JavaScript through that link, you would not want the entire page to refresh. This is where the JavaScript:void(0) will come in handy.
When you use JavaScript void 0, it will return an undefined primitive value. This will prevent the browser from opening a new or reloading the web page and allowing you to call the JavaScript through it.
Preventing a Page to Reload Using JavaScript Void 0
We can use JavaScript void 0 to prevent reloading of a page. Let’s understand this with the two examples given below. The first example does not use JavaScript:void(0), but the second uses it to prevent reloading. We will also use the ondblclick event handler so that nothing happens on a single click and the action is handled on double click.
<!DOCTYPE html>
<html>
<head>
<title>without using JavaScript:void(0)</title>
</head>
<body align="center">
<h2>This is without using JavaScript:void(0)</h2>
<a href="#" ondblclick="alert('Task completed!')">Double Click Me!</a>
</body>
</html>
Output Before Clicking:
Output After Clicking:
Color of the Link:
Did you notice that the page refreshed after clicking on the link? If not, there’s another way to get the difference. After clicking on the link, you will see that the color of the link has changed to purple (the default color for visited links). This means that the page has refreshed due to the href tag. On the other hand, in our example below, you will notice that the link still appears blue as only the JavaScript code to alert the message is triggered, but the page is not refreshed.
<!DOCTYPE html>
<html>
<head>
<title>using JavaScript:void(0)</title>
</head>
<body align="center">
<h2>Using JavaScript:void(0)</h2>
<a href="JavaScript:void(0);" ondblclick="alert('Task completed!')">Double Click Me!</a>
</body>
</html>
Output Before Clicking:
Output After Clicking:
Color of the Link:
JavaScript Void 0 Alternatives
Although JavaScript void 0 is an easy solution to prevent a page from reloading, you might sometimes want to use alternatives. Some of these alternatives include:
- You can use event.preventDefault with the event handler as an alternative to JavaScript:void(0). Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>JavaScript void 0 alternatives</title>
</head>
<body align="center">
<h2>Using .preventDefault()</h2>
<a href="https://www.simplilearn.com" onclick="event.preventDefault();" ondblclick="alert('Task completed')">Double Click Me!</a>
</body>
</html>
Output:
The output here will be the same as that while using JavaScript:void(0). If you do not use the .preventDefault(), the link will take you to Simplilearn’s website.
NOTE: If you have already visited “https://www.simplilearn.com,” the link will appear purple even if you use .preventDefault(). In such a scenario, you can either clear all your browser cookies and history or simply change the link in the <a> tag just to see the changes.
- Another alternative to JavaScript void 0 is to use return false. When the click returns false, the browser will not take any action.
<!DOCTYPE html>
<html>
<head>
<title>JavaScript void 0 alternatives</title>
</head>
<body align="center">
<h2>Using return false()</h2>
<a href="https://www.simplilearn.com" onclick="return false;" ondblclick="alert('Task completed')">Double Click Me!</a>
</body>
</html>
Output:
Conclusion
In this article, you have learned what JavaScript void 0 is and how to use it to prevent a web page from reloading or refreshing. To learn about more such JavaScript fundamentals, you can opt for Simplilearn’s Certification Course. The code is precisely tailored to help you grasp the basic and advanced concepts of JavaScript programming. Besides this, you can also sign up on our SkillUp platform. The platform is a Simplilearn initiative that provides various free online courses to help you hone your skills in multiple programming languages, including JavaScript.
JavaScript developers are in much demand, and learning all the JavaScript fundamentals will help you pursue a great career in the development field. However, you can further improve your prospects in software and web development by taking our Full-Stack Web Development Certification Course. Mastering a single programming language is not enough in today’s competitive world. Our course helps you get acquainted with the concepts and essential tools of the most popular programming languages. It also provides a certification to add credibility to your skills and help you land a high-paying development job.