Wie schreibt man JavaScript richtig? Praktische Tipps für sauberen Code
Lukas Fehrenbach 16 Oktober 2025 0

Du willst JavaScript schreiben, das nicht nur funktioniert, sondern auch leicht zu verstehen und zu warten ist? Dann bist du hier genau richtig. In diesem Leitfaden zeige ich dir, welche Regeln, Konzepte und kleinen Tricks du gleich umsetzen kannst, um JavaScript richtig schreiben zu lernen - ohne stundenlange Theorie.

Wichtige Punkte

  • Verwende let und const statt var für neue Variablen.
  • Halte Funktionen klein und fokussiert; nutze Arrow Functions, wo es Sinn macht.
  • Aktiviere Strict Mode sofort, um häufige Fehler zu vermeiden.
  • Vermeide globale Variablen - arbeite mit Modulen (ES‑Modules) oder IIFEs.
  • Nutze Linter‑Tools (ESLint) und Prettier, um Konsistenz zu garantieren.

Was bedeutet korrektes JavaScript?

JavaScript ist eine Sprache, die sowohl im Browser als auch auf dem Server (z.B. Node.js) läuft. Korrekt geschrieben bedeutet, dass der Code die offizielle ECMAScript-Spezifikation einhält, leicht lesbar ist und zukünftige Änderungen nicht unerwartet bricht.

Typische Fallen sind implizite Typumwandlungen, das versehentliche Überschreiben globaler Namen und das Ignorieren von Asynchronität. Wenn du diese Stolpersteine vermeidest, sparst du dir später viel Debug‑Zeit.

Grundlegende Syntaxregeln

