Ever seen javascript:void(0) in code and thought, “What sorcery is this?” You’re not alone. This odd-looking piece of JavaScript makes many developers scratch their heads, especially when they’re starting out. But fear not! We’re going to break it down in the most fun and simple way possible.
TL;DR – What You Need to Know
javascript:void(0) is used to create a link or button that doesn’t do anything. It tells the browser: “Don’t go anywhere or reload the page.” It’s handy when you want a clickable element to trigger JavaScript, but not navigate. It’s a safer alternative to using # in some cases.
Let’s Start With Links and Their Behavior
Web developers often use links like this:
<a href="#">Click me!</a>When you click that link, the browser scrolls to the top of the page. Why? Because # is a fragment identifier. If there’s no matching element, it jumps to the top. That gets… annoying.
If you want the link to run JavaScript instead — without refreshing or jumping — you can use:
<a href="javascript:void(0)" onclick="doSomething()">Click me!</a>That’s where the magic happens.
Okay, But What Does It Actually Mean?
Let’s break it down:
javascript:tells the browser to execute JavaScript code directly.voidis an operator that prevents a value from being returned.0is just a harmless number — like zero vibes. 🧘
So when you write javascript:void(0), you’re telling the browser:
“Run this JavaScript. Don’t return anything. And definitely don’t reload the page.”
Why Not Just Use #? Isn’t That Easier?
Yes, # is easier. But it comes with baggage.
- Clicking it scrolls the page.
- It affects browser history — especially if combined with real anchors.
- It might trigger page reloads in some scenarios.
javascript:void(0) is more deliberate. It says: “This is exactly what I want to happen: no navigation at all.”
Real-Life Uses
Here are some places you might see it used:
- As a link that should open a JavaScript dropdown.
- In older frameworks like jQuery-based UIs.
- In inline
onclickhandlers that shouldn’t redirect users.
Imagine you have a menu that appears when the user clicks a button. You don’t want that click to navigate anywhere. You just want it to toggle the menu.
<a href="javascript:void(0)" onclick="toggleMenu()">Menu</a>Neat, right?
A Tiny Dive Into the void Operator
The void operator might look strange. But all it really does is return undefined.
Try it in your browser’s console:
void 0It will give you undefined.
So why not just write javascript:undefined?
Because someone could redefine undefined (at least in old JavaScript versions). That’s risky! But you can’t redefine void. So it’s safer.
BONUS: You Can Use Other Values In void()
Yes! You can pass any expression to void(). It just… throws it away.
Try this:
javascript:void(alert("Hi"))It shows the alert, then throws away its return value. No navigation. No mess.
Common Mistakes to Avoid
Let’s go over some oopsies so you don’t fall into common traps:
- Using
href="#"instead — This might reload the page or scroll to the top. - Forgetting to add
onclick— Your link will do nothing. That might confuse users. - Trying this on bootstrapped buttons — Use
<button>instead when possible! It’s more semantic.
Remember: Accessibility matters. Don’t make users work harder than they need to. 🧑💻
Let’s Talk Better Alternatives
JavaScript has evolved. So have best practices.
Using href="javascript:void(0)" can get the job done. But modern code often avoids it.
Instead, do this:
<button onclick="doSomething()">Click me</button>Buttons are made for clicking. And they don’t mess with browser history!
Conclusion
javascript:void(0) might look weird, but it has a deep purpose. It’s been a handy trick for many years in web development. It’s perfect for clickable elements that shouldn’t redirect or navigate.
But remember, with great JavaScript comes great responsibility. Use it wisely — and always aim for the cleanest, most accessible solution.
Now go forth and banish those accidental page reloads!