JavaScript Void Operator

by Sudipta Deb | Apr 18, 2022 | javascript, JavaScript Certification, Web Technology | 1 comment

JavaScript Void

When an expression is evaluated using the void operator, the result is undefined. This operator is typically used to obtain an undefined primitive value. It's frequently used in conjunction with hyperlinks. When you click a link, your browser usually refreshes the page or loads a new one. When we don't want the browser to refresh or load a new page when we click a hyperlink, we can use javascript:void(0).

The operand 0 can be used in two ways: void(0) or void 0. Both methods are equally effective. JavaScript:void(0) instructs the browser to "do nothing," preventing the page from being reloaded or refreshed. It's useful when we want to insert links that are vital to the webpage without having to reload the page. Using void(0) on such links stops the page from reloading but allows a useful function like updating a value on the webpage to be performed.

Hyperlinks are a popular use of JavaScript:Void(0). When a user clicks a link on a page, a new page loads in most cases, however this is not always the desired outcome. You could wish to change the value of a field in a form or the value of a variable when a user clicks a link on a website, for example. The void(0) function is used to prevent a website from refreshing when a link is clicked.

Read this blog post or watch the video below to learn more about the JavaScript void operator.

How does void operator work in JavaScript?

Not returning function in JavaScript always works with a void operator.

void 0; // => Undefined
void function helloWorld(){
 //code
}
//The above function actually implemented like this
function helloWorld(){
 return undefined;
}
//Another example
<a href="JavaScript:void(0);"/>

Example 1 

In the below example, I. am defining two links. The first link is using the JavaScript void function whereas the second link is using alert. 

When the first link will be clicked, it will do nothing as the void function is being used, but in case of the second link, the alert will be displayed.

<body>
 <center>
 <h1>JavaScript Void Function</h1>
 <h2>
 Click on both the links to check the difference
 </h2> 
 <h4>
 Link 1 is using JavaScript Void Function
 </h4>
 <a href = "javascript:void(0);">Link 1</a>
 <h4>
 Link 1 is using JavaScript Alert Function
 </h4>
 <a href = "javascript:alert('Technical Potpourri');">Link 2</a>
 </center>
</body>
JavaScript Void Function

Example 2

In the below example, when I double-click the link, it will show the message but not redirect you to the page. The reason is the JavaScript void function is being used.

<body>
 <center>
 <h1>JavaScript Void Function</h1>
 <a href = "javasctipt:void(0);https://www.sudipta-deb.in/" ondblclick = "alert('Welcome to the Technical Potpourri')">  Double click the link  </a> 
 </center>
</body> 
JavaScript Void Function

Conclusion

The void operator is used when a function does not return anything, when an undefined primitive value is desired, and when javascript:void(0) links are not usable.

1 Comment

  1. נערות ליווי תל אביב

    I would like to thank you for the efforts youve put in writing this blog. Im hoping to view the same high-grade content by you later on as well. In fact, your creative writing abilities has encouraged me to get my own, personal blog now ;)

    Reply

Leave a Reply

Written by Sudipta Deb

Enterprise Cloud Architect, Content Creator, 20x Salesforce Certified, 1x Google Cloud Certified, 2x Copado Certified

Related Posts

TypeScript Setup

TypeScript Setup

Below are the tools you need to set up with the environment to start writing TypeScript code: Node.js – Node.js is the environment in which you will run the TypeScript compiler. TypeScript compiler – a Node.js module that compiles TypeScript into JavaScript. If you...

read more...
Introduction to TypeScript

Introduction to TypeScript

What is TypeScript A superset of JavaScript is TypeScript. The foundation for TypeScript is JavaScript. You begin by writing the TypeScript code. The TypeScript code is then converted into standard JavaScript code using a TypeScript compiler. Once you have the basic...

read more...

1 Comment

  1. נערות ליווי תל אביב

    I would like to thank you for the efforts youve put in writing this blog. Im hoping to view the same high-grade content by you later on as well. In fact, your creative writing abilities has encouraged me to get my own, personal blog now ;)

    Reply

Leave a Reply