Void(0) in JavaScript: Grundlagen, Praxis, Alternativen und Best Practices

von

Was Void(0) wirklich macht – und warum es lange Zeit so beliebt war

Void(0) ist die gebräuchlichste Nutzung des void-Operators in JavaScript. Der Operator void wertet einen Ausdruck aus und gibt immer undefined zurück. Damit erzwingst du bewusst, dass kein nutzbarer Rückgabewert entsteht – selbst wenn der Ausdruck intern einen Wert ergeben würde.

Merksatz: void wertet aus, aber liefert immer undefined. Void(0) ist nur die kürzeste, eindeutige Schreibweise, um genau das zu signalisieren.

Historisch wurde javascript:void(0) vor allem in href-Attributen von Links verwendet, um ein Klickereignis auszulösen, ohne dass eine Navigation oder ein Seitenreload stattfand. Dazu kommt ein spezieller Mechanismus von javascript:-URIs: Der im URI enthaltene Code wird ausgeführt, und der Rückgabewert könnte theoretisch den Dokumentinhalt ersetzen. Gibst du aber undefined zurück (z. B. mit void(0)), bleibt die Seite bestehen.

Technische Basis: void-Operator, undefined und Operatorrangfolge

Der void-Operator:

  • ist ein unärer Operator (er hat genau einen Operanden),
  • steht immer vor seinem Operanden (präfixe Schreibweise),
  • liefert stets undefined zurück.

Beispiel: 

// Beide Ausdrücke ergeben undefined
void 0;
void (Math.random());

// Typisch:
void(0); // Klammern sind optional, verdeutlichen aber die Absicht

Operatorrangfolge und Klammerregeln

Die Rangfolge von void ist relativ hoch. Das führt schnell zu subtilen Auswertungsunterschieden: 

// Wird geparst als: (void 2) === '2'  → undefined === '2' → false
void 2 === '2';

// Hier wird zuerst verglichen, dann verwirft void das Ergebnis:
void (2 === '2'); // Ergebnis: undefined

Wichtig: Die Operanden werden in JavaScript zwar von links nach rechts ausgewertet, aber die Operatorenrangfolge bestimmt, wie Ausdrücke gebunden werden. Nutze daher Klammern, wenn du die Auswertungsreihenfolge verdeutlichen willst.

Void(0)

Warum Void(0) in Links lange Standard war

<a href="javascript:void(0)">…</a> war über Jahre ein gängiges Muster, um:

  • einen Link-ähnlichen Trigger für JavaScript bereitzustellen,
  • ohne dass tatsächlich eine Navigation erfolgt,
  • und ohne dass der Rückgabewert des Skripts die Seite ersetzt.

Alternativen wie href="#” führen bei Klick häufig zu einem Sprung an den Seitenanfang, was UX-technisch oft unerwünscht ist. Void(0) verhinderte genau das.

Praxisfälle: Wo Void(0) auftaucht – und wie du es sauber nutzt (oder ersetzst)

1) Klickbare Elemente ohne Navigation

Klassisches (historisches) Muster: 

<a href="javascript:void(0)" onclick="openPopup()">Details anzeigen</a>

Das funktioniert, ist aber heute in Sachen Barrierefreiheit, Wartbarkeit und Sicherheit nicht mehr der bevorzugte Weg.

2) Event-Handler: Rückgabewerte bewusst verwerfen

In modernen Event-Handlern brauchst du selten return false. Willst du explizit den Rückgabewert einer Funktion ignorieren (z. B. um Nebeneffekte von Inline-Handlern oder alter Codepfade zu vermeiden), kannst du void einsetzen: 

// Beispiel: Checkbox-Handler; doSomething() könnte true/false liefern.
// Mit "void" stellst du sicher, dass ein möglicher Rückgabewert ignoriert wird.
checkbox.addEventListener('change', () => void doSomething());

In modernen DOM-Handlern bewirkt das Zurückgeben eines Wertes ohnehin nichts. Mit void machst du jedoch explizit klar: „Der Rückgabewert ist beabsichtigt egal.“

3) IIFE (Immediately Invoked Function Expressions) mit void

Eine elegante, aber seltener gewordene Variante: 

// IIFE mit Klammern (üblich)
(function () {
  console.log('IIFE läuft');
}());

// IIFE mit void (weniger verbreitet, aber semantisch klar: Rückgabewert wird verworfen)
void function () {
  console.log('IIFE läuft (void-Variante)');
}();

Der Funktionsaufruf hat eine höhere Priorität als unäre Operatoren; daher wird zuerst der Funktionsaufruf ausgeführt und sein Rückgabewert anschließend von void verworfen. Bei Arrow Functions benötigst du weiterhin Klammern:

