Best Practices & Fallstricke

Viele Bugs in JavaScript entstehen nicht durch komplexe Logik, sondern durch bekannte Eigenheiten der Sprache. Hier findest du die häufigsten Stolperfallen und wie du sie mit moderner Syntax umgehst.

Strikter Vergleich und sinnvolle Standardwerte

Nutze === statt ==, dann gibt es keine implizite Typumwandlung. Für Standardwerte ist ?? meist besser als ||, weil es 0 und '' stehen lässt.

0 == '';   // true – Überraschung
0 === '';  // false

const limit = options.limit || 10;     // 0 wird zu 10!
const safeLimit = options.limit ?? 10; // 0 bleibt 0
const city = user?.address?.city ?? 'unbekannt';

Ungewollte Mutation vermeiden

const schützt nur die Bindung, nicht den Inhalt. sort(), reverse() und splice() verändern das Original-Array. Seit ES2023 gibt es Varianten, die das Original unverändert lassen.

const nums = [10, 1, 5];
const sorted = nums.toSorted((a, b) => a - b); // nums bleibt gleich
const copy = { ...config, debug: true };      // flache Kopie
const deep = structuredClone(config);         // tiefe Kopie

Achtung: sort() ohne Vergleichsfunktion sortiert als Zeichenketten. [10, 1, 5].sort() ergibt [1, 10, 5].

Asynchronen Code richtig schreiben

forEach wartet nicht auf async-Callbacks. Nimm for...of, wenn die Schritte nacheinander laufen sollen, und Promise.all, wenn sie parallel laufen dürfen. Fang Fehler immer ab.

const loadAll = async (ids) => {
  try {
    return await Promise.all(ids.map(async (id) => {
      const res = await fetch(`/api/users/${id}`);
      if (!res.ok) throw new Error(`HTTP ${res.status}`);
      return res.json();
    }));
  } catch (err) {
    console.error('Laden fehlgeschlagen:', err);
    return [];
  }
};

Wichtig: fetch wirft bei 404 oder 500 keinen Fehler. Prüf deshalb immer res.ok.

Zahlen und Gleitkomma

Zahlen in JavaScript sind binäre Gleitkommazahlen (IEEE 754). Vergleich sie deshalb mit einer Toleranz und speicher Geldbeträge als ganze Cent-Werte.

0.1 + 0.2 === 0.3;                           // false
Math.abs(0.1 + 0.2 - 0.3) < Number.EPSILON;  // true
Number.isNaN('abc');                         // false (isNaN('abc') → true)