JScript Katana

Understanding void 0 and javascript:void(0) in JavaScript: Safe Usage, Examples, and Modern Alternatives

Utility Functions
佐川 直弘 | Naohiro Sagawa
By 佐川 直弘 | Naohiro Sagawa (運営者)
※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　
目次

1. Introduction

JavaScript is an essential programming language in modern web development. In particular, when controlling link behavior or handling undefined values, expressions like “void 0” and “javascript:void(0)” are frequently used. These expressions can be confusing for beginners, but using them properly can improve both readability and functionality. This article explains the meaning and use cases of “void 0” and “javascript:void(0)” and introduces best practices in modern development environments. By reading this article, you will learn:
  • What “void 0” is and its role
  • Usage examples and the purpose of “javascript:void(0)”
  • Modern implementation methods using safer alternatives
From here, we will walk through the basics and practical examples of “void 0” in JavaScript.

2. What Is void 0?

The Basic Role of void 0

“void 0” is written as follows:
console.log(void 0); // undefined
This code always outputs “undefined.”

Difference from undefined

In JavaScript, “undefined” is a variable and can be overwritten unintentionally. For example:
var undefined = "test";
console.log(undefined); // "test"
If “undefined” is overwritten, it loses its original meaning. To prevent this, “void 0” has traditionally been used as a guaranteed way to return “undefined.”

Usage Example

Below is an example of explicitly returning “undefined” from a function.
function example() {
  return void 0;
}

console.log(example()); // undefined

Practical Use Cases of void 0

  1. Checking an uninitialized value
var value = void 0;
console.log(value === undefined); // true
  1. Safe link control
<a href="javascript:void(0)">Link</a>
In this example, clicking the link does not navigate to another page.

3. Meaning and Usage of javascript:void(0)

What Is javascript:void(0)?

“javascript:void(0)” uses the JavaScript “void” operator to return “undefined.”
<a href="javascript:void(0)">A link that does not navigate</a>
Clicking this code results in no page navigation or action.

Usage Examples

  1. Executing JavaScript on button click
<a href="javascript:void(0)" onclick="alert('Clicked!')">Button</a>
  1. Form validation
<a href="javascript:void(0)" onclick="validateForm()">Submit</a>
Here, the page transition is prevented until form validation is completed.

4. Issues and Risks of javascript:void(0)

Negative Impact on SEO

Search engines may not properly crawl links that use the javascript: scheme. For SEO-conscious websites, this practice should be avoided.

Reduced Accessibility

Screen readers may treat “javascript:void(0)” as a normal link, which can result in unclear behavior for users relying on assistive technologies.

Problems When JavaScript Is Disabled

If JavaScript is disabled, “javascript:void(0)” does not work at all, leading to a degraded user experience.

5. Alternatives to javascript:void(0)

1. Use the <button> Tag

Using a button element maintains proper HTML structure while allowing full control with JavaScript.
<button type="button" onclick="alert('Clicked!')">Click</button>

2. Combine the <a> Tag with event.preventDefault()

<a href="#" onclick="event.preventDefault(); alert('Clicked!')">Click</a>
This method prevents page navigation using JavaScript while keeping href="#" for SEO and accessibility compatibility.

6. Summary of javascript:void(0)

Review of Key Points

  • “javascript:void(0)” disables default link behavior and executes only JavaScript events.
  • However, it has SEO and accessibility drawbacks, making it unsuitable for modern development.
  • Safer and more flexible alternatives include using the <button> tag or event.preventDefault().

7. Recommended Best Practices

1. Maintain Semantic HTML Structure

Use meaningful and semantically appropriate HTML tags (e.g., <button>, <form>) to ensure proper SEO and accessibility.

2. Manage Event Control in JavaScript

Use event listeners and preventDefault() to handle interactions in a flexible and modern way.

3. Migrate Away From Legacy Code

If existing code uses “javascript:void(0),” consider gradually replacing it with modern alternatives.

8. Conclusion

Overall Takeaways

  • “void 0” always returns “undefined,” helping prevent unintended overwriting of the global undefined value.
  • “javascript:void(0)” disables link navigation and is used to control JavaScript execution, but introduces SEO and accessibility issues.
  • Modern web development recommends using semantic HTML tags and preventDefault() for safer, standards-based behavior.

Final Advice

While “void 0” and “javascript:void(0)” have historically been useful techniques, they are not always ideal choices in modern JavaScript development. For new projects, it is recommended to adopt updated approaches that prioritize SEO, accessibility, and maintainability. Build a solid understanding of these concepts and apply them effectively in real-world development.
広告