Auch interessant:  Der lokale Gerätename wird bereits verwendet: Lösungen und Tipps

// Arrow-IIFE: Klammern sind Pflicht
(() => {
  console.log('Arrow-IIFE');
})();

4) Bookmarklets

Bookmarklets sind JavaScript-Snippets, die du als Lesezeichen speicherst. Hier verhindert void, dass der Rückgabewert den Seiteninhalt ersetzt: 

javascript:void(function(){
  const h1 = document.querySelector('h1');
  if (h1) alert('Überschrift: ' + h1.innerText);
}())

Ohne void riskierst du (je nach Browser-Verhalten), dass statt der Seite Text oder ein Rückgabewert angezeigt wird. void ist hier also ein praktischer Sicherheitsgurt.

Barrierefreiheit und UX: Warum Links mit Void(0) problematisch sind

Ein <a> ist semantisch ein Link – er navigiert irgendwohin. Wenn du daraus per javascript:void(0) eine Pseudo-Schaltfläche machst, erzeugst du Inkonsistenzen:

  • Screenreader kündigen das Element als „Link“ an – obwohl keine Navigation erfolgt.
  • Kontextmenüs bieten „Link in neuem Tab öffnen“ an – was hier unsinnig ist.
  • Tastatursteuerung: Enter aktiviert Links, Space aktiviert Buttons. Pseudo-Links verhalten sich oft inkonsistent.

Die klare Empfehlung: Wenn du eine Aktion auslösen willst (nicht navigieren), nutze ein <button type="button">.

Button wie Link stylen

Du kannst Buttons ohne Mühe wie Links aussehen lassen: 

<button type="button" class="btn-link">Details anzeigen</button>

<style>
.btn-link {
  all: unset;
  color: #1565c0;
  text-decoration: underline;
  cursor: pointer;
}
.btn-link:hover {
  color: #0d47a1;
}
</style>

Void(0)

Moderne Alternativen zu Void(0)

Vermeide javascript:-URIs und Inline-Handler. Nutze stattdessen ereignisbasierte, progressive Patterns:

1) Unobtrusive JavaScript + preventDefault()

<a href="/profil" id="edit">Profil bearbeiten</a>

<script>
  document.getElementById('edit').addEventListener('click', (event) => {
    event.preventDefault();
    openProfileEditor(); // SPA/modal/etc.
  });
</script>

Vorteile: saubere Trennung von Struktur und Verhalten, besser testbar, klarere Intention.

2) Richtige Semantik: Button für Aktionen

<button type="button" id="save">Speichern</button>

<script>
  document.getElementById('save').addEventListener('click', saveDraft);
</script>

3) Frameworks

  • React: 
    <button type="button" onClick={(e) => { e.preventDefault(); doSomething(); }}>Klick</button>
  • Vue: 
    <button type="button" @click.prevent="doSomething">Klick</button>
  • Angular: 
    <button type="button" (click)="doSomething($event)">Klick</button>

Vergleich: Void(0) versus moderne Patterns

Kontext Früheres Muster Empfohlene Lösung Begründung
Aktionen ohne Navigation <a href="javascript:void(0)" onclick="..."> <button type="button"> + addEventListener Semantik korrekt, barrierearm, testbar
Links mit JS-Enhancement <a href="javascript:void(0)"> <a href="/ziel"> + event.preventDefault() Progressive Enhancement, klare Absicht
Bookmarklets javascript:... (Rückgabewert ersetzt Seite) javascript:void(function(){...}()) Seite bleibt erhalten
IIFE (function(){...}()) void function(){...}() oder Klammer-IIFE Rückgabewert wird bewusst verworfen

Sicherheit und Performance

  • Security: javascript:-URIs sind aus Sicherheits- und Wartungsgründen unerwünscht. CSP (Content Security Policy) und viele Audits/Linter raten davon ab. Nutze Event-Listener statt Inline-Handler.
  • Performance: void ist zwar leichtgewichtig, aber moderne Patterns mit separatem JS sind in größeren Apps nachhaltiger und meist effizienter zu pflegen.
  • Linting-Regeln (Beispiele):
    • ESLint: no-script-url (keine javascript:-URIs)
    • ESLint: no-void (optional; wenn du void nur sehr selten erlauben willst)
    • eslint-plugin-jsx-a11y: anchor-is-valid (Links müssen echte Ziele haben)

Fehlerbild „void(0)“-Fehler – Ursachen und Behebung

