10 Bogues JavaScript courants et comment les éviter - mannequins

Même les meilleurs programmeurs JavaScript font des erreurs. Parfois, ces erreurs empêchent votre programme de produire les résultats que vous souhaitiez, et parfois le programme ne fonctionne pas du tout. Voici dix erreurs courantes que les programmeurs JavaScript à tous les niveaux font souvent.

Confusion d'égalité

Est-ce que x est égal à y ? Est-ce que x est vrai? Les questions d'égalité sont centrales à JavaScript et peuvent sembler assez confuses. Ils tournent autour de trois zones en JavaScript: les instructions conditionnelles et les opérateurs (si, &&, et ainsi de suite), l'opérateur égal (==) et l'opérateur strict égal (===).

Pour compliquer encore plus le codage, l'opérateur d'affectation (=) regarde -suspicieusement comme ce que la plupart des gens appellent un signe égal. Ne soyez pas dupe!

Eviter les abus d'affectation

L'opérateur d'affectation affecte l'opérande à droite à l'opérande de gauche. Par exemple:

var a = 3;

Cette instruction donne à la nouvelle variable, appelée a, la valeur 3.

Un opérande est quelque chose dans un programme. Pensez-y comme similaire à un nom en langue, alors que les opérateurs (+, -, *, / et ainsi de suite) sont comme des verbes.

Les opérateurs d'affectation peuvent également avoir des expressions sur le côté droit, qui sont évaluées puis assignées à la variable sur la gauche.

Une erreur courante commise par les débutants est de confondre l'affectation pour la comparaison - par exemple:

if (a = 4) {…}

Ce code ne fonctionnera pas comme prévu si ce que vous attendiez est pour comparer la valeur de a au nombre 4.

Esquive les pièges égaux

L'opérateur égal (==) et son jumeau maléfique l'opérateur non égal (! =) Peut être assez flexible, mais aussi assez dangereux. Utilisez-le le moins possible, voire pas du tout. Voici pourquoi:

0 == '0'

Tout le monde qui a passé du temps à programmer sait qu'un nombre entre guillemets n'est pas vraiment un nombre. Mais l'opérateur == les considère comme identiques, car il rendra les deux valeurs du même type avant de les comparer. Cela peut conduire à toutes sortes de problèmes difficiles à détecter.

Si vous voulez comparer une chaîne avec un nombre et obtenir un résultat de la valeur true s'ils apparaissent identiques, il est beaucoup plus sûr de le faire explicitement comme suit:

parseInt (0) = == parseInt ("0")

Cette affirmation est également vraie, mais il n'y a pas de magie vaudou. Le strict égal (===) et le strict non égal (! ==) feront exactement ce que vous attendez.

0 === '0'

Les deux opérandes sont clairement différents et le résultat est faux.

Consoles incompatibles

À mesure qu'un programme devient plus compliqué, et particulièrement lorsque vous travaillez avec des objets JavaScript, les crochets commencent à s'accumuler. Voici un objet JavaScript avec des parenthèses incompatibles:

