JavaScript (JS) est un langage de programmation omniprésent, flexible et très populaire, bien qu'il soit également sujet aux erreurs et aux bogues qui font froncer les sourcils et faire peur à la plupart des développeurs.
JS est largement utilisé pour alimenter l'interactivité utilisateur du côté client de la plupart des applications Web. Sans pour autant JavaScript, peut-être que les choses sur le Web pourraient être sans vie et peu stimulantes. Néanmoins, les flux et reflux de la langue poussent parfois les développeurs à avoir une relation d'amour-haine avec elle.
Les erreurs JavaScript entraînent des applications à produire des résultats inattendus et nuisent à l'expérience utilisateur. UNE étude de l'Université de la Colombie-Britannique (UBC) a cherché à découvrir les causes profondes et l'impact des erreurs et bogues JavaScript. Les résultats de l'étude ont révélé certains modèles courants qui nuisent aux performances des programmes JS.
Voici un diagramme à secteurs montrant ce que les chercheurs ont découvert:
Dans cet article de blog, nous illustrerons certaines des causes courantes des erreurs JavaScript mises en évidence dans l'étude (ainsi que d'autres que nous rencontrons quotidiennement) et comment rendre vos applications moins sujettes aux pannes.
DOM-related
Le modèle d'objet de document (DOM) joue un rôle essentiel dans l'interactivité des sites Web. L'interface DOM permet de manipuler le contenu, le style et la structure d'une page Web. Rendre les pages Web HTML simples interactives - ou manipuler le DOM - est la raison même de la sortie du langage de programmation JavaScript.
Ainsi, même avec l'introduction de technologies JavaScript backend telles que Node.js, travailler avec le DOM constitue toujours une grande partie de ce que fait le langage. Par conséquent, le DOM est une avenue importante pour introduire des bogues et des erreurs dans les applications JavaScript.
Il n'est pas surprenant que l'étude du rapport de bogue JavaScript ait découvert que les problèmes liés au DOM sont responsables de la plupart des failles, à 68%.
Par exemple, certains programmeurs JavaScript font souvent l'erreur de référencer un élément DOM avant son chargement, ce qui entraîne des erreurs de code.
<!DOCTYPE html>
<html>
<body>
<script>
document.getElementById("container").innerHTML = "Common JS Bugs and Errors";
</script>
<div id="container"></div>
</body>
</html>Si le code ci-dessus est exécuté sur le navigateur Chrome, il générera une erreur, qui peut être vue sur la console du développeur:
L'erreur est générée car le code JavaScript est généralement exécuté selon l'ordre dans lequel il apparaît sur un document. En tant que tel, le navigateur n'a pas connaissance de la référence <div> élément lorsque le code s'exécute.
Pour résoudre un tel problème, vous pouvez utiliser différentes approches. La méthode la plus simple consiste à placer le <div id="container"></div> avant le début de la balise script. Vous pouvez également utiliser une bibliothèque JavaScript comme jQuery pour vous assurer que le DOM est chargé en premier avant de pouvoir 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 = "Common JS Bugs and Errors";
</script>
</body>
</html>Syntax-based
Des erreurs de syntaxe se produisent lorsque l'interpréteur JavaScript ne parvient pas à exécuter un code syntaxiquement incorrect. Si la création d'une application et que l'interpréteur observe des jetons qui ne correspondent pas à la syntaxe standard du langage de programmation JavaScript, il générera une erreur. Selon l'étude du rapport de bogue JavaScript, ces erreurs sont responsables de 12% de toutes les erreurs dans la langue.
Les erreurs grammaticales, telles que les parenthèses manquantes ou les crochets sans correspondance, sont les principales causes des erreurs de syntaxe dans JavaScript.
Par exemple, lorsque vous devez utiliser des instructions conditionnelles pour traiter plusieurs conditions, vous risquez de ne pas fournir les parenthèses si nécessaire, ce qui entraîne des failles de syntaxe.
Regardons l'exemple suivant.
if((x > y) && (y < 77) {
//more code here
}Oui, la dernière parenthèse de l'instruction conditionnelle est manquante. Avez-vous remarqué l'erreur avec le code ci-dessus?
Corrigeons-le.
if ((x > y) && (y < 77)) {
//more code here
}Pour éviter de telles erreurs de syntaxe, vous devez passer du temps à apprendre les règles grammaticales du langage de programmation JavaScript. Grâce à une pratique approfondie du codage, vous pouvez facilement repérer les erreurs grammaticales et éviter de les expédier avec votre application développée.
Improper usage of undefined/null keywords
Certains développeurs JavaScript ne savent pas comment utiliser indéfini et nul mots clés correctement. En fait, l'étude a rapporté qu'une mauvaise utilisation des mots-clés représente 5% de tous les bogues JavaScript.
La nul Le mot clé est une valeur d'affectation, qui est généralement affectée à une variable pour désigner une valeur inexistante. Étonnamment, nul est également un objet JavaScript.
Voici un exemple:
var codeJS = null;
console.log(codeJS);
//output is null
console.log(typeof codeJS);
//output is objectD'autre part, indéfini indique qu'une variable ou toute autre propriété, qui a déjà été déclarée, n'a pas de valeur assignée. Cela peut également impliquer que rien n'a été déclaré. indéfini est un type de lui-même.
Voici un exemple:
var codeJS;
console.log(codeJS);
//output is undefined
console.log(typeof codeJS);
//output is undefinedFait intéressant, si l'opérateur d'égalité et l'opérateur d'identité sont utilisés pour comparer les nul et indéfini mots-clés, ce dernier ne les considère pas comme égaux.
console.log(null==undefined);
//output is true
console.log(null===undefined);
//output is falsePar conséquent, connaître l'utilisation correcte du nul et indéfini Les mots-clés peuvent vous aider à éviter d'introduire des bogues dans vos programmes JavaScript.
Undefined methods
Une autre cause fréquente de bogues dans JavaScript est de faire un appel à une méthode sans fournir sa définition préalable. Les chercheurs de l'UBC ont découvert que cette erreur entraînait 4% de toutes les erreurs JavaScript.
Voici un exemple:
var coder = {
name: "Peter",
age: 27,
speak() {
console.log(this.name);
}
};
coder.speakNow();Voici l'erreur qui apparaît sur la console des développeurs Chrome:
L'erreur ci-dessus se produit car la fonction appelée, speakNow (), n'a pas été définie dans le code JavaScript.
Improper usage of the return statement
En JavaScript, le retourner L'instruction est utilisée pour arrêter l'exécution d'une fonction afin que sa valeur puisse être sortie. Si elle est utilisée à tort, l'instruction return peut affecter les performances optimales des applications. Selon l'étude, une utilisation incorrecte de l'instruction de retour conduit à 2% de tous les bogues dans les applications JavaScript.
Par exemple, certains programmeurs JavaScript font généralement l'erreur de briser l'instruction de retour de manière incorrecte.
Bien que vous puissiez diviser une instruction JavaScript en deux lignes tout en obtenant la sortie requise, la rupture de l'instruction return provoque un désastre dans 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é, une erreur non définie s'affiche sur la console des développeurs Chrome:
Par conséquent, vous devriez renoncer à casser retourner instructions dans votre code JavaScript.
Conclusion
Le langage de programmation JavaScript côté client est doté d'excellentes capacités étendues pour alimenter les fonctionnalités des applications Web modernes. Cependant, si vous ne comprenez pas les bizarreries qui font fonctionner le langage, les performances de vos applications peuvent être paralysées.
En outre, Développeurs JavaScript nécessitent des outils polyvalents pour dépanner les performances de leurs applications et détecter rapidement les bogues et les erreurs.
Par conséquent, avec une suite complète de outils de test, vous pouvez identifier en toute confiance les anomalies qui nuisent aux performances de votre site Web. C'est ce dont vous avez besoin pour améliorer les performances de votre site et obtenir une expérience utilisateur optimale.
Bonne programmation JavaScript sans erreur!
Article rédigé par Alfrick Opidi
