web-dev-qa-db-fra.com

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

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

Par exemple:

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

versus

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

Je sais que si vous spécifiez le mot clé var 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 concernant la portée. S'agit-il simplement d'une préférence personnelle, ou y a-t-il un avantage de performance à le faire de toute façon?

javascriptvariables
83
Collin Klopfenstein

Aucun avantage de performance, juste une question de choix personnel et de style.

La première version est juste plus succincte.

Mise à jour:

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

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

68
Oded

Après avoir lu Crockford et d'autres, j'ai commencé à enchaîner mes variables exclusivement par des virgules. Plus tard, j'ai été vraiment ennuyé par le Chrome débogueur DevTools qui ne s'arrêtait pas aux définitions de variables avec une virgule. Pour le débogueur, les définitions de variables chaî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;

À l'heure actuelle, 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.

26
Felix

Je préfère le var-per-variable notation:

var a = 2
var b = 3

parce que l'autre comma-instead-of-another-var la notation a ces trois défauts:

1. Difficile à entretenir
Considérez ce code:

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

Mais bon, que fait le mogrify? Imprimons b pour découvrir:

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

casse les choses

2. Difficile à lire

Le var dans la mendicité de la ligne communique 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

Que diable est le c = 3 y faire non?

. Pas cohérent

Considère ceci:

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

Avec var-per-variable chaque déclaration suit la même structure. Avec comma-instead-of-another-var la première variable est déclarée différemment 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 le var-per-variable notation

15
Martin Gottweis

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

Mais parce que JavaScript n'a pas de portée de bloc, il est plus judicieux 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'option onevar.

7
Daniel Vassallo

Comme d'autres l'ont noté, c'est une préférence de style. JSLint peut vous indiquer de n'avoir qu'un var par fonction (si vous utilisez les "bonnes pièces"). 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 var par fonction" dans JSLint si vous l'utilisez. ;-)

3
Heretic Monkey

Comme je n'y vois aucune référence, ici est 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 est d'utiliser ou non des virgules. Dans les deux cas, il finit par être analysé en tant que VariableDeclaration et est traité exactement de la même manière. Il ne devrait pas y avoir de différence dans la façon 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 - économiser plus d'espace et des différences pratiquement incommensurables dans le temps qu'il faut pour appliquer la grammaire pour trouver tous les VariableDeclarations lorsque le script est compilé.

2
Scott Mermelstein

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 fais habituellement:

var 
   one
  ,two
  ,three
  ,four
;

Comme il est plus court et sans doute plus lisible, pas de bruit var à regarder.

1
meder omuraliev

Le premier enregistre 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. La seule fois où cela deviendrait perceptible serait dans des cas extrêmes.

1
STW

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

1
rmeador

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;

Il s'agit de trois instances supplémentaires de var, qui peuvent s'additionner au fil du temps.

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

1
Ryan Kinal