Top-Fehler von JavaScript-Anfängern: von A bis Z

Einleitung: Warum ist JavaScript ein Minenfeld für Anfänger?

JavaScript (insbesondere in der Node.js-Umgebung) ist eine Sprache mit einer Vielzahl von Fallstricken. Seine dynamische Natur und Asynchronität bringen selbst diejenigen in Verlegenheit, die bereits Python oder Java beherrschen. Es scheint, als würde der Code funktionieren, aber im ungünstigsten Moment erscheint undefined is not a function oder NaN.

In diesem Artikel analysieren wir die Top-Fehler von JavaScript-Anfängern – von banalen Tippfehlern bis hin zu tiefgreifenden konzeptionellen Fallen. Jeder Punkt wird mit einem realen Beispiel in Node.js und einer Erklärung zur Behebung versehen. Los geht's!

1. Verwechslung von var, let und const (Gültigkeitsbereich)

Der häufigste Anfängerfehler ist die Verwendung von var anstelle von let oder const. In Node.js (insbesondere im strikten Modus) führt dies aufgrund von Hoisting zu unerwartetem Verhalten.

Problem

Mit var deklarierte Variablen haben einen funktionalen und keinen blockbezogenen Gültigkeitsbereich.

// Beispiel für einen Fehler\nfunction testLoop() {\n  for (var i = 0; i < 5; i++) {\n    setTimeout(() => console.log(i), 100);\n  }\n}\ntestLoop(); // Gibt aus: 5, 5, 5, 5, 5 (nicht 0,1,2,3,4)

Lösung

Verwenden Sie immer let für veränderliche Variablen und const für unveränderliche. var sollte am besten gar nicht verwendet werden.

// Korrigierter Code\nfunction testLoopFixed() {\n  for (let i = 0; i < 5; i++) {\n    setTimeout(() => console.log(i), 100);\n  }\n}\ntestLoopFixed(); // Gibt aus: 0, 1, 2, 3, 4

2. Ignorieren von Asynchronität (Callback Hell und Promise)

Node.js basiert auf Asynchronität. Der Versuch, Code so zu schreiben, als würde er sequenziell ausgeführt (wie in Python), führt zu Callback Hell und Datenrennen.

Problem

Verschachtelte Callbacks und der Versuch, Daten vor deren Laden abzurufen.

// Schlecht: Callback Hell\nconst fs = require('fs');\n\nfs.readFile('file1.txt', 'utf8', (err, data1) => {\n  fs.readFile('file2.txt', 'utf8', (err, data2) => {\n    // ... und so weiter\n    console.log(data1 + data2);\n  });\n});

Lösung

Verwenden Sie async/await und Promise.all(). Dies macht den Code linear und lesbar.

// Gut: async/await\nconst fs = require('fs').promises;\n\nasync function readFiles() {\n  try {\n    const [data1, data2] = await Promise.all([\n      fs.readFile('file1.txt', 'utf8'),\n      fs.readFile('file2.txt', 'utf8')\n    ]);\n    console.log(data1 + data2);\n  } catch (err) {\n    console.error('Fehler beim Lesen der Datei:', err);\n  }\n}\nreadFiles();

3. Missverständnis des Kontexts von this

In JavaScript wird this nicht dadurch bestimmt, wo die Funktion geschrieben ist, sondern wie sie aufgerufen wird. In Node.js (außerhalb von Objektmethoden) verweist this auf ein leeres Objekt {} und nicht auf global (wie im Browser).

Problem

Kontextverlust beim Übergeben einer Methode als Callback.

const user = {\n  name: 'Alexej',\n  greet() {\n    console.log(`Hallo, ${this.name}!`);\n  }\n};\n\nsetTimeout(user.greet, 1000); // Gibt aus: "Hallo, undefined!"

Lösung

Verwenden Sie eine Pfeilfunktion (diese erzeugt kein eigenes this) oder die Methode .bind().

// Variante 1: bind\nsetTimeout(user.greet.bind(user), 1000);\n\n// Variante 2: Pfeilfunktion\nsetTimeout(() => user.greet(), 1000); // "Hallo, Alexej!"

4. Vergleich mit == anstelle von ===

Der Operator == führt Typkonvertierung durch, was oft zu unerwarteten Ergebnissen führt. In N