5 fatale JavaScript-Fehler von Anfängern (und wie man sie vermeidet)

Warum JavaScript den Kopf verdreht, aber nicht die Karriere ruinieren sollte

JavaScript ist gleichzeitig die freundlichste und die tückischste Programmiersprache. Einerseits schreiben Sie console.log('Hello') – und sofort erscheint das Ergebnis im Browser. Andererseits kann derselbe Code plötzlich undefined, NaN oder etwas Schlimmeres ausgeben, und Sie werden eine Stunde lang nach einem Fehler suchen, der sich in einer einzigen Zeile versteckt.

Auf pythonlib.ru wissen wir, wie wichtig es ist, aus den Fehlern anderer zu lernen. In diesem Artikel analysieren wir 5 typische Fehler von JavaScript-Anfängern, die Code in einen Kürbis verwandeln. Und vor allem zeigen wir, wie man sie behebt. Los geht's!

Fehler Nr. 1: Das magische „var“ und das Missverständnis des Gültigkeitsbereichs

Viele Anfänger, die JavaScript lernen, verwenden var zur Deklaration von Variablen. Dies ist ein Erbe des alten ES5-Standards, der in Lehrbüchern von vor zehn Jahren immer noch lebt. Aber var ist wie ein altes Auto ohne Airbags: Man kann damit fahren, aber beim ersten Unfall (sprich: Bug) wird man schwer verletzt.

Was ist das Problem?

var hat einen funktionalen Gültigkeitsbereich, keinen blockbezogenen. Das bedeutet, dass eine innerhalb von if oder for deklarierte Variable auch außerhalb dieser Blöcke zugänglich ist.

// Beispiel: Fehler mit var\nfunction testVar() {\n  if (true) {\n    var x = 10;\n  }\n  console.log(x); // 10 — funktioniert, obwohl x innerhalb von if deklariert wurde\n}\n\ntestVar();

Stellen Sie sich nun vor, Sie haben 1000 Codezeilen in Ihrem Projekt. Sie haben var i in einer Schleife deklariert und später versehentlich dieselbe Variable verwendet – Sie erhalten einen Bug, der nicht nachvollziehbar ist.

Wie macht man es richtig?

Verwenden Sie let und const. Sie haben einen blockbezogenen Gültigkeitsbereich und verhalten sich vorhersagbar.

// Richtig: let und const\nfunction testLet() {\n  if (true) {\n    let y = 20;\n    const z = 30;\n  }\n  console.log(y); // ReferenceError: y is not defined\n}\n\ntestLet();

Tipp: Verwenden Sie standardmäßig immer const. Nur wenn die Variable neu zugewiesen werden muss, nehmen Sie let. Lassen Sie var in der Vergangenheit, wie Disketten.

Fehler Nr. 2: Das vergessene Schlüsselwort „this“ – der verlorene Kontext

Das Schlüsselwort this in JavaScript ist wie eine Überraschung im Überraschungsei: Man weiß nie, was herauskommt. Anfänger denken oft, dass this immer auf das aktuelle Objekt zeigt. Aber das ist nicht so. this hängt davon ab, wie die Funktion aufgerufen wird, nicht wo sie deklariert ist.

Klassisches Beispiel: Kontextverlust im Callback

const user = {\n  name: 'Anna',\n  greet: function() {\n    console.log('Hallo, ' + this.name);\n  }\n};\n\nuser.greet(); // Hallo, Anna — funktioniert\n\nsetTimeout(user.greet, 1000); // Hallo, undefined — Kontext verloren!

Warum ist das so? Weil setTimeout die Funktion als normale Funktion aufruft, nicht als Methode des Objekts. this zeigt in diesem Fall auf das globale Objekt (im Browser window), das kein name hat.

Wie behebt man das?

Drei Möglichkeiten:

\n
• Pfeilfunktion – sie erzeugt kein eigenes this, sondern übernimmt es aus dem äußeren Kontext.
\n
• Methode .bind() – bindet den Kontext dauerhaft.
\n
• Speichern einer Referenz auf this (alte Methode, besser nicht verwenden).
\n

// Korrektur: Pfeilfunktion\nconst user = {\n  name: 'Anna',\n  greet: function() {\n    console.log('Hallo, ' + this.name);\n  }\n};\n\nsetTimeout(() => user.greet(), 1000); // Hallo, Anna\n\n// Oder mit bind\nsetTimeout(user.greet.bind(user), 1000); // Hallo, Anna

Fehler Nr. 3: Asynchronität – „