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.

Want a Top Software Development Job? Start Here!

Full Stack Developer - MERN StackExplore Program
Want a Top Software Development Job? Start Here!

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:

JavaScript_void_0_1.

Output After Clicking:

JavaScript_void_0_2.

Master Core Java 8 Concepts, Java Servlet & More!

Java Certification TrainingENROLL NOW
Master Core Java 8 Concepts, Java Servlet & More!

Color of the Link:

JavaScript_void_0_3

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:

JavaScript_void_0_4

Output After Clicking:

JavaScript_void_0_5.

JavaScript_void_0_6

Dive Deep Into Java Core Concepts

Java Certification TrainingENROLL NOW
Dive Deep Into Java Core Concepts

Color of the Link:

JavaScript_void_0_4

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:

JavaScript_void_0_8

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:

JavaScript_void_0_9.

Advance Your MERN Stack Career in 6 Months!

Full Stack Developer - MERN StackEXPLORE COURSE
Advance Your MERN Stack Career in 6 Months!

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 Java Certification Training. 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.

Our Software Development Courses Duration And Fees

Software Development Course typically range from a few weeks to several months, with fees varying based on program and institution.

Program NameDurationFees
Caltech Coding Bootcamp

Cohort Starts: 16 Dec, 2024

6 Months$ 8,000
Automation Test Engineer Masters Program

Cohort Starts: 27 Nov, 2024

8 months$ 1,499
Full Stack Java Developer Masters Program

Cohort Starts: 18 Dec, 2024

7 months$ 1,449
Full Stack (MERN Stack) Developer Masters Program

Cohort Starts: 8 Jan, 2025

6 Months$ 1,449

Recommended Reads