Manchmal siehst du beim Klick auf Elemente oder in der Statusleiste „javascript:void(0)“, und „nichts passiert“. Häufige Ursachen:

  • JavaScript ist im Browser deaktiviert: Aktiviere JS in den Einstellungen.
  • Skript-Blocker/Privacy-Add-on blockiert JS: Deaktiviere es testweise für die vertrauenswürdige Seite.
  • Seitenfehler: Die Website selbst hat ein Problem. Reload, später erneut prüfen.
  • Falsch konfigurierter Proxy: Proxy neu konfigurieren oder wechseln.
  • Beschädigter Cache/Cookies: Cache/Cookies leeren.
  • Pop-up-/Inhaltsblocker: Kann Events unterdrücken – testweise deaktivieren.
Auch interessant:  Auf ihrem Gerät fehlen wichtige Sicherheits- und Qualitätsfixes: Handlungsanleitung

Operator-Feinheiten: Auswertung und Beispiele

Ein tieferer Blick auf void lohnt sich, um Bugs zu vermeiden: 

// void bindet stark:
const res = void 2 === '2'; // false, denn das ist (void 2) === '2'

// Explizit werden:
const res2 = void (2 === '2'); // undefined

// typischer Einsatz: Rückgabewert ignorieren
const log = () => 'ok';
const x = void log(); // x ist undefined, log läuft aber

Vergiss nicht: Unäre Operatoren wie void sind präfix, Operanden werden links nach rechts ausgewertet, und Klammern dokumentieren Absicht sowie Reihenfolge am zuverlässigsten.

Void in anderen Sprachen – gleiches Wort, andere Bedeutung

void gibt es auch in C, C++, Java, C# – allerdings in anderer Rolle. Eine kompakte Übersicht:

Sprache Bedeutung von void Typische Beispiele Besonderheiten
C Kein Rückgabewert; generischer Zeiger void* void foo(void) { ... } void* kann auf beliebige Typen zeigen (mit Cast vor Dereferenzierung)
C++ Kein Rückgabewert; void* void bar(); Kein Variable vom Typ void möglich
Java Methode ohne Rückgabewert void hello() { ... } Pflichtangabe eines Rückgabetyps – void bedeutet „kein Wert“
C# Methode ohne Rückgabewert void Hello() { ... } Ähnlich Java; rein deklarativ, kein Operator wie in JS

Wichtig: In JavaScript ist void ein Operator, nicht ein Typ. Sein Zweck ist, undefined als Ergebnis zu erzwingen.

Anti-Pattern und Stolpersteine

  • <a href="javascript:void(0)"> als Button-Ersatz: Semantisch falsch, Accessibility-Probleme.
  • href="#" ohne preventDefault(): Scrollt ggf. nach oben; führt zu schlechtem UX.
  • Inline-Handler (onclick="..."): Vermischt Struktur und Verhalten, erschwert Testen und CSP.
  • Arrow-IIFE ohne Klammern: Syntaxfehler. Nutze (() => {...})().
  • Unklare Auswertungsreihenfolge: Bei komplexen Ausdrücken mit void immer Klammern setzen.

Refactoring: Von Void(0) zu modernen Mustern

  1. Nutzung prüfen: Ruft der Link wirklich eine Aktion auf? Dann ist es kein Link, sondern ein Button.
  2. Semantik korrigieren:
    • Navigation: <a href="…">
    • Aktion: <button type="button">
  3. JS entkoppeln: Event-Listener in separaten Skripten registrieren.
  4. preventDefault() nutzen: Nur falls du echte Links für JS-Erweiterungen brauchst.
  5. Linters aktivieren: no-script-url, anchor-is-valid, optional no-void.
  6. Tests & Accessibility: Tastaturbedienung, Screenreader, Fokus-Reihenfolge prüfen.

Praxis-Snippets: Rezepte für den Alltag

Button statt Void-Link

<button type="button" id="open-modal" class="btn-link">Details anzeigen</button>

<script>
  document.getElementById('open-modal').addEventListener('click', () => {
    openModal();
  });
</script>

Link mit JS-Enhancement (SPA)

<a href="/artikel/42" class="spa-link">Artikel lesen</a>

<script>
  document.addEventListener('click', (e) => {
    const a = e.target.closest('a.spa-link');
    if (!a) return;
    e.preventDefault();
    navigateClientSide(a.getAttribute('href'));
  });
</script>

Bookmarklet robust machen

javascript:void(function(){
  try {
    const sel = window.getSelection().toString().trim();
    alert(sel ? 'Auswahl: ' + sel : 'Keine Auswahl gefunden.');
  } catch (e) {
    console.error(e);
  }
}())

Rückgabewert einer Funktion bewusst verwerfen

const maybeReturnsFalse = () => Math.random() > 0.5 ? false : true;

// Rückgabewert explizit egal:
button.addEventListener('click', () => void maybeReturnsFalse());