Einige Regeln sind so grundlegend, dass sie kaum erwähnt werden - bis sie dich doch erwischen.

  1. Jede Anweisung endet mit einem Semikolon. Moderne Editoren können das zwar automatisch setzen, aber ein klares Ende verhindert automatisches „Automatic Semicolon Insertion“ (ASI)‑Verhalten, das zu schwer nachzuvollziehenden Bugs führen kann.
  2. Strings sollten einheitlich mit einfachen (') oder doppelten (") Anführungszeichen geschrieben werden. Für mehrzeilige Texte benutze Template‑Literals (Backticks `).
  3. Verwende immer === und !== anstelle von == und !=, um unerwartete Typkonvertierungen zu vermeiden.

Variablen richtig deklarieren

Der Wechsel von var zu let und const hat die Sprache sicherer gemacht. Hier ein schneller Überblick:

Vergleich von var, let und const
Eigenschaft var let const
Scope funktional Block Block
Hoisting Ja (undefiniert) Ja (nicht initialisiert) Ja (nicht initialisiert)
Neu Zuordnen Erlaubt Erlaubt Verboten

Für Werte, die sich nie ändern (wie Konfigurationsobjekte), benutze const. Für Zähler oder temporäre Werte ist let ideal. var sollte nur noch in Legacy‑Code vorkommen.

Isometrische Darstellung von Modulen, Arrow‑Funktionen und Linter‑Warnungen in einer IDE.

Funktionen und Arrow Functions

Funktionen sind das Herz von JavaScript. Moderne Syntax macht sie kompakter, aber du musst die Unterschiede verstehen.

  • Normale Funktionsdeklaration: function add(a, b) { return a + b; }. Diese hat ihr eigenes this-Binding.
  • Function Expression: const add = function(a, b) { return a + b; };. Nützlich, wenn du Funktionen an andere übergeben willst.
  • Arrow Function: const add = (a, b) => a + b;. Kein eigenes this - ideal für Callbacks und kurze Berechnungen.

Ein häufiger Fehler ist das Vergessen, dass Arrow Functions kein arguments-Objekt besitzen. Wenn du darauf zugreifen musst, verwende lieber eine klassische Function Expression.

Moderne Features nutzen, aber nicht übertreiben

ES2025 brachte Features wie private class fields, top‑level await und match-Operatoren. Sie sind großartig, solange du sicherstellst, dass deine Zielumgebung sie unterstützt (Browser‑Kompatibilitätsliste, Babel‑Polyfills).

Ein praktisches Vorgehen:

  1. Schreibe zuerst in Standard‑ES6, das praktisch überall läuft.
  2. Füge neue Syntax nur dann ein, wenn du den Build‑Step (Webpack, Vite) und die Zielplattform geprüft hast.
  3. Nutze Feature‑Detection (z.B. 'match' in String.prototype) anstatt blind zu polyfillen.

Fehlervermeidung und Debugging

Ein paar Praktiken, die sofort helfen:

  • Aktiviere 'use strict'; am Dateianfang - das wirft Fehler bei vergessenen Deklarationen.
  • Benutze die Browser‑Developer‑Tools: Breakpoints, Call‑Stack‑Ansicht und das console.debug()-Level.
  • Setze debugger; gezielt, um an kritischen Stellen anzuhalten.
  • Schreibe unit‑Tests (Jest, Vitest). Ein einfacher Test deckt häufige Randfälle ab.

Ein typischer Bug entsteht durch das Vergessen, await vor einer Promise zu nutzen. Der Code läuft weiter, gibt aber ein ungelöstes Promise zurück. Linter‑Regeln wie require‑await verhindern das.

Checkliste für sauberen JavaScript‑Code mit grünen Häkchen und Symbolen für Strict‑Mode, Tests und Dokumentation.

Best Practices für Wartbarkeit

Wartbarer Code ist kein Zufall, er folgt klaren Prinzipien:

  • Einheitliche Namenskonventionen: camelCase für Variablen/Funktionen, PascalCase für Klassen.
  • Modularisierung: Jeder Datei nur eine Verantwortung zuweisen. Exportiere Funktionen über export und importiere sie dort, wo sie gebraucht werden.
  • Dokumentation: Nutze JSDoc‑Kommentare, damit IDEs Autocompletion liefern.
  • Keine magischen Zahlen: Definiere Konstanten am Anfang (z.B. const MAX_RETRIES = 3;).
  • Vermeide tiefe Verschachtelungen: Frühe Rückgaben (return) reduzieren die Nesting‑Tiefe.

Checkliste für sauberen JavaScript‑Code

  • ✅ 'use strict'; ist aktiv.
  • ✅ Nur let und const werden verwendet.
  • ✅ Alle Funktionen haben ein klares, kurzes Ziel.
  • ✅ Linter (ESLint) läuft ohne Fehler.
  • ✅ Unit‑Tests decken kritische Pfade ab.
  • ✅ Dokumentationskommentare (JSDoc) vorhanden.
  • ✅ Keine unbenutzten Variablen oder Importe.
  • ✅ Projekt nutzt ES‑Modules (import/export) statt veralteter require.

Frequently Asked Questions

Warum sollte ich var nicht mehr verwenden?

var hat funktionalen Scope und wird hoisted, was zu unerwarteten undefined-Werten führen kann. let und const besitzen Block‑Scope und geben klarere Fehlermeldungen, wodurch Bugs leichter zu finden sind.

Was ist der Unterschied zwischen einer Function Declaration und einer Arrow Function?

Eine Function Declaration erstellt ihr eigenes this und kann vor ihrer Definition aufgerufen werden (Hoisting). Eine Arrow Function erbt this vom umgebenden Kontext und ist nicht hoistbar, was sie ideal für Callbacks macht, aber ungeeignet, wenn ein eigenes this nötig ist.

Wie kann ich mein Projekt vor veralteten Browsern schützen?

Nutze ein Transpiling‑Tool wie Babel, um moderne Syntax in ES5 downzutranspilieren, und setze Polyfills gezielt ein. Prüfe die caniuse.com-Datenbank, um zu sehen, welche Features bereits breit unterstützt werden.

Soll ich immer === benutzen?

Ja. === prüft sowohl Typ als auch Wert und verhindert die implizite Typumwandlung, die bei == zu überraschenden Ergebnissen führen kann. Nur in seltenen Fällen, wo lose Gleichheit bewusst gewollt ist, sollte == genutzt werden.

Wie richte ich ESLint für ein neues Projekt ein?

Installiere ESLint mit npm install eslint --save-dev, starte npx eslint --init und wähle ein Style‑Guide (z.B. Airbnb). Ergänze Regeln für no-var, prefer-const und strict. Optional kannst du Prettier als Formatierer einbinden.

Mit diesen Richtlinien und Werkzeugen schreibst du JavaScript, das nicht nur funktioniert, sondern auch langfristig wartbar bleibt. Viel Erfolg beim Codieren!