JavaScript ist eine sehr starke und anpassungsfähige Sprache, birgt jedoch auch das Potenzial für Probleme, die schwer zu erkennen sein können. In diesem Blogartikel befassen wir uns mit fünf der häufigsten Fehler, die Entwickler bei der Arbeit mit JavaScript feststellen, sowie mit den Gründen und Lösungen für diese Probleme. Ganz gleich, ob Sie ein erfahrener Entwickler sind oder gerade erst anfangen: Wenn Sie diese häufigen Gefahren kennen, ersparen Sie sich stundenlange Fehlerbehebung.

Dieser Blog-Artikel wurde von Rupesh Sharma, auch bekannt als @hackyrupesh, verfasst.

1. Unbeabsichtigte globale Variablen

Das Problem

JavaScript ermöglicht die Definition von Variablen, ohne sie explizit zu deklarieren, was zu unbeabsichtigten globalen Variablen führen kann. Dies ist insbesondere bei großen Codebasen oder bei der Arbeit mit mehreren Entwicklern problematisch, da es zu Konflikten und schwer zu debuggenden Fehlern führen kann.

Beispiel

function setUserName() {
    userName = "Alice"; // userName is now a global variable
}

setUserName();
console.log(userName); // Outputs: "Alice"

Im obigen Beispiel wird userName ohne var, let oder const deklariert, sodass es automatisch zu einer globalen Variablen wird. Dies kann zu unerwartetem Verhalten führen, insbesondere wenn userName später an anderer Stelle im Code verwendet wird.

Die Lösung

Deklarieren Sie Variablen immer mit let, const oder var. Dies macht deutlich, ob eine Variable lokal oder global ist und verhindert versehentliche globale Variablen.

function setUserName() {
    let userName = "Alice"; // userName is now a local variable
}

setUserName();
console.log(userName); // ReferenceError: userName is not defined

Referenzen

• Mozilla Developer Network (MDN): JavaScript-Variablen

2. Missbrauch dieses Schlüsselworts

Das Problem

Der Wert davon in JavaScript kann sich je nach Kontext ändern, in dem eine Funktion aufgerufen wird. Dies kann zu unerwartetem Verhalten führen, insbesondere bei der Verwendung von Callbacks oder Event-Handlern.

Beispiel

const user = {
    name: "Alice",
    greet: function() {
        console.log(`Hello, my name is ${this.name}`);
    }
};

setTimeout(user.greet, 1000); // Outputs: "Hello, my name is undefined"

In diesem Beispiel bezieht sich das Schlüsselwort „this“ in „greet“ auf das globale Objekt (oder undefiniert im strikten Modus), wenn es als Callback an setTimeout übergeben wird, und nicht auf das Benutzerobjekt.

Die Lösung

Verwenden Sie Pfeilfunktionen oder bind(), um sicherzustellen, dass dies an das richtige Objekt gebunden bleibt.

setTimeout(user.greet.bind(user), 1000); // Outputs: "Hello, my name is Alice"

Alternativ kann auch die Verwendung von Pfeilfunktionen das Problem lösen, da diese keinen eigenen this-Kontext haben.

const user = {
    name: "Alice",
    greet: function() {
        setTimeout(() => console.log(`Hello, my name is ${this.name}`), 1000);
    }
};

user.greet(); // Outputs: "Hello, my name is Alice"

Referenzen

• MDN: dies in JavaScript

3. Undefinierte und Null-Verwirrung

Das Problem

JavaScript hat sowohl undefiniert als auch null, was zu Verwirrung und Fehlern führen kann, wenn sie austauschbar verwendet oder nicht richtig überprüft werden.

Beispiel

let user = {
    name: "Alice",
    age: null
};

if (user.age) {
    console.log(`User's age is ${user.age}`);
} else {
    console.log("Age is not provided");
}
// Outputs: "Age is not provided"

Hier ist user.age null, aber die if-Bedingung behandelt es als falsch. Dies kann zu Problemen führen, wenn null ein gültiger Status sein soll.

