The JavaScript:void (null) Operator
According to the dictionary, void means an empty space. This term refers to a return of nothing or an empty value when used in programming.
After reading this article, you will understand the JavaScript:void(0) operator. You’ll also learn about the void operator, including how it works and is utilized with the JavaScript: pseudo URL for link href attributes.
the Void Keyword in JavaScript
The term void refers to a function that returns nothing. This is analogous to JavaScript functions that explicitly return undefined, as in the following code.
function und() {
return undefined
}
und()
Or implicitly, like in the code below.
function und() {}
und()
No result is returned regardless of the expressions and statements used in the routines above.
You should now understand what the term void means. On the other hand, JavaScript:void(0) is more complicated.
JavaScript:void(0) in JavaScript
You’ll have JavaScript: and void(0) if JavaScript:void(0) is split up. Let’s take a closer look at each of the components.
JavaScript:
A Pseudo URL is what this is called. When a browser receives this value as an anchor tag href value, it interprets the JavaScript code after the colon : rather than considering the value as a referenced path.
For example, use the code below.
<a href="javascript:console.log('javascript');alert('javascript')">Link</a>
When you run the code above, you’ll see a link button appear; a pop-up window shows up when you click this button. The result is seen in the screenshot below.
As seen above, the browser does not treat href as a referenced path. Instead, it is treated as JavaScript code that begins after javascript: separated by semicolons.
the void(0) Operator
The void operator analyses expressions and returns an undefined when evaluated. For example, look at the code below.
const result = void (1 + 1);
console.log(result);
// undefined should be returned
The expression 1 + 1 gets evaluated, but the result is undefined. Here’s another example to back that up.
<body>
<h1>Heading</h1>
<script>
void(document.body.style.backgroundColor = 'black',
document.body.style.color = 'white'
)
</script>
</body>
The result of the above code is:
Another example of how you can write this code is given below.
console.log(void (0) === undefined)
// true
Combining JavaScript: and void(0)
JavaScript’s void operator evaluates an expression and returns an undefined value. You might come upon an HTML document that uses href="JavaScript:Void(0)"; within a <a> element on occasion.
JavaScript void is often used when inserting an expression into a web page, which might produce an unwanted side-effect.
Using JavaScript:Void(0) can eliminate the unwanted side-effect because it will return the undefined primitive value. Hyperlinks are the typical use of JavaScript:Void(0).
You may need to invoke some JavaScript from within a link. When you click on a link, your browser usually opens a new page or refreshes an existing one (depending on the URL specified).
If you’ve attached JavaScript to that link, you probably don’t want this to happen. You might want to use JavaScript:void(0) to prevent the page from reloading.
Example of JavaScript:void(0)
Imagine you have a link that should only work after two clicks (a double click) and display a message. Nothing should happen if you only click once.
The ondblclick event handler can provide the double-click code. You can use JavaScript:void(0); within the anchor link to avoid the website from refreshing with a single click.
Use the code below for this.
<a href="JavaScript:Void(0)";" ondblclick="alert('Good Job!')">Double Click!</a>
A Double Click button appears when the code above is run. When this button is clicked, a pop-up appears which says Good Job! you can see the result in the screenshot below.
It informs the browser not to return anything or undefined with the help of void. Another use case for links with the javascript:void(0) reference is that a link may perform JavaScript code in the background, eliminating the need to navigate.
In this scenario, the expressions would be provided to void as arguments. When a page is clicked, it will not navigate another page or reload the current page.
By reading this article, you learned what the void operator is, how it works, and how to use it with the javascript: pseudo URL for href properties of links in this short tutorial.