Meilleures pratiques JavaScript
Éviter les variables globales, éviter new, éviter ==, évitereval()
Évitez les variables globales
Minimisez l'utilisation des variables globales.
Cela inclut tous les types de données, objets et fonctions.
Les variables et fonctions globales peuvent être écrasées par d'autres scripts.
Utilisez plutôt des variables locales et apprenez à utiliser les fermetures .
Toujours déclarer les variables locales
Toutes les variables utilisées dans une fonction doivent être déclarées en tant que variables locales .
Les variables locales doivent être déclarées avec le var
mot clé ou le letmot clé, ou le constmot clé, sinon elles deviendront des variables globales.
Le mode strict n'autorise pas les variables non déclarées.
Déclarations en haut
C'est une bonne pratique de codage de placer toutes les déclarations en haut de chaque script ou fonction.
Cette volonté:
- Donner un code plus propre
- Fournir un emplacement unique pour rechercher les variables locales
- Faciliter l'évitement des variables globales indésirables (implicites)
- Réduisez la possibilité de redéclarations non désirées
// Declare at the beginning
let firstName, lastName, price, discount, fullPrice;
// Use later
firstName = "John";
lastName = "Doe";
price = 19.90;
discount = 0.10;
fullPrice = price - discount;
Cela vaut également pour les variables de boucle :
for (let i = 0; i < 5; i++)
{
Initialiser les variables
C'est une bonne pratique de codage d'initialiser les variables lorsque vous les déclarez.
Cette volonté:
- Donner un code plus propre
- Fournir un emplacement unique pour initialiser les variables
- Éviter les valeurs indéfinies
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};
L'initialisation des variables donne une idée de l'utilisation prévue (et du type de données prévu).
Déclarer des objets avec const
Déclarer des objets avec const empêchera tout changement accidentel de type :
Exemple
let car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Changes object to string
const car = {type:"Fiat", model:"500", color:"white"};
car = "Fiat"; // Not possible
Déclarer des tableaux avec const
Déclarer des tableaux avec const empêchera tout changement accidentel de type :
Exemple
let cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Changes array to number
const cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Not possible
Ne pas utiliser new Object()
- Utiliser à la
""place denew String() - Utiliser à la
0place denew Number() - Utiliser à la
falseplace denew Boolean() - Utiliser à la
{}place denew Object() - Utiliser à la
[]place denew Array() - Utiliser à la
/()/place denew RegExp() - Utiliser à la
function (){}place denew Function()
Exemple
let x1 = ""; // new primitive string
let x2 = 0; // new primitive number
let x3 = false; // new primitive boolean
const x4 = {}; // new object
const x5 = []; // new array object
const x6 = /()/; // new regexp object
const x7 = function(){}; // new function object
Méfiez-vous des conversions de type automatiques
JavaScript est faiblement typé.
Une variable peut contenir tous les types de données.
Une variable peut changer son type de données :
Exemple
let x = "Hello"; // typeof x is a string
x = 5; // changes typeof x to a number
Attention, les nombres peuvent être accidentellement convertis en chaînes ou NaN(Pas un nombre).
Lors d'opérations mathématiques, JavaScript peut convertir des nombres en chaînes :
Exemple
let x = 5 + 7; // x.valueOf() is 12, typeof x is a number
let x = 5 + "7"; // x.valueOf() is 57, typeof x is a string
let x = "5" + 7; // x.valueOf() is 57, typeof x is a string
let x = 5 - 7; // x.valueOf() is -2, typeof x is a number
let x = 5 - "7"; // x.valueOf() is -2, typeof x is a number
let x = "5" - 7; // x.valueOf() is -2, typeof x is a number
let x = 5 - "x"; // x.valueOf() is NaN, typeof x is a number
La soustraction d'une chaîne à une chaîne ne génère pas d'erreur mais renvoie NaN(Pas un nombre) :
Exemple
"Hello" - "Dolly" // returns NaN
Utiliser === Comparaison
L' ==opérateur de comparaison convertit toujours (en types correspondants) avant la comparaison.
L' ===opérateur force la comparaison des valeurs et du type :
Exemple
0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true;
// false
Utiliser les paramètres par défaut
Si une fonction est appelée avec un argument manquant, la valeur de l'argument manquant est définie sur
undefined.
Les valeurs non définies peuvent casser votre code. C'est une bonne habitude d'assigner des valeurs par défaut aux arguments.
Exemple
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
ECMAScript 2015 autorise les paramètres par défaut dans la définition de la fonction :
function (a=1, b=1) { /*function code*/ }
En savoir plus sur les paramètres de fonction et les arguments sur Paramètres de fonction
Terminez vos commutateurs avec les valeurs par défaut
Terminez toujours vos switchdéclarations par un default. Même si vous pensez que cela n'est pas nécessaire.
Exemple
switch (new Date().getDay()) {
case 0:
day = "Sunday";
break;
case 1:
day = "Monday";
break;
case 2:
day = "Tuesday";
break;
case 3:
day = "Wednesday";
break;
case 4:
day = "Thursday";
break;
case 5:
day = "Friday";
break;
case 6:
day = "Saturday";
break;
default:
day =
"Unknown";
}
Évitez les nombres, les chaînes et les booléens en tant qu'objets
Traitez toujours les nombres, les chaînes ou les booléens comme des valeurs primitives. Pas comme des objets.
Déclarer ces types en tant qu'objets ralentit la vitesse d'exécution et produit des effets secondaires désagréables :
Exemple
let x = "John";
let y = new String("John");
(x === y) // is false because x is a string and y is an object.
Ou pire encore :
Exemple
let x = new String("John");
let y = new String("John");
(x == y) // is false because you cannot compare objects.
Évitez d'utiliser eval()
La eval()fonction est utilisée pour exécuter du texte en tant que code. Dans presque tous les cas, il ne devrait pas être nécessaire de l'utiliser.
Parce qu'il permet l'exécution de code arbitraire, il représente également un problème de sécurité.