5 causes courantes d'erreurs JavaScript (et comment les éviter)
JavaScript (JS) est un langage de programmation incontournable, polyvalent et très prisé, mais il est aussi la source d'erreurs et de dysfonctionnements qui peuvent donner des sueurs froides aux développeurs.
JS est largement employé pour dynamiser l'interaction utilisateur côté client de la majorité des applications web. Sans JavaScript, le web serait probablement un espace statique et peu engageant. Toutefois, les particularités du langage peuvent parfois susciter une relation d'amour-haine chez les développeurs.
Les erreurs JavaScript peuvent conduire à des résultats inattendus et nuire à l'expérience utilisateur. Une étude menée par l'Université de la Colombie-Britannique (UBC) a exploré les causes profondes et l'impact des erreurs et bogues JavaScript. Les conclusions de l'étude ont révélé certains schémas récurrents qui affectent les performances des programmes JS.
Voici un diagramme circulaire illustrant les résultats de cette recherche :
Dans cet article, nous allons examiner certaines des causes fréquentes d'erreurs JavaScript, identifiées lors de l'étude (ainsi que d'autres que l'on rencontre régulièrement), et comment rendre vos applications moins sujettes aux échecs.
Problèmes liés au DOM
Le Document Object Model (DOM) est un élément clé de l'interactivité des sites web. L'interface DOM permet de manipuler le contenu, le style et la structure d'une page web. La possibilité de rendre interactives les pages HTML – ou de manipuler le DOM – est la raison même pour laquelle le langage de programmation JavaScript a été créé.
Ainsi, malgré l'émergence de technologies JavaScript côté serveur comme Node.js, la manipulation du DOM reste une part importante du travail avec ce langage. Par conséquent, le DOM est une voie courante pour introduire des bugs et des erreurs dans les applications JavaScript.
Il n'est donc pas surprenant que l'étude sur les rapports de bugs JavaScript ait révélé que les problèmes liés au DOM sont responsables de la majorité des défauts, soit 68%.
Par exemple, certains développeurs JavaScript commettent souvent l'erreur de faire référence à un élément DOM avant qu'il ne soit chargé, ce qui génère des erreurs de code.
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("container").innerHTML = "Problèmes courants de JS";
</script>
<div id="container"></div>
</body>
</html>
Si le code ci-dessus est exécuté dans le navigateur Chrome, une erreur s'affichera dans la console développeur :
Cette erreur est générée car le code JavaScript est généralement exécuté selon l'ordre dans lequel il apparaît dans le document. Par conséquent, le navigateur n'a pas connaissance de l'élément référencé lors de l'exécution du code.
Pour corriger ce type de problème, différentes approches existent. La méthode la plus simple consiste à placer avant le début de la balise de script. Il est également possible d'utiliser une bibliothèque JavaScript comme jQuery pour s'assurer que le DOM est chargé en premier avant d'y accéder.
<!DOCTYPE html>
<html>
<body>
<div id="container"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
document.getElementById("container").innerHTML = "Problèmes courants de JS";
</script>
</body>
</html>
Problèmes liés à la syntaxe
Les erreurs de syntaxe se produisent lorsque l'interpréteur JavaScript est incapable d'exécuter un code qui n'est pas correct syntaxiquement. Si lors de la compilation d'une application, l'interpréteur rencontre des jetons qui ne respectent pas la syntaxe standard de JavaScript, il génère une erreur. Selon l'étude, ces erreurs sont responsables de 12% de toutes les erreurs en JavaScript.
Les erreurs grammaticales, telles que des parenthèses manquantes ou des crochets non appariés, sont les principales causes d'erreurs de syntaxe en JavaScript.
Par exemple, lorsque vous utilisez des instructions conditionnelles pour répondre à plusieurs conditions, vous pouvez oublier de fournir les parenthèses nécessaires, ce qui engendre des erreurs de syntaxe.
Prenons l'exemple suivant :
if((x > y) && (y < 77) {
//du code ici
}
Effectivement, la dernière parenthèse de l'instruction conditionnelle est absente. Avez-vous repéré l'erreur dans le code ci-dessus ?
Voici la version corrigée :
if ((x > y) && (y < 77)) {
//du code ici
}
Pour éviter ces erreurs de syntaxe, il est conseillé de prendre le temps d'apprendre les règles grammaticales du langage JavaScript. Avec une pratique régulière du codage, il devient facile de repérer ces erreurs et de les éviter dans vos applications.
Utilisation incorrecte des mots-clés undefined/null
Certains développeurs JavaScript ne savent pas comment utiliser correctement les mots-clés undefined et null. L'étude a révélé que l'utilisation inappropriée de ces mots-clés représente 5% de tous les bugs JavaScript.
Le mot-clé null est une valeur d'affectation, généralement attribuée à une variable pour indiquer une valeur inexistante. Étonnamment, null est également un objet JavaScript.
Voici un exemple :
var codeJS = null;
console.log(codeJS);
//le résultat est null
console.log(typeof codeJS);
//le résultat est object
D'un autre côté, undefined indique qu'une variable ou une autre propriété, qui a été déclarée, n'a pas de valeur assignée. Cela peut aussi signifier qu'elle n'a pas été déclarée du tout. undefined est un type en soi.
Voici un exemple :
var codeJS;
console.log(codeJS);
//le résultat est undefined
console.log(typeof codeJS);
//le résultat est undefined
Il est intéressant de noter que si l'opérateur d'égalité et l'opérateur d'identité sont utilisés pour comparer les mots-clés null et undefined, ce dernier ne les considère pas comme égaux.
console.log(null==undefined);
//le résultat est true
console.log(null===undefined);
//le résultat est false
Par conséquent, connaître l'utilisation correcte des mots-clés null et undefined peut vous aider à éviter d'introduire des bugs dans vos programmes JavaScript.
Méthodes non définies
Une autre cause fréquente de bugs en JavaScript est l'appel d'une méthode sans fournir sa définition préalable. Les chercheurs de l'UBC ont constaté que cette erreur entraînait 4% de toutes les erreurs JavaScript.
Voici un exemple :
var coder = {
name: "Pierre",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();
Voici l'erreur qui s'affiche dans la console développeur de Chrome :
L'erreur ci-dessus se produit car la fonction appelée, speakNow(), n'a pas été définie dans le code JavaScript.
Utilisation incorrecte de l'instruction return
En JavaScript, l'instruction return est utilisée pour interrompre l'exécution d'une fonction afin que sa valeur puisse être renvoyée. Utilisée de manière incorrecte, cette instruction peut nuire aux performances optimales des applications. Selon l'étude, une utilisation incorrecte de l'instruction return est responsable de 2% de tous les bugs dans les applications JavaScript.
Par exemple, certains développeurs JavaScript commettent couramment l'erreur de rompre l'instruction return de manière incorrecte.
Bien qu'il soit possible de diviser une instruction JavaScript sur deux lignes et d'obtenir toujours le résultat attendu, diviser l'instruction return est une source de problèmes pour votre application.
Voici un exemple :
function number(n) {
var add = 5;
return;
n + add;
}
console.log(number(10));
Lorsque le code ci-dessus est exécuté, l'erreur "undefined" s'affiche dans la console développeur de Chrome :
Par conséquent, il est préférable d'éviter de diviser les instructions return dans votre code JavaScript.
Conclusion
Le langage JavaScript côté client offre d'excellentes capacités pour dynamiser les fonctionnalités des applications web modernes. Cependant, si vous ne comprenez pas les spécificités de ce langage, les performances de vos applications peuvent être affectées.
De plus, les développeurs JavaScript ont besoin d'outils performants pour diagnostiquer les problèmes de leurs applications et détecter rapidement les bugs et erreurs.
Par conséquent, avec une suite complète d'outils de test, vous pouvez identifier en toute confiance les anomalies qui nuisent aux performances de votre site web. C'est essentiel pour améliorer les performances de votre site et offrir une expérience utilisateur optimale.
Bon développement JavaScript sans erreur !
Article écrit par Alfrick Opidi