Oups, je l'ai encore fait : débogage des erreurs courantes en JavaScript

Parfois, écrire du code JavaScript peut être difficile, et cela fait peur à de nombreux développeurs. Au cours du processus de travail, il est inévitable que des erreurs surviennent, et certaines d'entre elles se répètent fréquemment. Cet article, destiné aux développeurs débutants, traite de ces erreurs et des moyens de les résoudre. Pour plus de clarté, les noms des fonctions, des propriétés et des objets sont tirés de chansons populaires. Tout cela aide à se souvenir rapidement de la manière de corriger les erreurs courantes.

Rappelons-le : pour tous les lecteurs de « Habr » — une réduction de 10 000 roubles lors de l'inscription à tout cours Skillbox avec le code promo « Habr ».

Skillbox recommande : Cours pratique « Développeur mobile 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 l'erreur Uncaught TypeError : Cannot read property ‘lucky’ of undefined. Le problème est que l'objet girl n'a pas de propriété named, bien qu'il ait une propriété name. Et comme la propriété girl.named n'est pas définie, il est impossible d'y accéder, car elle n'existe formellement pas. Mais si l'on remplace girl.named.lucky par girl.name, alors tout fonctionnera et le programme retournera Lucky.

Pour plus d'informations sur les propriétés, vous pouvez ici.

Méthodes de résolution des erreurs TypeError

Les erreurs TypeError apparaissent lorsque le programmeur essaie d'exécuter des actions sur des données qui ne correspondent pas à un type spécifique. Par exemple, cela peut se produire lors de l'utilisation de .bold(), de la demande d'une propriété undefined ou de l'appel d'une fonction qui n'est en réalité pas une fonction.

Ainsi, si vous essayez d'appeler girl (), l'erreur Uncaught TypeError : yourVariable.bold is not a function et girl is not a function apparaîtra, car un objet est appelé, pas une fonction.

Pour résoudre les erreurs, il est nécessaire d'examiner les variables. Alors, qu'est-ce que girl ? Et qu'est-ce que girl.named ? Vous pouvez le savoir en analysant le code, en affichant les variables à l'aide de console.log, avec la commande debugger ou en appelant le nom de la variable dans la console. Vous devez vous assurer que vous pouvez manipuler le type de données contenu dans la variable. Si ce n'est pas approprié, modifiez-le, par exemple, en ajoutant une condition ou un bloc try..catch - et gagnez le contrôle sur l'exécution de l'opération.

Débordement de pile

Si l'on en croit les auteurs de la chanson Baby One More Time (c'est Britney Spears, oui), alors le mot hit dans ce contexte signifie que la chanteuse souhaite recevoir un appel encore une fois (c'est une explication du contexte de la chanson, note du traducteur). Il est tout à fait possible que ce souhait entraîne une augmentation des appels dans la réalité. Mais en programmation, cela revient à de la récursivité, qui peut provoquer une erreur en cas de débordement de la pile d'appels.

Les erreurs apparaissent comme suit :

Erreur : espace de pile épuisé (Edge)
InternalError : trop de récursions (Firefox)
RangeError : taille maximale de la pile d'appels dépassée (Chrome)

Le débordement de la 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 fait pas appel 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 false, donc à chaque fois, on fera appel à oneMoreTime, mais l'exécution de la fonction ne se terminera jamais.

Cependant, si l'on commence à compter sur deux amis, cela réduira le loneliness (solitude), et l'appel pourra ne pas être attendu.

function oneMoreTime(stillBelieve=true, loneliness=0) {
    if (!stillBelieve && loneliness < 0) return
    loneliness--
    stillBelieve = false
    return oneMoreTime(stillBelieve, loneliness)
}

Un exemple est celui des boucles infinies, où le système ne renvoie pas de message d'erreur, et la page exécutant le code JavaScript se bloque simplement. Cela se produit si la boucle while n'a pas de condition d'arrêt.

let worldEnded = false
 
while (worldEnded !== true) {
  console.log("Keep on dancin' till the world ends")
}

On peut 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 des boucles infinies et des récursions

S'il y a un problème avec une boucle infinie, dans Chrome ou Edge, vous devez fermer l'onglet, et dans Firefox — la fenêtre du navigateur. Ensuite, il faut analyser soigneusement le code. Si le problème ne peut pas être trouvé, il est utile d'ajouter la commande debugger dans la boucle ou la fonction et de vérifier la valeur des variables. Si le résultat ne correspond pas à ce qui était attendu, alors on remplace, ce qui peut être facilement fait.

Dans l'exemple ci-dessus, il est recommandé d'ajouter le débogueur en première ligne d'une fonction ou d'une boucle. Ensuite, ouvrez l'onglet de débogage dans Chrome pour analyser les variables dans le scope. Grâce au bouton 'next', vous pouvez suivre leur changement à chaque itération. Tout cela est simple à réaliser et, dans la plupart des cas, le problème est localisé.

Vous pouvez lire plus en détail à ce sujet ici (pour Chrome) et ici (pour Firefox).

Erreur de syntaxe

L'une des erreurs les plus courantes en JavaScript est le SyntaxError. Pour les éviter, des extensions d'éditeur de texte peuvent être très utiles. Par exemple, Bracket Pair Colorizer colore les parenthèses dans le code avec différentes couleurs, et Prettier ou un outil d'analyse similaire facilitent la détection rapide des erreurs. Pour réduire au minimum la probabilité de SyntaxError, choisissez une imbriquation minimale.

Partagez dans les commentaires : que faites-vous pour éviter les erreurs ou les détecter et les corriger rapidement ?

Skillbox recommande :

• Cours pratique de deux ans "Je suis un développeur web PRO".
• Cours en ligne "Développeur C# depuis 0".
• Cours pratique d'un an «Développeur PHP de 0 à PRO».

Source : habr.com