Parfois, écrire du code JavaScript est difficile, et parfois c'est tout simplement effrayant, ce qui est familier à de nombreux développeurs. Dans le processus, des erreurs surviennent inévitablement et certaines d'entre elles sont souvent répétées. L'article, conçu pour les développeurs novices, parle de ces erreurs et comment les résoudre. Pour plus de clarté, les noms des fonctions, propriétés et objets sont tirés d'une
chanson populaire . Tout cela permet de se rappeler rapidement comment corriger les erreurs courantes.
Nous vous rappelons: pour tous les lecteurs de «Habr» - une remise de 10 000 roubles lors de l'inscription à un cours Skillbox en utilisant le code promo «Habr».
Skillbox recommande: Cours pratique "Mobile Developer PRO" .
TypeError: propriété non 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 génère une erreur TypeError non capturée: impossible de lire la propriété «lucky» d'une erreur non définie. Le problème est que l'objet fille n'a pas de propriété nommée, bien qu'il existe une propriété de nom. Et puisque la propriété girl.named n'est pas définie, il est impossible d'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.
En savoir plus sur les propriétés
ici .
Méthodes pour corriger les erreurs TypeError
Des erreurs TypeError se produisent lorsqu'un programmeur tente d'effectuer des actions sur des données qui ne correspondent pas à un type particulier. Par exemple, utilisez .bold (), demandez une propriété non définie ou appelez une fonction qui n'est pas vraiment une fonction.
Donc, si vous essayez d'appeler girl (), une erreur Uncaught TypeError apparaîtra: yourVariable.bold n'est pas une fonction et girl n'est pas une fonction, car en fait l'objet est appelé, pas la fonction.
Afin d'éliminer les erreurs, vous devez étudier les variables. Alors qu'est-ce qu'une fille? Et qu'est-ce que girl.named? Vous pouvez savoir si vous analysez le code, affichez les variables à l'aide de console.log avec, la commande de débogage ou en appelant le nom de la variable dans la console. Vous devez vous assurer qu'il est possible de fonctionner avec le type de données contenu dans la variable. S'il ne rentre pas, changez-le, par exemple, ajoutez une condition ou essayez le bloc catch..catch et contrôlez l'opération.
Débordement de pile
Si vous croyez les auteurs des paroles de la chanson Baby One More Time (c'est Britney Spears, hein), alors le mot frappé dans ce contexte signifie le désir du chanteur d'être rappelé (voici une explication du contexte de la chanson, environ Traducteur). Il se pourrait bien que ce désir entraîne une augmentation du nombre d'appels dans la vie réelle. Mais en programmation, c'est une récursivité qui peut provoquer une erreur si la pile d'appels déborde.
Les erreurs sont les suivantes:
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 n'a pas pris en compte le cas de base dans la récursivité, ou si le code ne répond pas au cas fourni.
function oneMoreTime(stillBelieve=true, loneliness=0) { if (!stillBelieve && loneliness < 0) return loneliness++ return oneMoreTime(stillBelieve, loneliness) }
Dans ce cas, stillBelieve ne peut jamais être défini sur false, donc oneMoreTime sera appelé à chaque fois, mais la fonction ne se terminera jamais.
Si vous commencez à espérer deux amis, cela réduira la solitude (solitude) et vous ne pouvez pas attendre l'appel.
function oneMoreTime(stillBelieve=true, loneliness=0) { if (!stillBelieve && loneliness < 0) return loneliness-- stillBelieve = false return oneMoreTime(stillBelieve, loneliness) }
Par exemple, il existe des cas avec des boucles infinies, lorsque le système ne donne pas de message d'erreur et que la page sur laquelle le code JavaScript est exécuté se bloque simplement. 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") }
Vous pouvez résoudre le problème comme suit:
let worldEnded = false while (worldEnded !== true) { console.log("Keep on dancin' till the world ends") worldEnded = true }
Déboguer des boucles et des récursions sans fin
Si vous avez un problème avec une boucle infinie, dans Chrome ou Edge, vous devez fermer l'onglet et dans Firefox, fermez la fenêtre du navigateur. Après cela, vous devez analyser soigneusement le code. Si vous ne trouvez pas le problème, vous devez ajouter la commande de débogage à la boucle ou à la fonction et vérifier la valeur des variables. Si le résultat n'est pas comme prévu, remplacez-le, cela peut être fait facilement.
Dans l'exemple ci-dessus, le débogueur doit être ajouté en tant que première ligne d'une fonction ou d'une boucle. Ensuite, vous devez ouvrir l'onglet de débogage dans Chrome en analysant les variables de portée. En utilisant le bouton suivant, vous pouvez suivre leur changement à chaque itération. Faire tout cela est simple, et dans la plupart des cas, le problème est.
Vous pouvez en savoir plus sur tout cela ici (
pour Chrome ) et ici (
pour Firefox ).
Erreur de syntaxe
SyntaxError est l'une des erreurs JavaScript les plus courantes. Évitez-les d'aider l'éditeur de texte d'extension. Ainsi, Bracket Pair Colorizer marque les parenthèses dans le code dans différentes couleurs, et Prettier ou un outil d'analyse similaire permet de trouver rapidement des erreurs. La meilleure option pour réduire la probabilité de SyntaxError est l'imbrication minimale.
Partagez les commentaires: que faites-vous pour éviter les erreurs ou les détecter et les éliminer rapidement?
Skillbox recommande: