1. Utiliser var au lieu de let et const
// Mauvaise pratique
var x = 10;
var x = 20;
// Bonne pratique
let y = 10;
y = 20;
const z = 30; // Valeur constante
2. Confondre types primitifs et objets
Problème : Comparer un type primitif à son objet wrapper peut donner des résultats inattendus.
console.log(new Number(3) === 3); // false
Solution : Évitez les objets wrappers pour les types primitifs. Travaillez directement avec ces derniers.
// Bonne pratique
const num = 3;
console.log(num === 3); // true
3. Ne pas gérer correctement les Promises
catch dans une Promise expose votre application aux erreurs non gérées.
// Mauvaise pratique
fetch('api/data')
.then(response => response.json());
// Bonne pratique
fetch('api/data')
.then(response => response.json())
.catch(error => console.error('Erreur:', error));
4. Modifier directement un objet global
// Mauvaise pratique
Array.prototype.myCustomMethod = function() { /* ... */ };
5. Ne pas utiliser strict mode
5. Ne pas utiliser strict mode
Problème : Sans le strict mode, des erreurs subtiles peuvent passer inaperçues.
Solution : Activez strict mode pour plus de rigueur.
"use strict";
x = 10; // Génère une erreur car x n'est pas déclaré
6. Comparer avec == au lieu de ===
Problème : == effectue une conversion de type imprévisible.
console.log('5' == 5); // true
Solution : Préférez === pour une comparaison stricte.
console.log('5' === 5); // false
7. Boucles infinies mal gérées
Problème : Elles provoquent des plantages ou des blocages.
Solution : Utilisez des conditions bien définies et testez vos boucles.
8. Ignorer la portée des fonctions
Problème : Les variables globales non contrôlées peuvent entraîner des conflits.
// Mauvaise pratique
function example() {
globalVar = 5; // Crée une variable globale
}
Solution : Déclarez toujours vos variables avec let ou const.
9. Oublier les fonctions asynchrones
Problème : Appeler des fonctions asynchrones comme si elles étaient synchrones.
// Mauvaise pratique
const data = fetch('api/data'); // Promise non résolue
Solution : Utilisez await ou gérez la Promise.
// Bonne pratique
const data = await fetch('api/data').then(res => res.json());
10. Ne pas valider les entrées utilisateur
Problème : Cela peut exposer votre application à des failles de sécurité.
Solution : Vérifiez systématiquement les entrées avec des bibliothèques comme validator.js.
Conseils pour réduire les erreurs dans votre code
-
Utilisez des outils comme ESLint
Ces outils analysent votre code et identifient les erreurs potentielles avant l’exécution. -
Implémentez des tests unitaires
Les tests automatisés détectent rapidement les bugs introduits par des changements dans le code. -
Restez à jour
Consultez régulièrement la documentation officielle de JavaScript pour intégrer les bonnes pratiques et nouveautés.