What Does javascript:void(0) Mean in JavaScript Links?

By the end of this page, you will understand what javascript:void(0) does, why it has been used inside href attributes, what the void operator returns, and why modern code usually prefers better alternatives such as buttons or event listeners that prevent default link behavior.

javascript:void(0) is an old JavaScript pattern often placed inside an anchor tag's href attribute.

<a href="javascript:void(0)">login</a>

To understand it, break it into two parts:

• javascript: is a special URL scheme that tells the browser to execute JavaScript code instead of navigating to a normal web address.
• void(0) runs the JavaScript expression 0, then forces the result to be undefined.

So this:

href="javascript:void(0)"

means:

• when the link is clicked,
• execute a tiny bit of JavaScript,
• return nothing useful,
• and do not navigate to another page.

Why developers used it

Developers often used it when they wanted an <a> element to look like a link or be clickable, but they did not want it to actually go anywhere. They would then attach a click handler with JavaScript.

Example:

<a href="javascript:void(0)" id="loginlink">login</a>

<script>
  document.getElementById('loginlink').addEventListener('click', function () {
    alert('Open login dialog');
  });
</script>

Why this matters

You will see this pattern in older codebases, interview questions, and legacy tutorials. Understanding it helps you:

• read older frontend code,
• understand how browsers handle link clicks,
• distinguish HTML navigation from JavaScript actions,
• choose more semantic and accessible alternatives.

Why modern code usually avoids it

Today, javascript:void(0) is usually not the best choice because:

• it mixes JavaScript into HTML,
• it is less semantic than using the right element,
• it can hurt accessibility and maintainability,
• it is considered outdated in most modern code.

If clicking performs an action rather than navigation, a <button> is often the better choice.

<button id="loginButton">login</button>

Or, if it really is a link but JavaScript needs to intercept it, developers often use a normal URL and call event.preventDefault() when needed.

Think of an anchor tag as a door with an address written on it.

• A normal link like /login says: "Go to this place when clicked."
• javascript: says: "Instead of going somewhere, run this instruction."
• void(0) says: "Run it, but produce no meaningful result."

So javascript:void(0) is like putting a fake destination on the door that tells the browser, "Do not travel anywhere; just stay here."

That is why it was often used for clickable UI elements that were not really navigation links.

The basic pattern looks like this:

<a href="javascript:void(0)">Click me</a>

What void does

In JavaScript, void evaluates an expression and always returns undefined.

console.log(void 0);      // undefined
console.log(void(123));   // undefined
console.log(void 'test'); // undefined

0 is not special here because of its value. It is just a simple expression. These all behave similarly:

void 0;
void(0);
void 99;
void('hello');

Each returns undefined.

Example in an anchor

<a href="javascript:void(0)" id="showMessage">Show message</a>

<script>
  document.getElementById('showMessage').addEventListener('click', function () {
    alert('Hello');
  });
</script>

When clicked:

• the browser evaluates javascript:void(0);
• no navigation happens;
• the click event listener still runs.

Better modern alternative

If the element performs an action, use a button:

<button id="showMessage">Show message</button>

<script>
  document.getElementById('showMessage').addEventListener('click', function () {
    alert('Hello');
  });
</script>

This is clearer because a button is meant for actions.

Another alternative with a real link

<a href="/login" id="loginLink">login</a>

<script>
  document.getElementById('loginLink').addEventListener('click', function (event) {
    event.preventDefault();
    alert('Open login modal instead of navigating');
  });
</script>

This approach keeps the HTML meaningful while still allowing JavaScript control.

Consider this example:

<a href="javascript:void(0)" id="loginlink">login</a>

<script>
  document.getElementById('loginlink').addEventListener('click', function () {
    console.log('Login clicked');
  });
</script>

Here is what happens step by step when the user clicks the link:

1. The browser detects a click on the <a> element.
2. The click event listener attached with addEventListener runs.
3. console.log('Login clicked') prints the message.
4. The browser also checks the href attribute.
5. Because the href starts with javascript:, the browser treats the rest as JavaScript code.
6. It evaluates void(0).
7. The expression 0 is evaluated.
8. The void operator forces the final result to be undefined.
9. Since there is no useful URL to follow, the page does not navigate anywhere.

Small JavaScript trace

let result = void(0);
console.log(result); // undefined

Step by step:

• 0 is evaluated.
• void ignores that value.
• the final result becomes undefined.

Important detail

The key purpose is not that 0 is important. The key purpose is that void prevents the expression from producing a navigable result.

Although javascript:void(0) is less common in new code, you may still encounter it in real situations.

1. Legacy web applications

Older dashboards and admin panels often used it for menu items, modal triggers, and expandable sections.

<a href="javascript:void(0)" onclick="openMenu()">Menu</a>

2. Placeholder links during development

Sometimes developers used it temporarily before adding a real destination.

<a href="javascript:void(0)">Coming soon</a>

This works, but a plain button or disabled UI is usually better.

3. JavaScript-controlled UI actions

Links were often used to trigger:

• login popups,
• tab switching,
• accordion toggles,
• dropdown menus,
• client-side widgets.

4. Reading older libraries or templates

If you work with old jQuery plugins, CMS themes, or inherited codebases, you may see many anchors using this pattern.

Understanding it helps you safely refactor those parts into more modern code.