{"status": "OK", "results": [{"id": 12, "title": "Codage JavaScript pour les nuls", "auteur": "Chris Minnick et Eva Holland "," publication_date ":" "," summary_short ":" "," link ": {" type ":" review "," url ":" "," link_text ":" Lire le New York Times Review 

de codage JavaScript pour les nuls "}," awards ": [{" type ":" Prix Nobel "," url ":" ",}]}

Pouvez-vous voir les problèmes ici? Quand cela arrive, un bon éditeur de code peut être inestimable! Sublime Text possède une fonction qui vous montrera une parenthèse lorsque vous placez votre curseur à côté d'un crochet de début ou de fin.

Surligner les parenthèses correspondantes dans le texte sublime.

Guillemets non concordants

JavaScript vous permet d'utiliser des guillemets simples ou des guillemets doubles pour définir des chaînes. Cependant, JavaScript n'est pas du tout flexible avec la règle selon laquelle vous devez terminer votre chaîne avec le même type de devis que vous avez commencé. En outre, recherchez des guillemets et des apostrophes dans les chaînes qui sont les mêmes caractères que les guillemets entourant la chaîne! Par exemple:

var movieName = "Popeye '; // Erreur! var welcomeMessage = 'Merci,' + prénom + ', apprenons JavaScript! ' // Erreur!

Parenthèses manquantes

Cette erreur apparaît le plus souvent dans les instructions conditionnelles, en particulier celles dans lesquelles il existe plusieurs conditions. Considérons cet exemple:

if (x> y) && (y <1000) {…}

Ce que vous voulez faire ici, c'est vérifier que les deux conditions sont vraies. Cependant, il y a trois conditions au travail ici, et elles ont toutes besoin de parenthèses. Ce qui manque dans l'exemple précédent, ce sont les parenthèses autour de la grosse condition &&, qui dit que les deux autres conditions doivent être vraies afin de continuer avec le code entre les parenthèses.

Pour être correcte, cette déclaration devrait se lire comme suit:

if ((x> y) && (y <1000)) {…}

Le point virgule manquant

doit toujours se terminer par un point-virgule. Cependant, si vous mettez chaque instruction sur sa propre ligne et laissez les points-virgules, le code fonctionnera toujours comme si les points-virgules étaient présents. Même si le code s'exécute toujours, la suppression du point-virgule peut entraîner des problèmes lorsque vous réorganisez le code ou lorsque deux instructions se retrouvent sur la même ligne.

Le meilleur moyen d'éviter cette erreur est de toujours utiliser un point-virgule à la fin d'une instruction.

Erreurs de capitalisation

JavaScript est sensible à la casse. Cela signifie que les variables que vous créez doivent être capitalisées exactement de la même manière chaque fois que vous les utilisez. Cela signifie également que les fonctions doivent être correctement capitalisées pour fonctionner.

L'un des endroits les plus communs pour voir cette erreur se produire est avec la méthode getElementByld de l'objet Document.On pourrait penser qu'il serait orthographié getElementBylD parce que cela aurait plus de sens grammatical, mais ce n'est pas correct!

Référencer le code avant qu'il ne soit chargé

Le code JavaScript se charge normalement et s'exécute dans l'ordre dans lequel il apparaît dans un document. Cela peut créer des problèmes si vous faites référence au code HTML positionné plus tard dans le document à partir d'un script figurant dans la tête du document.

La référence au code HTML avant son chargement entraîne une erreur.

document. getElementById ("myDiv"). innerHTML = "Cette div est ma div"; Cette div est votre div.

Ce code entraînera une erreur car au moment de l'exécution du JavaScript, le navigateur ne connaît pas encore la div avec l'id = "myDiv" qui apparaît plus tard dans la page Web.

Pour éviter ce problème, vous avez plusieurs options:

• Placez votre JavaScript au bas de votre fichier HTML, juste avant

• Mettez votre code JavaScript dans une fonction. Vous pouvez ensuite appeler la fonction en utilisant un attribut d'événement onload dans la balise body de départ.

Le problème a été résolu ici en utilisant la deuxième méthode.

Attendez que le code HTML soit chargé avant d'exécuter le script.

function nomMyDiv () {document. getElementById ("myDiv"). innerHTML = "Cette div est ma div";} Cette div est votre div

Mauvais noms de variables

Une règle particulièrement difficile à suivre est l'interdiction d'utiliser des mots réservés comme noms de variables.

Fait intéressant, JavaScript a plus de 60 mots réservés et beaucoup d'autres que vous ne devriez pas utiliser comme noms de variables. Plutôt que de mémoriser tous les mots réservés, la meilleure façon d'éviter ces types d'erreurs de nommage est simplement d'arriver à un schéma de nommage plus descriptif qui est très peu susceptible de se croiser avec un mot réservé.

Par exemple, le mot nom est l'un des mots réservés de JavaScript. Si vous avez l'habitude d'être spécifique avec ce que vous nommez, vous nommerez des variables pour stocker des choses, telles que firstName, lastName, dogName, et nameOfTheWind; évitant ainsi totalement les conflits avec les mots réservés.

Erreurs d'étendue

JavaScript a une portée de fonction et une portée globale. Si vous déclarez une variable sans utiliser le mot-clé var, cette variable aura une portée globale et sera utilisable n'importe où dans votre programme. Les résultats peuvent être préjudiciables à votre programme. Afin d'éviter les erreurs de portée, assurez-vous de toujours utiliser le mot-clé var pour créer de nouvelles variables.

Paramètres manquants dans les appels de fonction

Chaque fois que vous créez une fonction, vous déclarez le nombre de paramètres à transmettre à cette fonction lorsqu'elle est appelée. L'appel du mauvais nombre de fonctions n'entraînera pas toujours une erreur dans JavaScript, mais il peut produire des résultats inattendus si le code de la fonction requiert des paramètres qui ne sont pas présents.

Assurez-vous de donner des noms descriptifs à vos paramètres lorsque vous créez une fonction et revérifiez chaque fois qu'une fonction est appelée afin de vous assurer que le bon nombre de paramètres est passé.

Erreurs de comptage: oublier que JavaScript compte de 0

Si vous comptez 10 dans un tableau JavaScript, vous aurez 11 éléments. Ne jamais oublier que le premier élément d'un tableau a un indice de 0.

Oublier que le nombre de JavaScript à partir de 0 peut conduire à des résultats inattendus.

var myArray = new Array (); myArray [10] = "Liste des 10 erreurs courantes"; myArray. longueur; // produit 11!