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


88

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?

Réponses:


72

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.


8
Il existe un avantage en termes de performances lors de la réduction de votre javascript.
Ryan Kinal

1
@Ryan Kinal - où voyez-vous exactement la minification mentionnée dans la question?
Oded le

2
@Oded - la minification est en ligne avec les problèmes de performances. Par conséquent, si un style se prête à une meilleure minification, il se prête indirectement à des problèmes de performance
STW

7
@Ryan: Les bons minifiers, comme le Google Closure Compiler, fusionneront plusieurs instructions var en une seule: img840.imageshack.us/img840/3601/closurecompilerservice.jpg
Daniel Vassallo

2
Oui, tu as raison. Par curiosité, j'ai créé un test ( jsperf.com / ... ), l' ai exécuté 5 fois et j'ai obtenu 5 réponses différentes. Donc, euh, oui, tout est question de style et de préférence personnelle, pas de performance.
Derek Henderson

28

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.


1
J'en ai fait l'expérience moi-même. En général, je divise simplement la déclaration là où je dois vérifier quelque chose, et j'y dépose un debugger, puis j'en ajoute un autre varet je continue à les enchaîner par des virgules. Ensuite, lorsque j'ai terminé le débogage, je reviens en arrière et supprime les debuggerfichiers et extra var.
Collin Klopfenstein

7
La deuxième variante rend également l'historique de git plus propre. Au lieu d'avoir à changer le point-virgule de fin en virgule avant d'ajouter une autre variable ou de risquer de créer une variable globale, vous ajoutez simplement une instruction var complète.
payne8

pour le mentionner, la première forme peut inévitablement vous faire penser que b ou c est global.
garg10mai

18

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


pour un exemple de ce style laid (virgule-au lieu-d'une-autre-var) faisant son truc et déroutant les gens, voir stackoverflow.com/questions/37332155/...
Scott Weaver

7

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.


6
Il peut être intéressant de noter que Mozilla Javascript (via la letconstruction) n'ont une portée de bloc.
BlackVegetable

3
@BlackVegetable letpeut être utilisé dans plus que Mozilla JS ( voir ici ). Cela fait partie de la spécification ES6 , mais la plupart des navigateurs travaillent encore sur la mise en œuvre des fonctionnalités d'ES6.
mbomb007

3

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. ;-)


1
Il a raison. Le placement de variables sur des lignes séparées est recommandé dans la plupart des langages, car les algorithmes de fusion de contrôle de source fonctionnent généralement en comparant chaque ligne sous forme de texte brut (et non d'instructions lexicales dans une ligne). Si deux personnes éditent la même fonction, déclarer plusieurs variables sur la même ligne entraînera presque certainement un conflit de fusion, alors que des lignes séparées peuvent presque toujours être fusionnées automatiquement. (Peu importe si elles ont été déclarées comme des vardéclarations séparées ou enchaînées par des virgules.)
Richard Dingwall

2

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.


22
mot-clé sur "sans doute". Si je trouvais cet échantillon dans le nôtre, cela deviendrait var one, two, three four;très rapidement. Ajout de lignes-pour-la-bien-de-lignes Javascript peut être dangereux (interprètes JS peuvent insérer leur propre ;--Si vous ne prévoyez pas cela , alors vous trouverez rapidement des effets secondaires. De plus, ce qui ,de » bug de moi , les mots-clés qui obtiennent leur propre ligne me bogue, le ;sur sa propre ligne me bogue. Êtes-vous payé à la ligne?
STW

8
@STW - Vous faites en sorte que l'insertion automatique de points-virgules sonne comme une chose aléatoire, soumise aux caprices des navigateurs individuels, mais en réalité, cela ne se produit que selon un ensemble de règles bien défini et vous n'avez pas à craindre que cela se produise dans au milieu de votre vardéclaration. (Bien que je sois d'accord avec vous sur les virgules de début, et à propos varet le point-virgule final étant sur leurs propres lignes - les trois me
dérangent

1
Je ne pense pas que cela réponde vraiment à la question, car la question ne concerne pas les préférences personnelles.
Keith Pinson

2

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é.


1

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.


Cela suppose que vous ne réduisez pas vos fichiers - et sérieusement, qui ne réduit pas leurs fichiers ces jours-ci?
Keith Pinson

1

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).


1
Point intéressant, mais je ne suis pas sûr que cela réponde à la question de savoir quels sont les avantages et les inconvénients réels de cette syntaxe JavaScript .
Keith Pinson

1

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


6
Les bons minifiers, comme le Google Closure Compiler, fusionneront plusieurs instructions var en une seule: img840.imageshack.us/img840/3601/closurecompilerservice.jpg . Par conséquent, cet argument ne tient que si vous utilisez un minificateur moins intelligent ... ce que vous ne devriez pas :)
Daniel Vassallo

2
Et si vous gzipez, les var s répétés n'augmenteront pas sensiblement la taille du fichier gzippé (si je comprends bien gzipping).
Paul D.Waite
En utilisant notre site, vous reconnaissez avoir lu et compris notre politique liée aux cookies et notre politique de confidentialité.
Licensed under cc by-sa 3.0 with attribution required.