In real projects today, developers usually avoid putting JavaScript directly in href. Instead, they separate structure, behavior, and meaning.

Common modern patterns

Use a button for actions

If the click performs an action instead of navigation:

<button id="loginButton">login</button>

document.getElementById('loginButton').addEventListener('click', function () {
  openLoginModal();
});

This is the most semantic pattern.

Use a real link plus preventDefault

If the element is conceptually a link, but JavaScript may intercept it:

<a href="/login" id="loginLink">login</a>

document.getElementById('loginLink').addEventListener('click', function (event) {
  event.preventDefault();
  openLoginModal();
});

This gives you a fallback destination if JavaScript is unavailable.

Patterns you may see in production code

Guard clauses

document.getElementById('loginLink').addEventListener('click', function (event) {
  if (!userCanOpenModal()) {
    return;
  }

  event.preventDefault();
  openLoginModal();
});

Validation before action

button.addEventListener('click', function () {
  if (!formIsReady()) {
    alert('Please complete the form first');
    return;
  }

  submitForm();
});

Progressive enhancement

Start with meaningful HTML, then enhance it with JavaScript.

<a href="/login" id="loginLink">login</a>

const link = document.getElementById('loginLink');
link.addEventListener('click', function (event) {
  if (supportsModalLogin()) {
    event.preventDefault();
    openLoginModal();
  }
});

This is easier to maintain than embedding javascript:void(0) in markup.

1. Using a link for something that is not navigation

Broken idea:

<a href="javascript:void(0)" id="saveBtn">Save</a>

Why it is a problem:

• saving is an action, not navigation;
• a <button> is more appropriate.

Better:

<button id="saveBtn">Save</button>

2. Thinking void(0) means “do nothing” everywhere

It does not stop all JavaScript. It only evaluates an expression and returns undefined.

console.log(void 0); // undefined

It does not cancel events by itself.

3. Mixing behavior into HTML

Older style:

<a href="javascript:void(0)" onclick="doSomething()">Click</a>

Why to avoid it:

• harder to maintain,
• harder to test,
• mixes HTML and JavaScript.

Better:

<a href="/somewhere" id="myLink">Click</a>

document.getElementById('myLink').addEventListener('click', function (event) {
  event.preventDefault();
  doSomething();
});

4. Using # and forgetting to prevent default

Broken code:

<a href="#" id="menuLink">Menu</a>

document.getElementById('menuLink').addEventListener('click', function () {
  openMenu();
});

Problem:

• clicking may jump the page to the top.

Fix:

document.getElementById('menuLink').addEventListener('click', function (event) {
  event.preventDefault();
  openMenu();
});

5. Assuming it is modern best practice

It is common in older code, but in modern frontend development it is generally considered outdated for most cases.

void(0) vs undefined

In modern JavaScript, undefined is safe to use directly, but void(0) still appears in legacy code.

Quick reference

Meaning

href="javascript:void(0)"

• javascript: = run JavaScript from the URL
• void(0) = evaluate 0, then return undefined
• result: no useful navigation target

void operator

void 0;      // undefined
void(123);   // undefined
void 'text'; // undefined

Why it was used

• make a link clickable without navigating
• attach behavior with JavaScript
• common in older code

Why it is usually avoided now

• mixes JavaScript into HTML
• weaker semantics
• less maintainable
• accessibility concerns

Better choices

For actions:

<button>Open</button>

For real links with JS interception:

<a href="/login" id="loginLink">login</a>

loginLink.addEventListener('click', function (event) {
  event.preventDefault();
  openLoginModal();
});

Rule of thumb

• Use <a> for navigation
• Use <button> for actions
• Learn javascript:void(0) mainly to understand legacy code

What does javascript:void(0) do in HTML?

It tells the browser to execute JavaScript instead of following a normal URL. The void(0) expression returns undefined, so the link does not navigate anywhere useful.

Why is void(0) used instead of just 0?

Because void forces the result to be undefined. The goal is to avoid returning a value that might be treated differently by the browser.

Is javascript:void(0) the same as return false?

No. void(0) simply evaluates to undefined. return false is used in certain event-handling contexts to stop default behavior, depending on how the handler is written.

Is javascript:void(0) bad practice?

In modern code, it is usually not the best option. It is mostly a legacy pattern. Prefer buttons for actions and real links for navigation.

Can I use href="#" instead?

You can, but clicking it may jump the page to the top unless you call event.preventDefault(). It is usually better to use a button for actions.

Does javascript:void(0) stop a click event?

No. It does not cancel the event by itself. Event listeners still run normally.

Why do I still see it in many codebases?

Because many projects contain older frontend patterns, especially legacy jQuery code, CMS themes, and older tutorials.

• Anchor tags (<a>) — Related because javascript:void(0) is commonly used inside an anchor's href.
• Buttons (<button>) — Important because buttons are usually the better semantic choice for actions.
• JavaScript void operator — This is the core language feature behind void(0).
• Event handling — Click behavior is usually controlled with event listeners instead of inline JavaScript.
• event.preventDefault() — Common modern alternative for stopping default link navigation.
• Progressive enhancement — Helps build pages that work as links first, then add JavaScript behavior.
• Semantic HTML — Important for choosing the correct element based on meaning and behavior.
• Accessibility — Relevant because using links for non-navigation actions can confuse keyboard and assistive technology users.