Definição de variável JavaScript: vírgulas vs. ponto e vírgula

Quais são as diferenças e / ou vantagens, se houver, de usar vírgulas ao declarar um grupo de variáveis ​​em vez de ponto e vírgula.

Por exemplo:

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

versus

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

Eu sei que se você especificar a varpalavra-chave na primeira variável no primeiro exemplo, ela persiste em todas as variáveis, portanto, ambas produzem o mesmo resultado final em relação ao escopo. É apenas preferência pessoal ou há um benefício de desempenho em fazer isso de qualquer maneira?

Nenhum benefício de desempenho, apenas uma questão de escolha pessoal e estilo.

A primeira versão é apenas mais sucinta.

Atualizar:

Em termos de quantidade de dados transmitidos, é claro que menos é melhor; no entanto, você precisaria de muitas vardeclarações removidas para ver um impacto real.

A minimização foi mencionada como algo que o primeiro exemplo ajudará para uma melhor minimização, no entanto, como Daniel Vassallo aponta nos comentários, um bom minificador fará isso automaticamente para você de qualquer maneira, portanto, a esse respeito, não haverá nenhum impacto.

Depois de ler Crockford e outros, comecei a encadear minhas variáveis ​​exclusivamente com vírgulas. Mais tarde, fiquei realmente irritado com o depurador Chrome DevTools, que não parava nas definições de variáveis ​​com vírgulas. Para o depurador, as definições de variáveis ​​encadeadas com vírgulas são uma única instrução, enquanto várias instruções var são várias instruções nas quais o depurador pode parar. Portanto, voltei de:

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

Para:

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

Até agora, acho a segunda variante muito mais limpa, sem mencionar sua vantagem de resolver o problema do depurador.

O argumento "menos código através do fio" não é convincente, pois existem minificadores.

Eu prefiro a var-per-variablenotação:

var a = 2
var b = 3

porque a outra comma-instead-of-another-varnotação tem estas três deficiências:

1. Difícil de manter
Considere este código:

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

Mas ei, o que o mogrify faz? Vamos imprimir b para descobrir:

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

quebra coisas

2. Difícil de ler

A var no início da linha comunica claramente que haverá uma nova variável iniciada.

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

O que diabos está c = 3fazendo aí certo?

3. Não consistente

Considere isto:

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

A var-per-variablecada declaração segue a mesma estrutura. Com comma-instead-of-another-vara primeira variável é declarada de maneira diferente das outras. Se você decidir, digamos, mover a primeira variável dentro de um ciclo for, você terá que adicionar var no meio das declarações

Além da preferência, parece que a maioria dos projetos notáveis ​​usa a var-per-variablenotação

Concordo com os outros respondentes que se trata principalmente de uma questão de estilo pessoal. Mas para trazer uma opinião "autorizada" para a discussão, isso é o que Douglas Crockford diz no site da popular ferramenta JSLint :

Mas, como o JavaScript não tem escopo de bloco, é mais inteligente declarar todas as variáveis ​​de uma função no topo da função. Recomenda-se que uma única instrução var seja usada por função. Isso pode ser aplicado com a onevaropção.

Como outros notaram, é uma preferência de estilo. O JSLint pode dizer para você ter apenas um varpor função (se você usar as "Partes boas"). Portanto, se estiver usando JSLint para verificar seu código (não é uma má idéia, IMHO), você acabará usando o primeiro formato mais do que o último.

Por outro lado, o mesmo autor, Douglas Crockford , diz para colocar cada variável em sua própria linha em suas convenções de codificação . Portanto, você pode querer desmarcar a varcaixa de seleção "Todos um por função" no JSLint se for usá-lo. ;-)

Não acho que haja qualquer diferença perceptível, no que me diz respeito é apenas preferência pessoal.

Eu odeio ter várias declarações var, então geralmente faço:

var 
   one
  ,two
  ,three
  ,four
;

Como é mais curto e indiscutivelmente mais legível, nenhum varruído para olhar.

Como não vejo nenhuma referência a ele, aqui está um link para a especificação ECMA-262, que é a especificação subjacente para JavaScript. A gramática dessa página diz:

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

O que você pode deduzir disso é usar vírgulas ou não, não importa. De qualquer forma, ele acaba sendo analisado como um VariableDeclaratione é tratado exatamente da mesma forma. Não deve haver diferença em como o mecanismo de script trata as duas declarações. As únicas diferenças seriam aquelas já mencionadas em outras respostas - economizando mais espaço e diferenças praticamente imensuráveis ​​na quantidade de tempo que leva para aplicar a gramática para encontrar todos os VariableDeclarationsquando o script é compilado.

O primeiro salva alguns caracteres - portanto, há uma economia muito pequena em termos do tamanho do arquivo JS e, portanto, do consumo de largura de banda. A única vez que isso se tornaria perceptível seria em casos extremos.

Eu prefiro a segunda versão (cada uma tem a sua var). Acho que é porque venho de uma formação C ++. Em C ++, você pode declarar variáveis ​​como no primeiro exemplo, mas é desaprovado (facilmente leva a erros quando você tenta criar ponteiros dessa forma).

Se você estiver minimizando seu javascript, há uma grande vantagem:

var one, two, three, four;

torna-se

var a, b, c, d;

Enquanto que

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

torna-se

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

São três instâncias adicionais de var, que podem aumentar com o tempo.

Consulte a série de artigos "A List Apart" "Better Javascript Minification" Parte 1 e Parte 2