Erreurs courantes en JavaScript
Ce chapitre signale quelques erreurs JavaScript courantes.
Utilisation accidentelle de l'opérateur d'affectation
Les programmes JavaScript peuvent générer des résultats inattendus si un programmeur utilise accidentellement un opérateur d'affectation ( =), au lieu d'un opérateur de comparaison ( ==) dans une instruction if.
Cette ifinstruction renvoie false(comme prévu) car x n'est pas égal à 10 :
let x = 0;
if (x == 10)
Cette ifinstruction renvoie true(peut-être pas comme prévu), car 10 est vrai :
let x = 0;
if (x = 10)
Cette ifinstruction renvoie false(peut-être pas comme prévu), car 0 est faux :
let x = 0;
if (x = 0)
Une affectation renvoie toujours la valeur de l'affectation.
S'attendre à une comparaison lâche
En comparaison régulière, le type de données n'a pas d'importance. Cette ifdéclaration renvoie vrai :
let x = 10;
let y = "10";
if (x == y)
En comparaison stricte, le type de données est important. Cette ifinstruction renvoie false :
let x = 10;
let y = "10";
if (x === y)
C'est une erreur courante d'oublier que switchles déclarations utilisent une comparaison stricte :
Cela case switchaffichera une alerte :
let x = 10;
switch(x) {
case 10: alert("Hello");
}
Cela case switchn'affichera pas d'alerte :
let x = 10;
switch(x) {
case "10": alert("Hello");
}
Addition et concaténation déroutantes
L'addition consiste à additionner des nombres .
La concaténation consiste à ajouter des chaînes .
En JavaScript, les deux opérations utilisent le même +opérateur.
Pour cette raison, l'ajout d'un nombre en tant que nombre produira un résultat différent de l'ajout d'un nombre en tant que chaîne :
let x = 10;
x = 10 + 5; //
Now x is 15
let y = 10;
y += "5";
// Now y is "105"
Lors de l'addition de deux variables, il peut être difficile d'anticiper le résultat :
let x = 10;
let y = 5;
let z = x + y; // Now z is 15
let x = 10;
let y = "5";
let z = x + y; // Now z is "105"
Flotteurs mal compris
Tous les nombres en JavaScript sont stockés sous forme de nombres à virgule flottante 64 bits (Floats).
Tous les langages de programmation, y compris JavaScript, ont des difficultés avec des valeurs à virgule flottante précises :
let x = 0.1;
let y = 0.2;
let z = x + y
// the result in z will not be 0.3
Pour résoudre le problème ci-dessus, il est utile de multiplier et de diviser :
Exemple
let z = (x * 10 + y * 10) / 10; // z will be 0.3
Casser une chaîne JavaScript
JavaScript vous permettra de diviser une déclaration en deux lignes :
Exemple 1
let x =
"Hello World!";
Mais casser une instruction au milieu d'une chaîne ne fonctionnera pas :
Exemple 2
let x = "Hello
World!";
Vous devez utiliser une "barre oblique inverse" si vous devez casser une instruction dans une chaîne :
Exemple 3
let x = "Hello \
World!";
Point-virgule mal placé
En raison d'un point-virgule mal placé, ce bloc de code s'exécutera quelle que soit la valeur de x :
if (x == 19);
{
// code block
}
Briser une déclaration de retour
C'est un comportement JavaScript par défaut pour fermer automatiquement une instruction à la fin d'une ligne.
Pour cette raison, ces deux exemples renverront le même résultat :
Exemple 1
function myFunction(a) {
let power = 10
return a * power
}
Exemple 2
function myFunction(a) {
let power = 10;
return a * power;
}
JavaScript vous permettra également de diviser une déclaration en deux lignes.
Pour cette raison, l'exemple 3 renverra également le même résultat :
Exemple 3
function myFunction(a) {
let
power = 10;
return a * power;
}
Mais que se passera-t-il si vous cassez l'instruction return en deux lignes comme ceci :
Exemple 4
function myFunction(a) {
let
power = 10;
return
a * power;
}
La fonction retournera undefined!
Pourquoi? Parce que JavaScript pensait que vous vouliez dire :
Exemple 5
function myFunction(a) {
let
power = 10;
return;
a * power;
}
Explication
Si une déclaration est incomplète comme :
let
JavaScript essaiera de compléter l'instruction en lisant la ligne suivante :
power = 10;
Mais puisque cette déclaration est complète :
return
JavaScript le fermera automatiquement comme ceci :
return;
Cela se produit car les instructions de fermeture (de fin) avec un point-virgule sont facultatives en JavaScript.
JavaScript fermera l'instruction de retour à la fin de la ligne, car il s'agit d'une instruction complète.
Ne cassez jamais une instruction de retour.
Accéder aux tableaux avec des index nommés
De nombreux langages de programmation prennent en charge les tableaux avec des index nommés.
Les tableaux avec des index nommés sont appelés tableaux associatifs (ou hachages).
JavaScript ne prend pas en charge les tableaux avec des index nommés.
En JavaScript, les tableaux utilisent des index numérotés :
Exemple
const person = [];
person[0] = "John";
person[1] = "Doe";
person[2] = 46;
person.length;
// person.length will return 3
person[0];
// person[0] will return "John"
En JavaScript, les objets utilisent des index nommés .
Si vous utilisez un index nommé, lors de l'accès à un tableau, JavaScript redéfinit le tableau en un objet standard.
Après la redéfinition automatique, les méthodes et propriétés de tableau produiront des résultats indéfinis ou incorrects :
Exemple:
const person = [];
person["firstName"] = "John";
person["lastName"] = "Doe";
person["age"] = 46;
person.length; // person.length will
return 0
person[0];
// person[0] will return undefined
Terminer les définitions par une virgule
Les virgules de fin dans la définition d'objet et de tableau sont légales dans ECMAScript 5.
Exemple d'objet :
person = {firstName:"John", lastName:"Doe", age:46,}
Exemple de tableau :
points = [40, 100, 1, 5, 25, 10,];
AVERTISSEMENT !!
Internet Explorer 8 va planter.
JSON n'autorise pas les virgules de fin.
JSON :
person = {"firstName":"John", "lastName":"Doe", "age":46}
JSON :
points = [40, 100, 1, 5, 25, 10];
Non défini n'est pas nul
Les objets, variables, propriétés et méthodes JavaScript peuvent être undefined.
De plus, les objets JavaScript vides peuvent avoir la valeur null.
Cela peut rendre un peu difficile de tester si un objet est vide.
You can test if an object exists by testing if the type is undefined:
Example:
if (typeof myObj === "undefined")
But you cannot test if an object is null, because this will throw an error if the
object is undefined:
Incorrect:
if (myObj === null)
To solve this problem, you must test if an object is not null,
and not undefined.
But this can still throw an error:
Incorrect:
if (myObj !== null && typeof myObj
!== "undefined")
Because of this, you must test for not undefined before you can
test for not null:
Correct:
if (typeof myObj !== "undefined" && myObj !== null)