Écrire du code JavaScript peut être difficile et parfois carrément intimidant, comme le savent de nombreux développeurs. Au cours du travail, des erreurs surviennent inévitablement et certaines d'entre elles se répètent fréquemment. Cet article, destiné aux développeurs novices, parle de ces erreurs et de la manière de les résoudre. Pour plus de clarté, les noms des fonctions, propriétés et objets sont tirés de . Tout cela vous aide à vous rappeler rapidement comment corriger les erreurs courantes.
Nous rappelons: pour tous les lecteurs de "Habr" - une remise de 10 000 roubles lors de l'inscription à n'importe quel cours Skillbox en utilisant le code promotionnel "Habr".
Skillbox vous recommande : Cours pratique .
TypeError : la propriété n'est pas définie
let girl = {
name: "Lucky",
location: "Hollywood",
profession: "star",
thingsMissingInHerLife: true,
lovely: true,
cry: function() {
return "cry, cry, cries in her lonely heart"
}
}
console.log(girl.named.lucky)L'exemple de code ci-dessus renvoie l'erreur Uncaught TypeError: Cannot read property 'lucky' of undefined. Le problème est que l'objet girl n'a pas de propriété nommée, bien qu'il en ait une. Et comme la propriété girl.named n'est pas définie, vous ne pouvez pas y accéder, car formellement elle n'existe pas. Mais si vous remplacez girl.named.lucky par girl.name, alors tout fonctionnera et le programme renverra Lucky.
Vous pouvez en savoir plus sur les propriétés .
Comment résoudre les erreurs de type
Les TypeErrors se produisent lorsqu'un programmeur tente d'effectuer des actions sur des données qui ne correspondent pas à un type spécifique. Les exemples incluent l'utilisation de .bold(), la demande d'une propriété non définie ou l'appel d'une fonction qui n'est pas réellement une fonction.
Ainsi, si vous essayez d'appeler girl(), vous obtiendrez l'erreur Uncaught TypeError : yourVariable.bold n'est pas une fonction et girl n'est pas une fonction, car il s'agit en fait d'un objet appelé, pas d'une fonction.
Afin d'éliminer les erreurs, vous devez étudier les variables. Alors, qu'est-ce qu'une fille ? Comment s'appelle girl.name ? Vous pouvez le découvrir en analysant le code, en affichant les variables à l'aide de console.log, de la commande du débogueur ou en appelant le nom de la variable dans la console. Vous devez vous assurer qu'il est possible d'opérer sur le type de données contenu dans la variable. S'il ne vous convient pas, modifiez-le, par exemple, ajoutez une condition ou un bloc try..catch - et prenez le contrôle de l'exécution de l'opération.
Débordement de pile
Si l'on en croit les auteurs des paroles de la chanson Baby One More Time (c'est Britney Spears, oui), alors le mot hit dans ce contexte signifie le désir de la chanteuse d'être rappelée (voici une explication du contexte même de la chanson - note du traducteur). Il se pourrait bien que cette volonté conduise à une augmentation du nombre d’appels dans la vie réelle. Mais en programmation, il s'agit d'une récursion qui peut provoquer une erreur si la pile d'appels déborde.
Les erreurs ressemblent à ceci :
Erreur : Espace de pile insuffisant (Edge)
InternalError : trop de récursivité (Firefox)
RangeError : taille maximale de la pile d'appels dépassée (Chrome)
Un débordement de pile se produit si le développeur ne prend pas en compte le cas de base dans la récursion ou si le code ne répond pas au cas prévu.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness++
return oneMoreTime(stillBelieve, loneliness)
}Dans ce cas, stillBelieve ne peut jamais être faux, donc oneMoreTime sera appelé à chaque fois, mais la fonction ne se terminera jamais.
Si vous commencez à compter sur deux amis, cela réduira la solitude et vous n’aurez plus à attendre un appel.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness--
stillBelieve = false
return oneMoreTime(stillBelieve, loneliness)
}Un exemple est le cas avec des boucles infinies, lorsque le système ne génère pas de message d'erreur, mais que la page sur laquelle le code JavaScript est exécuté se fige simplement. Cela se produit si la boucle while n'a pas de condition de fin.
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
}Vous pouvez résoudre le problème de la manière suivante :
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
worldEnded = true
}Débogage de boucles et de récursions infinies
Si vous rencontrez un problème de boucle infinie, vous devez fermer l'onglet dans Chrome ou Edge et fermer la fenêtre du navigateur dans Firefox. Après cela, vous devez analyser soigneusement le code. Si vous ne trouvez pas le problème, cela vaut la peine d'ajouter une commande de débogueur à votre boucle ou fonction et de vérifier les valeurs des variables. Si le résultat ne correspond pas à ce qui était attendu, alors on le remplace, cela peut se faire facilement.
Dans l'exemple ci-dessus, le débogueur doit être ajouté comme première ligne de la fonction ou de la boucle. Ensuite, vous devez ouvrir l'onglet de débogage dans Chrome, en analysant les variables concernées. En utilisant le bouton suivant, vous pouvez suivre leurs modifications à chaque itération. Tout cela est facile à faire et dans la plupart des cas, le problème est détecté.
Vous pouvez en savoir plus sur tout cela ici () et ici ().
Erreur de syntaxe
L'une des erreurs les plus courantes en JavaScript est SyntaxError. Les extensions de l'éditeur de texte vous aideront à les éviter. Par exemple, Bracket Pair Colorizer marque les parenthèses dans le code avec des couleurs différentes, et Prettier ou un outil d'analyse similaire permet de trouver rapidement les erreurs. La meilleure option pour réduire la probabilité d’une SyntaxError est une imbrication minimale.
Partagez dans les commentaires : que faites-vous pour éviter les erreurs ou les détecter et les éliminer rapidement ?
Skillbox vous recommande :
- Cours pratique de deux ans .
- Cours en ligne .
- Cours pratique de l'année .
Source: habr.com