10 Suggerimenti, Trucchi e Best Practice in Javascript per Ottimizzare le tue App

Scrivere codice solitamente è fattibile in due modi: ottimizzato e non ottimizzato. Non sempre è facile, spesso per questione di tempo stanziato per il completamento di un lavoro, ma anche di progettazione nel caso in cui non siano fornite specifiche chiare o non sia ben definito come la logica dell'app dovrà svilupparsi, riuscire a scrivere del codice snello e che garantisca buone prestazioni alla web app o all'app per dispositivi mobili da realizzare.
Quello che sicuramente ci può far comodo in questi casi, ma in linea generale per poter scrivere meno righe di codice e garantire un po' di velocità di esecuzione in più (nella programmazione di giochi, ad esempio, la velocità e la fluidità sono un requisito fondamentale), sono una serie di suggerimenti, chiamiamoli pure trucchi anche se in realtà sono semplicemente buone pratiche, da applicare durante la stesura del nostro codice, ove può essere richiesto.

Premetto che questa lista di 10 punti non è esaustiva e sono ben consapevole che esistono molti altri di questi accorgimenti, tuttavia dove voglio focalizzarmi con questa breve raccolta sono quei casi che, quantomeno nella mia esperienza, si presentano più frequentemente e pertanto, in favore di un approccio che nonostante possa dare lo stesso risultato potrebbe appesantire alla lunga le prestazioni, porre attenzione al loro utilizzo permetterà di raggiungere una buona base di ottimizzazione.

Tutti gli esempi mostrati sono testati e funzionanti e riproducibili con risultato in console.

1 - Dichiarare le variabili con var
Purchè non sia prettamente necessario, è buona norma dichiarare le nuove variabili con var onde evitare che l'assegnazione di un valore a tale variabile venga interpretata a livello globale.
Esempio:

mia_prima_variabile = 1; // Variabile nuova dichiarata in modo non ottimizzato
var mia_seconda_variabile = 1 //Variabile nuova dichiarata in modo ottimizzato

2 - Convertire una variabile in boolean con l'operatore !!
Ci sono situazioni in cui è necessario sapere se una variabile esiste o se è valorizzata, per fare questo invece di verificarne la lunghezza, il tipo o utilizzare variabili di appoggio è possibile fare affidamento all'operatore !! (doppia negazione) che posto davanti ad una  variabile la convertirà automaticamente in boolean restituendo true se è valorizzata o false nel caso in cui sia: 0, null, "", undefined o NaN.
Esempio:

function Giocatore(nome, numero) {
    this.nome = nome;
    this.numero = numero;
    this.il_giocatore_esiste = !!numero;
}
var giocatore = new Giocatore('kobe bryant', 24);
console.log(giocatore.nome); // kobe bryant
console.log(giocatore.numero); // 24
console.log(giocatore.il_giocatore_esiste); // true

var giocatoreNonEsistente = new Giocatore('', 0);
console.log(giocatoreNonEsistente.nome);
console.log(giocatoreNonEsistente.numero); // 0
console.log(giocatoreNonEsistente.il_giocatore_esiste); // false

3 - Convertire una variabile in un numero direttamente con l'operatore +
Ovviamente funziona quando il valore di una stringa che si intende convertire in un numero è composto effettivamente da valori numerici, ad esempio '1234'. Se si tenta di convertire una stringa di caratteri alfanumerici, ad esempio  'abcd', il risultato sarà NaN (Not a Number).
E' interessante sapere che se tale operatore viene utilizzato con una data il risultato sarà il suo timestamp.
Esempio:

function convertiInNumero(str) {
    return +str;
}
console.log(convertiInNumero("1234")); // 1234
console.log(convertiInNumero("abcd")); // NaN
console.log(+new Date()) // 1462057847889

4 - Impostare il valore di default con l'operatore ||
Può capitare di dover inizializzare una variabile con un eventuale valore di default nel caso non gliene venisse assegnato uno effettivo o di dichiarare una variabile che però potrebbe già essere presente e valorizzata, come un array, in un altro punto del codice e nel caso specifico serve mantenere il valore corrente anzichè reinizializzarla (e perdere i valori correnti al suo interno).
Per queste situazioni è possibile utilizzare l'operatore || che verifica lo stato della variabile per agire di conseguenza alla sua valorizzazione o mantenimento del suo valore.
Esempio:

function Utente(nome, anni) {
    this.nome = nome || "Michele Pisani";
    this.anni = anni || 36;
}
var utente1 = new Utente();
console.log(utente1.nome); // Michele Pisani
console.log(utente1.anni); // 36

var utente2 = new Utente("Kobe Bryant", 38);
console.log(utente2.nome); // Kobe Bryant
console.log(utente2.anni); // 38

//Altro esempio di valorizzazione del contenuto gia' presente o inizializzazione di una variabile
var mioArray = mioArray || [];

5 - Passare direttamente la lunghezza dell'array in un ciclo
Nella creazione di un ciclo, per fretta o per test, capita di scrivere del codice simile al seguente:

var mioArray = [1,2,3,4,5,6,7,8,9];
for (var i = 0; i < mioArray.length; i++) {
    console.log(mioArray[i]);
}