Wartung, Codequalität und Team-Standards

  • Konventionen dokumentieren: „Keine javascript:-URIs“, „Buttons für Aktionen“, „Links für Navigation“.
  • Automatisieren: Linting und CI-Checks mit passenden Regeln.
  • Security-Header: CSP so konfigurieren, dass Inline-Events blockiert werden. Das verhindert Rückfälle in alte Muster.
  • Review-Checkliste: Enthält ein PR noch void(0) in href? Sind alle interaktiven Elemente semantisch korrekt?
Auch interessant:  Lustige Bilder zum 40. Geburtstag für einen Mann

Fazit

Void(0) war historisch ein pragmatisches Werkzeug, um in Links JavaScript-Aktionen auszuführen, ohne zu navigieren oder den Seiteninhalt zu ersetzen. Technisch ist der void-Operator weiterhin nützlich – etwa zum klaren Verwerfen von Rückgabewerten in seltenen Spezialfällen (IIFEs, Bookmarklets, explizite Semantik). In modernen Webanwendungen solltest du Void(0) in href-Attributen aber konsequent vermeiden. Stattdessen gilt:

  • Für Aktionen: <button type="button"> + Event-Listener.
  • Für Navigation: <a href="…">, optional mit event.preventDefault() für SPA-Enhancements.
  • Kein javascript:-Protokoll, keine Inline-Handler – das verbessert Sicherheit, Wartbarkeit und Barrierefreiheit.

Behalte void als Operator im Werkzeugkasten – bewusst und punktuell. Für den Rest gibt es klarere, sicherere und zugänglichere Patterns.

FAQ

Was ist Void(0) in JavaScript genau?
Void(0) ist die gebräuchlichste Form des void-Operators. void wertet seinen Operanden aus und liefert immer undefined. Void(0) wird traditionell genutzt, um beispielsweise in javascript:-URIs klarzustellen, dass kein Rückgabewert die Seite ersetzt.

Wann sollte ich Void(0) heute noch einsetzen?
Selten. Hauptsächlich in Bookmarklets oder für IIFEs, wenn du explizit zeigen willst, dass du einen Rückgabewert verwerfen möchtest. Für interaktive UI-Elemente nutze stattdessen Buttons bzw. Links mit Events.

Warum ist <a href="javascript:void(0)"> problematisch?
Es ist semantisch falsch (ein Link navigiert), schadet der Barrierefreiheit (Screenreader und Tastaturnutzung), und javascript:-URIs sind sicherheitlich und wartungstechnisch unerwünscht. Moderne Alternativen sind Buttons und Event-Listener.

Ist href="#" eine gute Alternative?
Nur, wenn du event.preventDefault() nutzt und die Nebenwirkungen (z. B. Scrollen an den Seitenanfang) verhinderst. Besser: Buttons für Aktionen oder echte href-Ziele für Navigation plus JavaScript-Enhancement.

Wie funktioniert javascript: im href?
Der Browser wertet den Code aus; je nach Verhalten kann der Rückgabewert das Dokument ersetzen. void(0) liefert undefined, sodass die Seite bestehen bleibt. Dennoch gilt: vermeide javascript:-URIs zugunsten moderner Event-Handler.

Was hat void mit anderen Sprachen zu tun?
In C/C++/Java/C# ist void ein Rückgabetyphinweis (bzw. in C/C++ zusätzlich void* als generischer Zeiger). In JavaScript ist void ein Operator, der undefined erzwingt – völlig anderes Konzept.

Wie vermeide ich den „void(0)-Fehler“, bei dem nichts passiert?
Stelle sicher, dass JavaScript im Browser aktiviert ist, keine Script-Blocker die Seite stören, und dass die Website korrekt lädt. Leere ggf. Cache/Cookies, prüfe Proxys und deaktiviere testweise Pop-up-Blocker.

Ist void schlecht für Performance oder Sicherheit?
void selbst ist neutral. Problematisch sind eher javascript:-URIs und Inline-Handler. Sie erschweren CSP, Audits und Barrierefreiheit. Nutze Event-Listener und semantisch korrekte Elemente.

Kann ich void in Lintern erlauben?
Ja, aber gezielt. Viele Teams verbieten javascript:-URIs (no-script-url) und lassen void nur in begründeten Fällen zu. Definiere klare Teamregeln und nutze CI/Linting, um Standards durchzusetzen.

Wie ersetze ich javascript:void(0) in einer bestehenden Codebase?
Ersetze Pseudo-Links durch <button type="button">, verschiebe Logik in Event-Listener, nutze preventDefault() nur dort, wo echte Navigation unterbunden werden muss, und aktiviere passende Linter-Regeln. Prüfe UX und Accessibility gründlich.

Schreibe einen Kommentar

CAPTCHA

*