Best practice JavaScript
Evita le variabili globali, evita new
, evita ==
, evitaeval()
Evita le variabili globali
Ridurre al minimo l'uso di variabili globali.
Ciò include tutti i tipi di dati, oggetti e funzioni.
Le variabili e le funzioni globali possono essere sovrascritte da altri script.
Usa invece le variabili locali e impara come usare le chiusure .
Dichiara sempre variabili locali
Tutte le variabili utilizzate in una funzione devono essere dichiarate come variabili locali .
Le variabili locali devono essere dichiarate con la var
parola chiave o la let
parola chiave, o la const
parola chiave, altrimenti diventeranno variabili globali.
La modalità rigorosa non consente variabili non dichiarate.
Dichiarazioni in cima
È una buona pratica di codifica mettere tutte le dichiarazioni all'inizio di ogni script o funzione.
Questo sarà:
- Dai un codice più pulito
- Fornire un unico posto per cercare le variabili locali
- Semplifica l'eliminazione di variabili globali (implicite) indesiderate
- Ridurre la possibilità di nuove dichiarazioni indesiderate
// 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;
Questo vale anche per le variabili di ciclo:
for (let i = 0; i < 5; i++)
{
Inizializza variabili
È una buona pratica di codifica inizializzare le variabili quando le dichiarate.
Questo sarà:
- Dai un codice più pulito
- Fornire un unico posto per inizializzare le variabili
- Evita valori indefiniti
// Declare and initiate at the beginning
let firstName = "",
let lastName = "",
let price = 0,
let discount = 0,
let fullPrice = 0,
const myArray = [],
const myObject = {};
L'inizializzazione delle variabili fornisce un'idea dell'uso previsto (e del tipo di dati previsto).
Dichiara oggetti con cost
La dichiarazione di oggetti con const impedirà qualsiasi modifica accidentale del tipo:
Esempio
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
Dichiara gli array con const
La dichiarazione di array con const impedirà qualsiasi modifica accidentale del tipo:
Esempio
let cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Changes array to number
const cars = ["Saab", "Volvo", "BMW"];
cars = 3; // Not possible
Non utilizzare il nuovo Object()
- Utilizzare
""
invece dinew String()
- Utilizzare
0
invece dinew Number()
- Utilizzare
false
invece dinew Boolean()
- Utilizzare
{}
invece dinew Object()
- Utilizzare
[]
invece dinew Array()
- Utilizzare
/()/
invece dinew RegExp()
- Utilizzare
function (){}
invece dinew Function()
Esempio
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
Attenzione alle conversioni di tipo automatiche
JavaScript è digitato liberamente.
Una variabile può contenere tutti i tipi di dati.
Una variabile può cambiare il suo tipo di dati:
Esempio
let x = "Hello"; // typeof x is a string
x = 5; // changes typeof x to a number
Fai attenzione che i numeri possono essere accidentalmente convertiti in stringhe o NaN
(non un numero).
Quando si eseguono operazioni matematiche, JavaScript può convertire i numeri in stringhe:
Esempio
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
Sottrarre una stringa da una stringa, non genera un errore ma restituisce NaN
(non un numero):
Esempio
"Hello" - "Dolly" // returns NaN
Usa === Confronto
L' ==
operatore di confronto converte sempre (in tipi corrispondenti) prima del confronto.
L' ===
operatore forza il confronto di valori e tipo:
Esempio
0 == ""; // true
1 == "1"; // true
1 == true; // true
0 === ""; // false
1 === "1"; // false
1 === true;
// false
Usa parametri predefiniti
Se una funzione viene chiamata con un argomento mancante, il valore dell'argomento mancante viene impostato su
undefined
.
Valori non definiti possono violare il tuo codice. È buona abitudine assegnare valori predefiniti agli argomenti.
Esempio
function myFunction(x, y) {
if (y === undefined) {
y = 0;
}
}
ECMAScript 2015 consente parametri predefiniti nella definizione della funzione:
function (a=1, b=1) { /*function code*/ }
Maggiori informazioni sui parametri e gli argomenti delle funzioni in Function Parameters
Termina i tuoi interruttori con le impostazioni predefinite
Termina sempre le tue switch
affermazioni con un default
. Anche se pensi che non ce ne sia bisogno.
Esempio
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";
}
Evita numero, stringa e booleano come oggetti
Tratta sempre numeri, stringhe o valori booleani come valori primitivi. Non come oggetti.
Dichiarare questi tipi come oggetti, rallenta la velocità di esecuzione e produce spiacevoli effetti collaterali:
Esempio
let x = "John";
let y = new String("John");
(x === y) // is false because x is a string and y is an object.
O peggio ancora:
Esempio
let x = new String("John");
let y = new String("John");
(x == y) // is false because you cannot compare objects.
Evita di usare eval()
La eval()
funzione viene utilizzata per eseguire il testo come codice. In quasi tutti i casi, non dovrebbe essere necessario utilizzarlo.
Poiché consente l'esecuzione di codice arbitrario, rappresenta anche un problema di sicurezza.