Principaux bogues les plus importants en JavaScript (et comment les éviter)

JavaScript est un langage très puissant et adaptable, mais il présente également le potentiel de problèmes qui peuvent être difficiles à détecter. Dans cet article de blog, nous examinerons cinq des défauts les plus courants rencontrés par les développeurs lorsqu'ils travaillent avec JavaScript, ainsi que les raisons et les solutions à ces problèmes. Que vous soyez un développeur chevronné ou un débutant, connaître ces dangers courants vous évitera des heures de dépannage.

Cet article de blog a été rédigé par Rupesh Sharma, également connu sous le nom de @hackyrupesh.

1. Variables globales involontaires

Le problème

JavaScript permet de définir des variables sans les déclarer explicitement, ce qui peut conduire à des variables globales involontaires. Ceci est particulièrement problématique dans les bases de code volumineuses ou lorsque vous travaillez avec plusieurs développeurs, car cela peut entraîner des conflits et des erreurs difficiles à déboguer.

Exemple

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

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

Dans l'exemple ci-dessus, userName est déclaré sans var, let ou const, il devient donc automatiquement une variable globale. Cela peut conduire à un comportement inattendu, surtout si userName est ensuite utilisé ailleurs dans le code.

La solution

Déclarez toujours les variables en utilisant let, const ou var. Cela indique clairement si une variable est locale ou globale et évite les variables globales accidentelles.

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

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

Références

• Mozilla Developer Network (MDN) : variables JavaScript

2. Utilisation abusive de ce mot clé

Le problème

La valeur de this en JavaScript peut changer en fonction du contexte dans lequel une fonction est appelée. Cela peut entraîner un comportement inattendu, en particulier lors de l'utilisation de rappels ou de gestionnaires d'événements.

Exemple

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

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

Dans cet exemple, le mot-clé this à l'intérieur de greet fait référence à l'objet global (ou non défini en mode strict) lorsqu'il est transmis comme rappel à setTimeout, plutôt qu'à l'objet utilisateur.

La solution

Utilisez les fonctions fléchées ou bind() pour vous assurer que cela reste lié au bon objet.

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

Alternativement, l'utilisation de fonctions fléchées peut également résoudre le problème puisqu'elles n'ont pas leur propre contexte.

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

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

Références

• MDN : ceci en JavaScript

3. Confusion indéfinie et nulle

Le problème

JavaScript a à la fois undefined et null, ce qui peut entraîner de la confusion et des bugs lorsqu'ils sont utilisés de manière interchangeable ou qu'ils ne sont pas vérifiés correctement.

Exemple

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"

Ici, user.age est nul, mais la condition if le traite comme faux. Cela peut causer des problèmes si null est censé être un état valide.

La solution

Vérifiez toujours explicitement les valeurs indéfinies et nulles si les deux sont des valeurs valides dans votre application.

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

L'utilisation de l'égalité stricte (===) peut également aider à faire la distinction entre indéfini et nul.

Références

• MDN : Nul
• MDN : non défini

4. L'enfer des rappels

Le problème

Les fonctions de rappel sont un moyen courant de gérer les opérations asynchrones en JavaScript. Cependant, lorsqu’ils sont imbriqués les uns dans les autres, ils peuvent créer des structures profondément imbriquées, souvent appelées « l’enfer des rappels ». Cela rend le code difficile à lire, à maintenir et à déboguer.

Exemple

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

Cette structure profondément imbriquée est difficile à suivre et encore plus difficile à déboguer.

La solution

Utilisez Promises ou async/await pour aplatir la structure et rendre le code plus lisible.

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

Ou, en utilisant 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();

Références

• MDN : Promesses
• MDN : asynchrone/attendre

5. Problèmes de précision en virgule flottante

Le problème

JavaScript utilise la norme IEEE 754 pour représenter les nombres, ce qui peut entraîner des problèmes de précision, notamment avec l'arithmétique à virgule flottante. Cela peut entraîner des résultats inattendus dans les calculs.

Exemple

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

Le résultat de 0,1 + 0,2 n'est pas exactement 0,3 en raison d'erreurs de précision en virgule flottante.

La solution

Pour éviter cela, vous pouvez arrondir le résultat à un nombre fixe de décimales.

function isEqual(a, b) {
    return Math.abs(a - b) < Number.EPSILON;
}

console.log(isEqual(0.1 + 0.2, 0.3)); // Outputs: true

Vous pouvez également travailler avec des nombres entiers en mettant les nombres à l'échelle avant d'effectuer des opérations, puis en les réduisant.

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

References

• MDN: Number.EPSILON
• The Problem with Floating Point Arithmetic

Conclusion

JavaScript is a language full of idiosyncrasies and hidden risks, but knowing the most frequent flaws and how to avoid them allows you to develop cleaner, more dependable code. From unwanted global variables to floating-point accuracy concerns, each of these flaws can create major difficulties if not addressed. However, with proper coding methods and the correct tools, you can reduce these concerns and make your JavaScript code more resilient.

this blog written by Chatgpt ??

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!