Definizione della variabile JavaScript: virgole e punto e virgola

Quali sono le differenze e / o i vantaggi, se ce ne sono, dell’uso delle virgole quando si dichiara un gruppo di variabili anziché il punto e virgola.

Per esempio:

var foo = 'bar', bar = 'foo'; 

contro

 var foo = 'bar'; var bar = 'foo'; 

So che se si specifica la parola chiave var sulla prima variabile nel primo esempio persiste su tutte le variabili, in modo che entrambi producano lo stesso risultato finale per quanto riguarda l’ambito. È solo una preferenza personale, o c’è un vantaggio in termini di prestazioni nel farlo in ogni caso?

Nessun vantaggio in termini di prestazioni, solo una questione di scelta personale e stile.

La prima versione è solo più succinta.


Aggiornare:

In termini di quantità di dati che vanno oltre il filo, ovviamente meno è meglio, tuttavia avresti bisogno di un sacco di dichiarazioni var varate per vedere un impatto reale.

La minificazione è stata menzionata come qualcosa che il primo esempio aiuterà per una migliore minificazione, tuttavia, come sottolinea Daniel Vassallo nei commenti, un buon minificatore lo farà automaticamente per te comunque, quindi da questo punto di vista nessun impatto.

Dopo aver letto Crockford e altri, ho iniziato a concatenare le mie variabili esclusivamente con la virgola. Successivamente, mi sono davvero infastidito dal debugger di Chrome DevTools che non si fermava alle definizioni di variabili con la virgola. Per il debugger, le definizioni delle variabili concatenate con la virgola sono una singola istruzione, mentre più istruzioni var sono più istruzioni alle quali il debugger può fermarsi. Pertanto, sono tornato da:

 var a = doSomethingA, b = doSomethignB, c = doSomethingC; 

A:

 var a = doSomethingA; var b = doSomethignB; var c = doSomethingC; 

A questo punto, trovo la seconda variante molto più pulita, per non parlare del suo vantaggio nel risolvere il problema del debugger.

L’argomento “less code through the wire” non è persuasivo, in quanto ci sono minificatori.

Preferisco la notazione var-per-variable :

 var a = 2 var b = 3 

perché l’altra notazione comma-instead-of-another-var ha questi tre difetti:

1. Difficile da mantenere
Considera questo codice:

 var a = 1, b = mogrify(2), c = 3 

Ma hey, cosa fa il mogrify? Stampiamo b per scoprire:

 var a = 1, b = mogrify(2), console.log(b) c = 3 

rompe cose

2. Difficile da leggere

Il var nell’accattonaggio della linea comunica chiaramente che ci sarà una nuova variabile iniziata.

 var get_all_unicorn_promise = db.get_all_unicorns((unicorn) => { unicorn.legs.map((leg) => { leg.log('yes') }) }).sort(), c = 3 

Che diavolo sta facendo c = 3 giusto?

3. Non coerente

Considera questo:

 var a = 1, b = 2, c = 3 

Con var-per-variable ogni dichiarazione segue la stessa struttura. Con comma-instead-of-another-var la prima variabile viene dichiarata in modo diverso rispetto ad altri. Se decidi di spostare la prima variabile all’interno di un ciclo for, dovrai aggiungere var al centro delle dichiarazioni

Diversamente dalle preferenze, sembra che la maggior parte dei progetti importanti utilizzi la notazione var-per-variable

Sono d’accordo con gli altri rispondenti che si tratta principalmente di uno stile personale. Ma per portare un commento “autorevole” nella discussione, questo è ciò che Douglas Crockford dice sul sito web del popolare strumento JSLint :

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 applicato con l’opzione onevar .

Come altri hanno notato, è una preferenza di stile. JSLint potrebbe dirti di avere solo una var per funzione (se usi le “Parti buone”). Quindi se utilizzi JSLint per controllare il tuo codice (non una ctriggers idea, IMHO), finirai per usare il primo formato più del secondo.

D’altra parte, lo stesso autore, Douglas Crockford , dice di mettere ciascuna variabile nella propria linea nelle convenzioni di codifica . Quindi potresti voler deselezionare la casella di controllo “Tutte le var per funzione” in JSLint se la usi. 😉

Il primo salva pochi caratteri, quindi c’è un risparmio molto piccolo in termini di dimensione del file JS e quindi del consumo di larghezza di banda. L’unico momento in cui questo sarebbe diventato evidente sarebbe in casi estremi.

Se stai minimizzando il tuo javascript, c’è un vantaggio piuttosto grande:

 var one, two, three, four; 

diventa

 var a, b, c, d; 

Mentre

 var one; var two; var three; var four; 

diventa

 var a; var b; var c; var d; 

Ecco altre tre varianti di var , che possono accumularsi nel tempo.

Vedi la serie di articoli “A List Apart” “Better Javascript Minification” Parte 1 e Parte 2

Poiché non vedo alcun riferimento ad esso, ecco un link alla specifica ECMA-262, che è la specifica sottostante per JavaScript. La grammatica di quella pagina dice:

 12.2 Variable Statement Syntax VariableStatement : var VariableDeclarationList ; VariableDeclarationList : VariableDeclaration VariableDeclarationList , VariableDeclaration VariableDeclarationListNoIn : VariableDeclarationNoIn VariableDeclarationListNoIn , VariableDeclarationNoIn VariableDeclaration : Identifier Initialiseropt VariableDeclarationNoIn : Identifier InitialiserNoInopt Initialiser : = AssignmentExpression InitialiserNoIn : = AssignmentExpressionNoIn 

Ciò che puoi ricavare da ciò usando le virgole o meno non ha importanza. Ad ogni modo, finisce per essere analizzato come una VariableDeclaration e viene trattato esattamente allo stesso modo. Non ci dovrebbero essere differenze nel modo in cui il motore di script tratta le due dichiarazioni. Le uniche differenze sarebbero quelle già menzionate in altre risposte – risparmiando più spazio e differenze praticamente incommensurabili nella quantità di tempo necessario per applicare la grammatica per trovare tutte le VariableDeclarations quando lo script è compilato.

Preferisco la seconda versione (ognuno ha la sua var ). Penso che sia perché vengo da uno sfondo C ++. In C ++, puoi dichiarare variabili come fai nel tuo primo esempio, ma è disapprovato (può facilmente portare ad errori quando stai cercando di creare dei puntatori in quel modo).

Non penso ci sia alcuna differenza evidente, per quanto mi riguarda è solo una preferenza personale.

Odio avere più dichiarazioni var, quindi di solito faccio:

 var one ,two ,three ,four ; 

Essendo più corto e probabilmente più leggibile, non c’è nessun rumore da guardare.