JavaScript-Variablendefinition: Kommas vs. Semikolons

Was sind die Unterschiede und / oder Vorteile der Verwendung von Kommas, wenn eine Gruppe von Variablen anstelle von Semikolons deklariert wird?

Beispielsweise:

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

gegen

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

Ich weiß, dass, wenn Sie das varSchlüsselwort für die erste Variable im ersten Beispiel angeben, es für alle Variablen bestehen bleibt, sodass beide das gleiche Endergebnis in Bezug auf den Gültigkeitsbereich erzielen. Ist es nur eine persönliche Präferenz oder gibt es einen Leistungsvorteil, wenn man es so oder so macht?

Kein Leistungsvorteil, nur eine Frage der persönlichen Wahl und des Stils.

Die erste Version ist nur prägnanter.

Aktualisieren:

In Bezug auf die Datenmenge, die über das Kabel übertragen wird, ist natürlich weniger besser, aber Sie würden verdammt viele entfernte varDeklarationen benötigen , um eine echte Auswirkung zu sehen.

Die Minimierung wurde als etwas erwähnt, bei dem das erste Beispiel für eine bessere Minimierung hilfreich sein wird. Wie Daniel Vassallo in den Kommentaren hervorhebt, wird ein guter Minifizierer dies sowieso automatisch für Sie tun, sodass diesbezüglich keinerlei Auswirkungen bestehen.

Nachdem ich Crockford und andere gelesen hatte, begann ich, meine Variablen ausschließlich mit Komma zu verketten. Später ärgerte mich der Chrome DevTools-Debugger, der nicht bei Variablendefinitionen mit Komma stehen blieb. Für den Debugger sind mit Komma verkettete Variablendefinitionen eine einzelne Anweisung, während mehrere var-Anweisungen mehrere Anweisungen sind, bei denen der Debugger anhalten kann. Deshalb habe ich zurückgeschaltet von:

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

Zu:

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

Inzwischen finde ich die zweite Variante viel sauberer, ganz zu schweigen von ihrem Vorteil, das Debugger-Problem zu lösen.

Das Argument "weniger Code durch den Draht" ist nicht überzeugend, da es Minifizierer gibt.

Ich bevorzuge die var-per-variableNotation:

var a = 2
var b = 3

weil die andere comma-instead-of-another-varNotation diese drei Mängel aufweist:

1. Schwer zu warten
Betrachten Sie diesen Code:

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

Aber hey, was macht der Mogrify? Drucken wir b aus, um herauszufinden:

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

bricht Sachen

2. Schwer zu lesen

Die Variable am Anfang der Zeile gibt deutlich an, dass eine neue Variable initiiert wird.

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

Was zum Teufel macht das c = 3da richtig?

3. Nicht konsistent

Bedenken Sie:

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

Folgen Sie bei var-per-variablejeder Deklaration der gleichen Struktur. Mit comma-instead-of-another-varder ersten Variablen wird anders deklariert als mit anderen. Wenn Sie beispielsweise die erste Variable innerhalb eines for-Zyklus verschieben möchten, müssen Sie var in die Mitte der Deklarationen einfügen

Abgesehen von der Präferenz scheint es, dass die meisten bemerkenswerten Projekte die var-per-variableNotation verwenden

Ich stimme den anderen Antwortenden zu, dass dies hauptsächlich eine Frage des persönlichen Stils ist. Um eine "maßgebliche" Meinung in die Diskussion einzubringen, sagt Douglas Crockford auf der Website des beliebten JSLint-Tools Folgendes :

Da JavaScript jedoch keinen Blockbereich hat, ist es sinnvoller, alle Variablen einer Funktion oben in der Funktion zu deklarieren. Es wird empfohlen, pro Funktion eine einzige var-Anweisung zu verwenden. Dies kann mit der onevarOption erzwungen werden .

Wie andere angemerkt haben, ist es eine Stilpräferenz. JSLint weist Sie möglicherweise an, nur eine varpro Funktion zu haben (wenn Sie die "guten Teile" verwenden). Wenn Sie also JSLint verwenden, um Ihren Code zu überprüfen (keine schlechte Idee, IMHO), werden Sie am Ende das erste Format mehr als das letztere verwenden.

Auf der anderen Seite sagt derselbe Autor, Douglas Crockford , dass er jede Variable in seinen Codierungskonventionen in eine eigene Zeile setzen soll . Daher möchten Sie möglicherweise das Kontrollkästchen "Alle eine varpro Funktion" in JSLint deaktivieren, wenn Sie es verwenden. ;-);

Ich glaube nicht, dass es einen merklichen Unterschied gibt, für mich ist es nur eine persönliche Präferenz.

Ich hasse es, mehrere var-Deklarationen zu haben, also mache ich normalerweise:

var 
   one
  ,two
  ,three
  ,four
;

Da es kürzer und wohl besser lesbar ist, ist kein varRauschen zu sehen.

Da ich keine Verweise darauf sehe, ist hier ein Link zur ECMA-262-Spezifikation, die die zugrunde liegende Spezifikation für JavaScript ist. Die Grammatik von dieser Seite sagt:

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

Was Sie daraus ableiten können, ist die Verwendung von Kommas oder spielt keine Rolle. In jedem Fall wird es als a analysiert VariableDeclarationund genauso behandelt. Es sollte keinen Unterschied geben, wie die Skript-Engine die beiden Deklarationen behandelt. Die einzigen Unterschiede wären diejenigen, die bereits in anderen Antworten erwähnt wurden - mehr Platz sparen und praktisch unermessliche Unterschiede in der Zeit, die zum Anwenden der Grammatik benötigt wird, um alle Informationen zu finden, VariableDeclarationswenn das Skript kompiliert wird.

Der erste spart ein paar Zeichen - daher gibt es eine sehr geringe Einsparung in Bezug auf die JS-Dateigröße und damit den Bandbreitenverbrauch. Dies würde sich nur in extremen Fällen bemerkbar machen.

Ich bevorzuge die zweite Version (jede hat ihre eigene var). Ich denke, das liegt daran, dass ich aus einem C ++ - Hintergrund komme. In C ++ können Sie Variablen wie in Ihrem ersten Beispiel deklarieren, aber es ist verpönt (es führt leicht zu Fehlern, wenn Sie versuchen, auf diese Weise Zeiger zu erstellen).

Wenn Sie Ihr Javascript minimieren, gibt es einen ziemlich großen Vorteil:

var one, two, three, four;

wird

var a, b, c, d;

Wohingegen

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

wird

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

Das sind weitere drei Instanzen var, die sich im Laufe der Zeit summieren können.

Siehe die Artikelserie "A List Apart" "Better Javascript Minification", Teil 1 und Teil 2