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 utilisé ultérieurement 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 car 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 mal vérifiés.

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 entraîner des problèmes si null est censé être un état valide.

La solution

Vérifiez toujours explicitement les valeurs non dé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) 



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





  
  
  Références

• MDN : Numéro.EPSILON
• Le problème avec l'arithmétique à virgule flottante

Conclusion

JavaScript est un langage plein de particularités et de risques cachés, mais connaître les failles les plus fréquentes et comment les éviter vous permet de développer un code plus propre et plus fiable. Des variables globales indésirables aux problèmes de précision des virgules flottantes, chacun de ces défauts peut créer des difficultés majeures s'il n'est pas résolu. Cependant, avec des méthodes de codage appropriées et les outils appropriés, vous pouvez réduire ces problèmes et rendre votre code JavaScript plus résilient.

ce blog écrit par Chatgpt ??