Best practice per dichiarare le variabili javascript vuote

Question

Esiste qualcosa come una best practice quando si tratta di dichiarare le variabili in javascript prima di assegnare loro un valore? A volte è necessario per ragioni di ambito, ma cosa succede se l'ambito non ha importanza?

// Declare first 
(function() { 
    var foo = 'bar', 
     a = 500, 
     b = 300, 
     c; 

    // Some things get done here with a and b before c can use them... 

    c = a * b;  

    // c is now ready to use... 
    doSomething(c); 
}()); 

// Declare when needed 
(function() { 
    var foo = 'bar', 
     a = 500, 
     b = 300; 

    // Some things get done here with a and b before c can use them... 

    var c = a * b; 

    // c is now ready to use... 
    doSomething(c); 
}()); 

E sto anche chiedendo che cosa è migliore pratica per qualcosa di simile con letterali oggetto:

// Add property with null assigned to it 
var myObj = { 
    foo: null, 

    doSomething: function() { 
     this.foo = 'bar'; 
    } 
}; 

// Property gets added when value is set 
var myObj = { 
    doSomething: function() { 
     this.foo = 'bar'; 
    } 
}; 

Answer 1

E 'soprattutto una questione di stile.

Poiché le dichiarazioni var sono automaticamente hoisted up nella parte superiore dell'ambito, è opportuno collocarle al di sopra del loro ambito in modo da poter leggere il codice più vicino a come l'interprete lo eseguirà.

La dichiarazione delle variabili nella parte superiore del loro ambito è Crockford's recommendation. E ha senso perché chiarisce alcuni fraintendimenti comuni.

Ad esempio:

for (var i = 0; i < 3; i++) { 
    setTimeout(function() { 
     console.log(i); 
    }, 0); 
} 

Da var ha portata funzione, tutte le iterazioni (e funzioni all'interno di essi) si riferiscono alla stessa i. Poiché tutte e tre le funzioni temporizzate verranno eseguite al termine del ciclo, lo snippet sopra registra tre volte 3.

Ora per quelli con esperienza di scoping a blocchi, il comportamento di cui sopra non è molto chiaro. Riscrivere il frammento:

var i; 
for (i = 0; i < 3; i++) { 
    // ... 
} 

Ora, i viene dichiarata nello scope globale, esattamente come il frammento di precedente. Tuttavia, questo è molto più chiaro su questo.

---

altro errore:

(function() { 
    if (true) { 
     var foo = 1; 
    } else { 
     var foo = 1; 
    } 
}()); 

Ancora, nel blocco con ambito languages¹ quanto sopra è perfettamente valido. Tuttavia, come var dichiarazioni vengono tirati all'inizio della portata funzione corrente in fase di analisi, quanto sopra è equivalente a:

(function() { 
    var foo; 
    var foo; 
    if (true) { 
     foo = 1; 
    } else { 
     foo = 1; 
    } 
}()); 

La variabile viene dichiarata due volte. La maggior parte dei browser ignorerà la seconda dichiarazione e il codice "funzionerà", ma gli strumenti di analisi del codice statico come JSHint ti urleranno.

È possibile riscrivere con una sola dichiarazione ed è perfettamente valido:

(function() { 
    if (true) { 
     var foo = 1; 
    } else { 
     foo = 1; 
    } 
}()); 

Ma codificatori OCD-like come me lo troverete piuttosto brutto. Quindi, ancora una volta, dichiarando in cima allo scopo:

Sembra molto più ordinato.

---

Ancora una volta, è principalmente una questione di stile. Personalmente, se ho una funzione gigante, odio scorrere fino in fondo solo per verificare se una variabile è già stata dichiarata e aggiungerla alla lista.In tal caso, potrei semplicemente aggiungere un paio di dichiarazioni var nel mezzo della funzione (contro la raccomandazione di Crockford) che personalmente trovo più facile da leggere e mantenere.

Poiché è una questione di stile, assicurati di mantenere il tuo codice il più gestibile e conciso possibile.

---

In altra faccia della medaglia, devo ammettere che, personalmente, ho iniziato e per lo più usato var dichiarazioni quando la variabile viene utilizzata in primo luogo. Questo è un aspetto della lingua e puoi usarlo in questo modo senza problemi.

Ma devo anche ammettere che, se avessi seguito le raccomandazioni di Crockford dall'inizio, avrei avuto molti mal di testa (come con le idee sbagliate mostrate sopra) e avrei afferrato l'aspetto dell'ambito delle funzioni di JavaScript molto più velocemente.

---

_{¹ noti che JS 1,7 variabili di blocco con ambito introdotti attraverso let, ma non è ancora ampiamente supportato.}