Écrire du code JavaScript est parfois difficile, voire effrayant, ce que connaissent de nombreux développeurs. Au cours de leur travail, des erreurs surviennent inévitablement, et certaines se répètent fréquemment. Cet article, destiné aux développeurs débutants, aborde ces erreurs et explique comment 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 ne possède pas de propriété nommée, bien qu'il possède une propriété name. Et comme la propriété girl.named n'est pas définie, elle est inaccessible, car elle n'existe pas formellement. Mais si vous remplacez girl.named.lucky par girl.name, tout fonctionnera et le programme renverra Lucky.
Plus de détails sur les propriétés peuvent être trouvés .
Méthodes de résolution des erreurs de type
Les erreurs TypeError se produisent lorsqu'un programmeur tente d'effectuer une action sur des données dont le type n'est pas défini. Par exemple, utiliser .bold(), rechercher une propriété non définie ou appeler une fonction qui n'en est pas une.
Donc, si vous essayez d'appeler girl(), vous obtiendrez l'erreur Uncaught TypeError: yourVariable.bold is not a function and girl is not a function, car en fait un objet est appelé, pas une fonction.
Pour résoudre le problème, vous devez examiner les variables. Alors, qu'est-ce que girl ? Et qu'est-ce que girl.named ? Vous pouvez le découvrir en analysant le code, en affichant les variables avec console.log, la commande du débogueur ou en appelant la variable name dans la console. Vous devez vous assurer que vous pouvez manipuler le type de données contenu dans la variable. S'il ne convient pas, modifiez-le, par exemple en ajoutant 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 paroliers de la chanson Baby One More Time (c'est Britney Spears, oui), le mot « hit » dans ce contexte désigne le désir du chanteur d'être rappelé (voici une explication du contexte de la chanson, note du traducteur). Il est fort possible que ce désir entraîne une augmentation du nombre d'appels dans la réalité. Mais en programmation, il s'agit de récursivité, ce qui peut provoquer une erreur en cas de dépassement de la pile d'appels.
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 lorsque le développeur n'a pas pris en compte le cas de base dans la récursivité, ou lorsque 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 évalué à false, 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 pas à attendre un appel.
function oneMoreTime(stillBelieve=true, loneliness=0) {
if (!stillBelieve && loneliness < 0) return
loneliness--
stillBelieve = false
return oneMoreTime(stillBelieve, loneliness)
}Un exemple serait celui des boucles infinies, où le système n'affiche pas de message d'erreur, mais la page où le code JavaScript est exécuté se fige. Cela se produit si la boucle while n'a pas de condition de terminaison.
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
}Le problème peut être résolu comme suit :
let worldEnded = false
while (worldEnded !== true) {
console.log("Keep on dancin' till the world ends")
worldEnded = true
}Débogage des boucles infinies et des récursions
Si vous rencontrez un problème avec une boucle infinie, fermez l'onglet dans Chrome ou Edge, ainsi que la fenêtre du navigateur dans Firefox. Analysez ensuite attentivement le code. Si vous ne trouvez pas le problème, ajoutez la commande de débogage à la boucle ou à la fonction et vérifiez la valeur des variables. Si le résultat ne correspond pas à celui attendu, remplacez-le facilement.
Dans l'exemple ci-dessus, le débogueur doit être ajouté comme première ligne de la fonction ou de la boucle. Ensuite, ouvrez l'onglet « Débogage » dans Chrome et analysez les variables concernées. Le bouton « Suivant » vous permet de suivre leur évolution à chaque itération. C'est simple à faire et, dans la plupart des cas, le problème est identifié.
Vous pouvez en lire plus sur tout cela ici () et ici ().
Erreur de syntaxe
L'une des erreurs les plus courantes en JavaScript est SyntaxError. Les extensions d'éditeur de texte peuvent aider à les éviter. Par exemple, Bracket Pair Colorizer marque les crochets dans le code avec des couleurs différentes, et Prettier ou un outil d'analyse similaire permet de détecter rapidement les erreurs. La meilleure solution pour réduire le risque de SyntaxError est l'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
