Perché single var è buono in javascript?

Question

Qualcuno può dirmi perché utilizzare una dichiarazione var per più variabili e dichiarare ogni variabile su una newline considera un buon comportamento di programmazione?

// bad 
var items = getItems(); 
var goSportsTeam = true; 
var dragonball = 'z'; 

// good 
var items = getItems(), 
    goSportsTeam = true, 
    dragonball = 'z'; 

Answer 1

Non è considerato "buono" o "cattivo". È una questione di preferenza.

Il ragazzo che ha creato lo strumento di qualità del codice JSLint, piace a Douglas Crockford.

Un "vantaggio" che potrebbe avere è che evita la possibilità di variable hoisting. In JavaScript tutte le dichiarazioni var si spostano automaticamente in cima al loro ambito.

Ecco il motivo per cui Crockford pensa che la seconda opzione è migliore:

In linguaggi con ambito blocco, di solito è consigliabile che le variabili essere dichiarate presso il sito del primo utilizzo. Ma poiché JavaScript non ha scope di blocco, è più saggio dichiarare tutte le variabili di una funzione nella parte superiore della funzione. Si consiglia di utilizzare una singola istruzione var per ogni funzione. Questo può essere rifiutato con l'opzione vars.

Answer 2

È una preferenza, non direi buona o cattiva. Sì, JSLint si lamenta, non mi piace molto come si lamenta delle variabili del ciclo for anche inline. Il motivo per cui è stato inserito in JSLint è stato quello di prevenire possibili confusioni di sollevamento.

Inoltre, in alcuni casi la dichiarazione di tutte le variabili nella parte superiore porterà a un file leggermente più piccolo. Si consideri il seguente:

var a = 10; 
a++; 
var b = 20; 

Dopo Google Chiusura in esecuzione su di esso

var a=10;a++;var b=20; 

In contrapposizione a questo se tiriamo b 's dichiarazione alla cima.

var a=10,b;a++;b=20; 

Answer 3

Il principale vantaggio (a parte la preferenza stile, credo) è che vi impedirà di scrivere codice che soffre di involontarie conseguenze di sollevamento variabile.

Prendete questo esempio:

var foo = function(){alert('foo');} 
function bar(){ 
    foo(); 
    var foo = function(){alert('foobar')}; 
    foo(); 
} 
bar(); 

Con la lettura di questo codice, l'intento di bar sembra essere la seguente:

1. Chiamare la funzione di foo esterno per avvisare la stringa 'foo'.
2. Creare una variabile locale, foo.
3. Chiamare la funzione locale foo per avvisare la stringa 'foobar'.

In realtà, ciò che accade è questo:

1. La variabile locale foo viene issata all'inizio della funzione bar.
2. foo ora si riferisce effettivamente alla variabile locale anziché alla variabile esterna con lo stesso nome. Ma poiché il locale non è ancora stato assegnato, il suo valore non è definito. Quindi, quando provi a invocare foo, otterrai un errore TypeError.
3. Niente. Perché hai lanciato un errore. Questo è tutto. Il tuo codice si è rotto.

Answer 4

Gli argomenti per la preferenza di Crockfords sono stati ben fatti e sono validi. Sto solo cominciando a tornare al primo formato ora però, come io credo che per sviluppatori esperti che capiscono di sollevamento variabile e non sono suscettibili di cadere fallo ad esso, ci sono 2 vantaggi che mi viene in mente:

1. Quando nuove variabili vengono aggiunte all'elenco delle definizioni, la differenziazione è facilitata. Ciò significa che è probabile che si verifichi un minor numero di conflitti di merge (per quanto semplici possano essere risolti) e meno carico cognitivo durante l'analisi delle diff. Per ragioni analoghe sono stato anche convertito in virgola penzoloni, cosa che non mi sarei mai aspettato xD

2. Come identificato da @ldsenow, può rendere più semplice la ricerca di definizioni di variabili. Sarai sempre in grado di cercare var <name> e ottenere il risultato desiderato e nient'altro.