Definición de variable de JavaScript: comas frente a punto y coma

¿Cuáles son las diferencias y / o ventajas, si las hay, de usar comas al declarar un grupo de variables en lugar de punto y coma?

Por ejemplo:

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

versus

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

Sé que si especifica la varpalabra clave en la primera variable en el primer ejemplo, persiste en todas las variables, por lo que ambas producen el mismo resultado final con respecto al alcance. ¿Es solo una preferencia personal, o hay un beneficio de rendimiento al hacerlo de cualquier manera?

Sin beneficio de rendimiento, solo una cuestión de elección personal y estilo.

La primera versión es más concisa.

Actualizar:

En términos de la cantidad de datos que se transmiten por cable, por supuesto, menos es mejor, sin embargo, necesitaría un montón de vardeclaraciones eliminadas para ver un impacto real.

La minificación se ha mencionado como algo con lo que el primer ejemplo ayudará para una mejor minificación, sin embargo, como señala Daniel Vassallo en los comentarios, un buen minificador lo hará automáticamente por ti de todos modos, por lo que en ese sentido no tiene ningún impacto.

Después de leer Crockford y otros, comencé a encadenar mis variables exclusivamente con comas. Luego, más tarde, realmente me molestó el depurador de Chrome DevTools que no se detenía en las definiciones de variables con comas. Para el depurador, las definiciones de variables encadenadas con comas son una sola declaración, mientras que varias declaraciones var son declaraciones múltiples en las que el depurador puede detenerse. Por lo tanto, cambié de:

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

A:

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

Por ahora, encuentro la segunda variante mucho más limpia, sin mencionar su ventaja de resolver el problema del depurador.

El argumento de "menos código a través del cable" no es persuasivo, ya que existen minificadores.

Prefiero la var-per-variablenotación:

var a = 2
var b = 3

porque la otra comma-instead-of-another-varnotación tiene estas tres deficiencias:

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

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

Pero bueno, ¿qué hace el mogrify? Imprimamos b para averiguarlo:

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

rompe cosas

2. Difícil de leer

La var al principio de la línea comunica claramente que habrá una nueva variable iniciada.

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

¿Qué diablos está c = 3haciendo ahí bien?

3. No consistente

Considera esto:

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

Con var-per-variablecada declaración sigue la misma estructura. Concomma-instead-of-another-var la primera variable se declara de forma diferente a las demás. Si decide, digamos, mover la primera variable dentro de un ciclo for, tendrá que agregar var al medio de las declaraciones

Aparte de la preferencia, parece que la mayoría de los proyectos notables utilizan la var-per-variablenotación

Estoy de acuerdo con los demás que respondieron en que se trata principalmente de una cuestión de estilo personal. Pero para traer una opinión "autorizada" a la discusión, esto es lo que dice Douglas Crockford en el sitio web de la popular herramienta JSLint :

Pero debido a que JavaScript no tiene alcance de bloque, es más prudente declarar todas las variables de una función en la parte superior de la función. Se recomienda que se utilice una sola instrucción var por función. Esto se puede hacer cumplir con la onevaropción.

Como han señalado otros, es una preferencia de estilo. JSLint podría decirle que solo tenga unovar por función (si usa las "Partes buenas"). Por lo tanto, si usa JSLint para verificar su código (no es una mala idea, en mi humilde opinión), terminará usando el primer formato más que el segundo.

Por otro lado, el mismo autor, Douglas Crockford , dice poner cada variable en su propia línea en sus convenciones de codificación . Por lo tanto, es posible que desee desmarcar la varcasilla de verificación "Todos uno por función" en JSLint si la usa. ;-)

No creo que haya ninguna diferencia notable, en lo que a mí respecta, es solo una preferencia personal.

Odio tener varias declaraciones de var, así que normalmente lo hago:

var 
   one
  ,two
  ,three
  ,four
;

Como es más corto y posiblemente más legible, no hay varruido para mirar.

Como no veo ninguna referencia a él, aquí hay un enlace a la especificación ECMA-262, que es la especificación subyacente de JavaScript. La gramática de esa página 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

Lo que puedes deducir de esto es usar comas o no, no importa. De cualquier manera, termina siendo analizado como un VariableDeclarationy se trata exactamente igual. No debería haber ninguna diferencia en cómo el motor de secuencia de comandos trata las dos declaraciones. Las únicas diferencias serían las que ya se mencionaron en otras respuestas: ahorrar más espacio y diferencias prácticamente inconmensurables en la cantidad de tiempo que se necesita para aplicar la gramática para encontrar todas las VariableDeclarationscuando se compila el script.

El primero guarda algunos caracteres, por lo que hay un ahorro muy pequeño en términos de JS y, por lo tanto, de consumo de ancho de banda. La única vez que esto se haría notorio sería en casos extremos.

Prefiero la segunda versión (cada una tiene la suya var). Creo que es porque vengo de C ++. En C ++, puede declarar variables como lo hace en su primer ejemplo, pero está mal visto (conduce fácilmente a errores cuando intenta crear punteros de esa manera).

Si está minimizando su javascript, existe un beneficio bastante grande:

var one, two, three, four;

se convierte en

var a, b, c, d;

Donde como

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

se convierte en

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

Son tres instancias adicionales de var, que pueden acumularse con el tiempo.

Consulte la serie de artículos "Una lista aparte" "Mejor minificación de JavaScript" Parte 1 y Parte 2