Definizione di variabile JavaScript: virgole e punti 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 piuttosto che il punto e virgola.

Per esempio:

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

contro

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

So che se specifichi la varparola chiave sulla prima variabile nel primo esempio, persiste su tutte le variabili, quindi entrambe producono lo stesso risultato finale per quanto riguarda l'ambito. È solo una preferenza personale o c'è un vantaggio in termini di prestazioni nel farlo in entrambi i casi?

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 in transito, ovviamente meno è meglio, tuttavia avresti bisogno di molte vardichiarazioni rimosse 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 comunque per te, quindi sotto questo aspetto nessun impatto di sorta.

Dopo aver letto Crockford e altri, ho iniziato a concatenare le mie variabili esclusivamente con virgola. Successivamente, sono stato davvero infastidito dal debugger di Chrome DevTools che non si fermava alle definizioni delle variabili con una virgola. Per il debugger, le definizioni di variabili concatenate con 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;

Per:

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 di risolvere il problema del debugger.

L'argomento "meno codice attraverso il filo" non è persuasivo, in quanto esistono minificatori.

Preferisco la var-per-variablenotazione:

var a = 2
var b = 3

perché l'altra comma-instead-of-another-varnotazione 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 scoprirlo:

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

rompe cose

2. Difficile da leggere

Il var nell'accattonaggio della riga comunica chiaramente che verrà avviata una nuova variabile.

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

Che diavolo c = 3ci fa lì, giusto?

3. Non coerente

Considera questo:

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

Ad var-per-variableogni dichiarazione seguire la stessa struttura. Con comma-instead-of-another-varla prima variabile viene dichiarata in modo diverso dalle altre. Se decidi, ad esempio, di spostare la prima variabile all'interno di un ciclo for, dovrai aggiungere var al centro delle dichiarazioni

A parte la preferenza, sembra che la maggior parte dei progetti importanti utilizzi la var-per-variablenotazione

Concordo con gli altri rispondenti che si tratta principalmente di una questione di stile personale. Ma per portare un'opinione "autorevole" nella discussione, questo è ciò che dice Douglas Crockford sul sito web del popolare strumento JSLint :

Ma poiché JavaScript non ha un ambito di blocco, è più saggio dichiarare tutte le variabili di una funzione all'inizio della funzione. Si consiglia di utilizzare una singola istruzione var per funzione. Questo può essere applicato con l' onevaropzione.

Come altri hanno notato, è una preferenza di stile. JSLint potrebbe dirti di averne solo uno varper funzione (se usi le "Parti buone"). Quindi, se usi JSLint per controllare il tuo codice (non è una cattiva idea, IMHO), finirai per utilizzare il primo formato più del secondo.

D'altra parte, lo stesso autore, Douglas Crockford , dice di mettere ogni variabile nella propria riga nelle sue convenzioni di codifica . Quindi potresti voler deselezionare la casella di controllo "Tutti varper funzione" in JSLint se lo usi. ;-)

Non credo ci siano differenze evidenti, per quanto mi riguarda è solo una preferenza personale.

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

var 
   one
  ,two
  ,three
  ,four
;

Poiché è più breve e probabilmente più leggibile, nessun varrumore da guardare.

Dal momento che non vedo alcun riferimento ad esso, ecco un collegamento 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

Quello che puoi ricavare da questo è usare virgole o meno, non importa. Ad ogni modo, finisce per essere analizzato come a VariableDeclaratione viene trattato esattamente allo stesso modo. Non dovrebbe esserci alcuna differenza 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 necessaria per applicare la grammatica per trovare tutto VariableDeclarationsquando lo script viene compilato.

Il primo salva alcuni caratteri, quindi c'è un risparmio molto piccolo in termini di dimensione del file JS e quindi consumo di larghezza di banda. L'unica volta che questo sarebbe diventato evidente sarebbe in casi estremi.

Preferisco la seconda versione (ognuna 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 (porta facilmente a errori quando stai cercando di creare puntatori in questo modo).

Se stai minimizzando il tuo javascript, c'è un vantaggio abbastanza 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;

Sono altre tre istanze di var, che possono sommarsi nel tempo.

Vedere la serie di articoli "A List Apart" "Better Javascript Minification" Parte 1 e Parte 2