Définition de variable JavaScript: virgules et points-virgules

Quelles sont les différences et / ou avantages, le cas échéant, d'utiliser des virgules lors de la déclaration d'un groupe de variables plutôt que des points-virgules.

Par exemple:

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

contre

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

Je sais que si vous spécifiez le varmot - clé sur la première variable dans le premier exemple, il persiste dans toutes les variables, de sorte qu'elles produisent toutes les deux le même résultat final en ce qui concerne la portée. Est-ce simplement une préférence personnelle ou y a-t-il un avantage en termes de performances à le faire dans un sens ou dans l'autre?

Aucun avantage en termes de performances, juste une question de choix personnel et de style.

La première version est juste plus succincte.

Mettre à jour:

En termes de quantité de données passant par le fil, bien sûr, moins est mieux, mais vous auriez besoin de beaucoup de vardéclarations supprimées pour voir un impact réel.

La minification a été mentionnée comme quelque chose que le premier exemple aidera pour une meilleure minification, cependant, comme le souligne Daniel Vassallo dans les commentaires, un bon minificateur le fera automatiquement pour vous de toute façon, donc à cet égard aucun impact.

Après avoir lu Crockford et d'autres, j'ai commencé à enchaîner mes variables exclusivement avec des virgules. Puis plus tard, j'ai été vraiment ennuyé par le débogueur Chrome DevTools qui ne s'arrêtait pas aux définitions de variables avec virgule. Pour le débogueur, les définitions de variables enchaînées avec une virgule sont une seule instruction, tandis que plusieurs instructions var sont plusieurs instructions auxquelles le débogueur peut s'arrêter. Par conséquent, je suis revenu de:

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

À:

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

À présent, je trouve la deuxième variante beaucoup plus propre, sans parler de son avantage à résoudre le problème du débogueur.

L'argument "moins de code à travers le fil" n'est pas convaincant, car il existe des minificateurs.

Je préfère la var-per-variablenotation:

var a = 2
var b = 3

car l'autre comma-instead-of-another-varnotation a ces trois défauts:

1. Difficile à maintenir
Considérez ce code:

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

Mais bon, que fait le mogrify? Imprimons b pour savoir:

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

casse des trucs

2. Difficile à lire

Le var dans le début de la ligne indique clairement qu'il y aura une nouvelle variable initiée.

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

Qu'est-ce que c'est que c = 3faire là-bas?

3. Pas cohérent

Considère ceci:

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

Avec var-per-variablechaque déclaration, suivez la même structure. Aveccomma-instead-of-another-var la première variable est déclarée d'une manière différente des autres. Si vous décidez, par exemple, de déplacer la première variable dans un cycle for, vous devrez ajouter var au milieu des déclarations

Autre que la préférence, il semble que la majorité des projets notables utilisent la var-per-variablenotation

Je suis d'accord avec les autres répondants sur le fait que c'est principalement une question de style personnel. Mais pour apporter une opinion «faisant autorité» dans la discussion, voici ce que dit Douglas Crockford sur le site Web du populaire outil JSLint :

Mais comme JavaScript n'a pas de portée de bloc, il est plus sage de déclarer toutes les variables d'une fonction en haut de la fonction. Il est recommandé d'utiliser une seule instruction var par fonction. Cela peut être appliqué avec l' onevaroption.

Comme d'autres l'ont noté, c'est une préférence de style. JSLint peut vous dire de n'en avoir qu'un varpar fonction (si vous utilisez les "Good Parts"). Ainsi, si vous utilisez JSLint pour vérifier votre code (ce n'est pas une mauvaise idée, à mon humble avis), vous finirez par utiliser le premier format plus que ce dernier.

D'autre part, le même auteur, Douglas Crockford , dit de mettre chaque variable dans sa propre ligne dans ses conventions de codage . Vous pouvez donc décocher la case "Tout un varpar fonction" dans JSLint si vous l'utilisez. ;-)

Je ne pense pas qu'il y ait de différence notable, en ce qui me concerne, c'est juste une préférence personnelle.

Je déteste avoir plusieurs déclarations var donc je le fais généralement:

var 
   one
  ,two
  ,three
  ,four
;

Comme il est plus court et sans doute plus lisible, aucun varbruit à regarder.

Comme je ne vois aucune référence à celui-ci, voici un lien vers la spécification ECMA-262, qui est la spécification sous-jacente de JavaScript. La grammaire de cette page dit:

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

Ce que vous pouvez en tirer, c'est d'utiliser des virgules ou non n'a pas d'importance. Dans tous les cas, il finit par être analysé comme un VariableDeclarationet est traité exactement de la même manière. Il ne devrait y avoir aucune différence dans la manière dont le moteur de script traite les deux déclarations. Les seules différences seraient celles déjà mentionnées dans d'autres réponses - économisant plus d'espace et des différences pratiquement incommensurables dans le temps qu'il faut pour appliquer la grammaire pour trouver tout le VariableDeclarationsmoment où le script est compilé.

Le premier économise quelques caractères - il y a donc une très petite économie en termes de taille de fichier JS et donc de consommation de bande passante. Le seul moment où cela deviendrait perceptible serait dans des cas extrêmes.

Je préfère la deuxième version (chacune a la sienne var). Je pense que c'est parce que je viens d'un fond C ++. En C ++, vous pouvez déclarer des variables comme vous le faites dans votre premier exemple, mais c'est mal vu (cela conduit facilement à des erreurs lorsque vous essayez de créer des pointeurs de cette façon).

Si vous réduisez votre javascript, il y a un avantage assez important:

var one, two, three, four;

devient

var a, b, c, d;

Tandis que

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

devient

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

C'est trois instances supplémentaires de var, qui peuvent s'additionner avec le temps.

Voir la série d'articles "A List Apart" "Meilleure minification Javascript" Partie 1 et Partie 2