Die Lösung

Prüfen Sie immer explizit auf undefiniert und null, wenn beide gültige Werte in Ihrer Anwendung sind.

if (user.age !== null && user.age !== undefined) {
    console.log(`User's age is ${user.age}`);
} else {
    console.log("Age is not provided");
}

Die Verwendung strikter Gleichheit (===) kann auch dabei helfen, zwischen undefiniert und null zu unterscheiden.

Referenzen

• MDN: Null
• MDN: Undefiniert

4. Rückruf Hölle

Das Problem

Rückruffunktionen sind eine gängige Methode zur Verarbeitung asynchroner Vorgänge in JavaScript. Wenn sie jedoch ineinander verschachtelt sind, können sie tief verschachtelte Strukturen erzeugen, die oft als „Callback-Hölle“ bezeichnet werden. Dies erschwert das Lesen, Warten und Debuggen von Code.

Beispiel

doSomething(function(result1) {
    doSomethingElse(result1, function(result2) {
        doAnotherThing(result2, function(result3) {
            doFinalThing(result3, function(finalResult) {
                console.log(finalResult);
            });
        });
    });
});

Diese tief verschachtelte Struktur ist schwer zu verfolgen und noch schwieriger zu debuggen.

Die Lösung

Verwenden Sie Promises oder async/await, um die Struktur zu verflachen und den Code besser lesbar zu machen.

doSomething()
    .then(result1 => doSomethingElse(result1))
    .then(result2 => doAnotherThing(result2))
    .then(result3 => doFinalThing(result3))
    .then(finalResult => console.log(finalResult))
    .catch(error => console.error(error));

Oder mit async/await:

async function executeTasks() {
    try {
        const result1 = await doSomething();
        const result2 = await doSomethingElse(result1);
        const result3 = await doAnotherThing(result2);
        const finalResult = await doFinalThing(result3);
        console.log(finalResult);
    } catch (error) {
        console.error(error);
    }
}

executeTasks();

Referenzen

• MDN: Versprechen
• MDN: asynchron/warten

5. Probleme mit der Gleitkomma-Präzision

Das Problem

JavaScript verwendet den IEEE 754-Standard zur Darstellung von Zahlen, was insbesondere bei Gleitkomma-Arithmetik zu Präzisionsproblemen führen kann. Dies kann zu unerwarteten Ergebnissen in Berechnungen führen.

Beispiel

console.log(0.1   0.2); // Outputs: 0.30000000000000004
console.log(0.1   0.2 === 0.3); // Outputs: false

Das Ergebnis von 0,1 0,2 ist aufgrund von Gleitkomma-Präzisionsfehlern nicht genau 0,3.

Die Lösung

Um dies zu vermeiden, können Sie das Ergebnis auf eine feste Anzahl von Dezimalstellen runden.

function isEqual(a, b) {
    return Math.abs(a - b) 



Alternativ können Sie mit ganzen Zahlen arbeiten, indem Sie die Zahlen skalieren, bevor Sie Operationen ausführen, und sie dann wieder verkleinern.


console.log((0.1 * 10   0.2 * 10) / 10); // Outputs: 0.3





  
  
  Referenzen

• MDN: Nummer.EPSILON
• Das Problem mit der Gleitkomma-Arithmetik

Abschluss

JavaScript ist eine Sprache voller Eigenheiten und versteckter Risiken, aber wenn Sie die häufigsten Fehler kennen und wissen, wie Sie sie vermeiden können, können Sie saubereren und zuverlässigeren Code entwickeln. Von unerwünschten globalen Variablen bis hin zu Problemen mit der Gleitkomma-Genauigkeit kann jeder dieser Fehler zu großen Schwierigkeiten führen, wenn er nicht behoben wird. Mit den richtigen Codierungsmethoden und den richtigen Tools können Sie diese Bedenken jedoch reduzieren und Ihren JavaScript-Code widerstandsfähiger machen.

dieser Blog geschrieben von Chatgpt ??