Per quanto a tutti gli effetti non ci sia niente di sbagliato e lavorando con matrici piccole non se ne percepisca la necessità, quando la funzione elabora array più grandi il codice di cui sopra manifesterà una perdita di prestazioni in quanto ad ogni iterazione del ciclo verrà ricalcolata la dimensione dell'array. E' pertanto consigliato immagazzinare in una variabile la lunghezza dell'array, in modo che essa venga calcolata una sola volta, ed utilizzare tale variabile come riferimento per il numero di iterazioni che dovranno essere eseguite.
Esempio:

var mioArray = [1,2,3,4,5,6,7,8,9];
var mioArrayLen = mioArray.length; // immagazzino la lunghezza dell'array in una variabile
for (var i = 0; i < mioArrayLen; i++) {
    console.log(mioArray[i]);
}

 

6- Troncare un array, azzerarlo o recuperare i suoi ultimi elementi
E' possibile utilizzare la proprietà length sia per ridurre il numero di elementi di un array sia per, con lo stesso principio, azzerarlo.
Tramite invece la proprietà slice, impostando un valore negativo come parametro, è possibile recuperare l'ultimo o gli ultimi elementi di un array, in questo modo si possono evitare diversi passaggi per ottenere lo stesso risultato.
Esempio:

// Recuperare l'ultimo elemento di un array
var mioArray = [1,2,3,4,5,6,7,8,9,10];
console.log(mioArray.slice(-1)); // [10]
console.log(mioArray.slice(-2)); // [9, 10]

// Troncare un array
console.log(mioArray.length); // 10
mioArray.length = 5;
console.log(mioArray.length); // 5
console.log(mioArray); // [1, 2, 3, 4, 5]

// Azzerare un array
mioArray.length = 0;
console.log(mioArray.length); // 0
console.log(mioArray); // []

 

7 - Arrotondare un numero ad N cifre decimali
Per farlo basta semplicemente utilizzare la proprietà toFixed e passare come parametro il numero di cifre decimali che intendiamo lasciare.
Faccio notare che nell'esempio ho aggiunto l'operatore + (come mostrato al punto 3 di questo articolo) per convertire il risultato in un numero altrimenti il valore verrebbe interpretato come una stringa e ad una eventuale successiva operazione, ad esempio di somma, il risultato non sarà quello aspettato bensì una concatenazione.
Esempio:

var mioNumero = 15.67485738453;
mioNumero = +mioNumero.toFixed(4);  // 15.6748
console.log(mioNumero);

8 - Recuperare un elemento a caso da un array
Una situazione che spesso può far comodo (soprattutto in ambito Gaming ma non solo) e che può essere ottenuta semplicemente con una formula.
Esempio:

var mioArray = [15, 'michele' , 1 , 72 , 'margherita' , 'lupin' , 2354, , 'federica' , 3 , 435, 998, 'laura', 34, 'francesco'];
var  randomElemento = mioArray[Math.floor(Math.random() * mioArray.length)];
console.log(randomElemento);

9 - Rimuovere spazi all'inizio e alla fine di una stringa con la proprietà trim
Da qualche tempo a questa parte nel motore di Javascript è stata introdotta nativamente la proprietà trim, che funziona allo stesso modo come in linguaggi di programmazione quali ASP, PHP, ecc., e serve a rimuovere gli spazi superflui (e spesso fastidiosi a seconda delle operazioni da svolgere) che possono essere presenti all'inizio e alla fine di una stringa. Pertanto, a differenza di come qualcuno può essere abituato a fare prima dell'introduzione di tale proprietà ovvero con funzioni macchinose o meglio con una regex, conviene affidarsi direttamente alla proprietà trim.

Esempio:

var miaStringa = ' ciao, come stai? ';
console.log(miaStringa.trim());

10 - Usare l'operatore di uguaglianza === al posto di == ed i casi in cui un valore è sempre considerato false
L'operatore == svolge automaticamente, se la situazione lo richiede, una conversione del tipo di variabile per performarne il confronto. Con il === si confronta invece in maniera diretta sia il tipo che il valore delle variabili chiamate in causa, evitando quindi il passaggio in più.
Ci sono inoltre dei casi in cui il confronto è evitabile in quanto il valore è sempre false, questi casi sono: undefined, null, 0, false, NaN e '' (stringa vuota). Convertendo in boolean una variabile che contiene uno di questi valori (come abbiamo visto al punto 2 di questo articolo) il risultato sarà sempre false.

// == contro ===
console.log('10' == 10);     // is true
console.log('10' === 10);    // is false

// undefined, null, 0, false, NaN, '' corrispondono sempre a false
console.log(!!10) //true
console.log(!!undefined) // false
console.log(!!null) // false
console.log(!!0) // false
console.log(!!false) // false
console.log(!!NaN) // false
console.log(!!'') // false

Mettendo in pratica nei propri script questi piccoli accorgimenti i risultati saranno senz'altro più performanti, soprattutto nel campo delle app ibride dove i processori su cui queste andranno a girare ti saranno molto grati (e market ostici come quello della Apple avranno una scusa in meno per bloccare la pubblicazione dell'app).