What is JavaScript:void(0) in JavaScript?

When we say the word ‘void’ in simple English language, it means a space that contains nothing or a space. But in JavaScript or any other programming language, the void translates to returning nothing. When the keyword void is used the webpage does nothing and returns nothing.

In this article, we’re going to focus on JavaScript:void(0). But first, let’s understand what JavaScript is.

JavaScript

Commonly used for web development in web applications, JavaScript is a strong programming language. It helps you imply dynamic functions that are not possible with CSS and HTML only. HTML and CSS define how a site looks, but JavaScript defines how a website runs and functions. It is the brain of a website. It is used as an effective and strong scripting language among many browsers.

Whenever you see a webpage that has some extra content added to it or has a click-to-show dropdown menu with an effectively changing colors section, you’re seeing the work of JavaScript right there.

JavaScript not only supports Maths calculations but also allows the user to dynamically add HTML to the DOM.

DOM stands for Document Object Model and to learn more about it follow this link here.

It helps you create a strong style on the webpage and fetches information from the other pages.

JavaScript can do so much more than this article can fit, but here are some of its major uses:-

JavaScript in HTML
Comments
Functions
Variables

Learn more about javascript here.

Now, let’s move on to JavaScript:void(0), shall we?

JavaScript:void(0)

While writing codes in JavaScript, you might’ve used the JavaScript:void(0) as a return type when you want no result from a method. We can use the operand 0 in two ways void(0) and void 0, both have the same result, which is nothing. Void 0 is used to prevent the side effects of inserting an expression in the webpage. For example, hyperlinks, URLs, etc. When we use the keyword void(0) the webpage automatically shows us undefined.

For example:

// using void keyword
console.log(void(5*3));Code language: JavaScript (javascript)

Output

Undefined

This example shows us how a void works, we evaluated (1+1) but the return is undefined.

Sometimes, when we put a link on the webpage, we don’t want it to navigate to another page or reload a page we use JavaScript void.

Using JavaScript: you can easily make the code that will not change anything in the current webpage.

JavaScript: used with void(0) means, do absolutely nothing.

When you use JavaScript:void(0), the webpage will not run any code, will not navigate to another page, and will not reload.

Let’s take another example:

<a Link="JavaScript:void(0);">I am a link</a>Code language: HTML, XML (xml)

The word “Link” is treated as a direct address to the browser. It will not navigate you to another webpage but is, however, easy to focus on.

0 is an instruction passed to void that returns nothing.

Using JavaScript:void(0) to not allow a page from reloading

We’ve already learned that we can prevent a web page from reloading by using “JavaScript:void(0)”.

Let’s understand it better by taking an example.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>JavaScript void(0)</title>

</head>
<body>
    <h1>How to prevent a page from reloding</h1>
    <a href="JavaScript:void(0);" onclick=" alert('Hey its me')">Click Me!</a>
</body>
</html>Code language: HTML, XML (xml)

In the example above, we’ve used the onclick handler so nothing will happen with a single click, and the action will only occur when the link is double-clicked.

Learn more about handlers in javascript here.

Even when the link was double-clicked, it returned nothing. No websites were opened, the page did not refresh and the link did not change color.

This shows that by using JavaScript:void(0), we can prevent a webpage from changing anything.

Normally, web developers avoid href=”JavaScript:void(0), because the coding will make the browser dissect the value of the link URL, which is completely unnecessary and highly expensive.

This can also create a potential XSS security problem, as

JavaScript: URLs violate CSP (content security police). Learn more about csp here.

Even though JavaScript:void(0) is an easy and effective solution to prevent a page from refreshing, some other alternatives might come in handy sometimes. One of those alternatives is event.preventDefault .

Conclusion

In this simply clarified article, we’ve learned what JavaScript is. JavaScript is a widely-known programming language, used for creating web pages and applications.

We’ve also learned what a void operator is and how it is used in JavaScript. This ensures that we click the link, it does not navigate to another page or reload the page.

With that, we’re closing the article. We hope you found what you were looking for javascript:void(0).

JavaScript

JavaScript:void(0)

Output

Using JavaScript:void(0) to not allow a page from reloading

Conclusion

No comments so far