What does javascript void 0 mean?
The word "void" literally means null or a space. In terms of programming, it refers to returning an empty value or undefined. Now, let's understand how the void is used to manipulate the behaviour of web pages using Javascript with the help of the javascript:void(0) keyword.
Syntax of javascript void(0)
Description of javascript void(0)
If we do not want a hyperlink to navigate to another page or reload the same page.
The javascript keyword, when combined with void(0) means, does nothing, which means no reloading/ no navigation or no code run & execution.
Code:
Output:
What is the void keyword?
Let's understand what void means in terms of programming with an example of the following functions explicitly & implicitly respectively.
Here, in the explicit method, the function is returning an undefined value as shown below:
While in the implicit method, the function is performing the addition of two numbers and returns nothing (no-undefined value is returned explicitly) as shown below:
In other words, void means return nothing regardless of whatever function is doing.
What is javascript (0)?
Now let's understand what javascript
Example with javascript:
The javascript: is a keyword which is also known as Pseudo URL. When a browser receives it as the value of href on an anchor tag, it interprets & executes the Javascript code that follows after the colon (:). For example:
Code:
Output:
As you can see in the above example, the browser does not treat href as a referenced path. Instead, it treats it as JavaScript code, which is separated by semi-colons & followed by the keyword "javascript".
void(0)
void() operator evaluates arguments/ expressions or operands inside it but returns nothing or undefined.
For Example :
As you can see, the void keyword does nothing and return undefined while without a void keyword, it returns the evaluated expression as 23.
Let's understand it with another example:
Example:
Output:
Combining javascript: and void(0)
Let's understand with another example:
Example:
Output:
Using the javascript:void 0 keyword, we make the word "Prevents Reloading or Navigation to Other Websites", a clickable link using an anchor tag with no redirection or reloading of the page to https://scaler.com, or in other words, we can say it as dead/void/null link.
Examples
Let's understand in a better & crystal clear way the use of javascript:void(0) using some examples:
Immediately Invoked Function Expressions (IIFEs)
The javascript:void(0); statement can be used in conjunction with IIFEs to execute code without affecting the current page content or navigation.
Example:
Using javascript:void(0); with IIFEs allows for the execution of such functions in places where a URL is expected, such as in an anchor tag's href attribute, without changing the current page or navigating to a new one.
JavaScript URIs
JavaScript URIs start with javascript: and allow you to execute JavaScript code in the context of the current page. javascript:void(0); is a common pattern used in JavaScript URIs to execute code without altering the current page's content.
Example:
In this example, clicking the link executes the JavaScript alert, and void(0) ensures that the browser doesn't try to navigate away from the current page or refresh it.
Non-leaking Arrow Functions
The void operator can be used in conjunction with arrow functions to ensure that they do not return a value, thereby preventing unintended side effects or leaks.
Example:
In this example, clicking a button with the ID "myButton" triggers myFunction(), but due to the void operator, its return value is discarded, preventing any potential side effects related to the function's return value.
Browser Compatibility
Let's have a glance at the browser compatibility of void() with different devices (mobile, desktop etc) and servers like Node.js, Deno etc.
Browser | Mobile | Desktop | Server |
---|---|---|---|
Chrome | 18 | 1 | |
Firefox | 4 | 1 | |
Opera | 10.1 | 4 | |
Safari | 3 | 3.1 | |
Edge | 12 | ||
Internet Explorer | 5 | ||
Deno | 1 | ||
Node.js | 0.10.0 |
Please note that the above given are version numbers with a respective browser about the void() operator's compatibility, for example, Chrome 1 means that the void operator is supported in Chrome for all version >=1.
Conclusion
-
The javascript:void() keyword evaluates expression inside it (including javascript code) but does nothing.
-
The javascript:void() keyword is used to prevent reloading of the webpage or navigating to other pages in the browser.
-
The javascript:void() keyword returns nothing or undefined as value.
-
There are alternatives to the javascript:void() keywords like .preventDefault() method, return false method, using "#" in anchor tag etc.
-
The javascript:void() method is relatively easier as well as faster than the other methods discussed above.