JavaScript変数の定義：カンマとセミコロン

Question 1

セミコロンではなく変数のグループを宣言するときにコンマを使用する場合の相違点や利点は何ですか。

例えば：

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

対

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

var最初の例の最初の変数にキーワードを指定した場合、すべての変数に渡って維持されるため、スコープに関して両方とも同じ最終結果を生成することを知っています。それは単なる個人的な好みですか、それともどちらにしてもパフォーマンス上のメリットはありますか？

Question 2

パフォーマンス上の利点はなく、個人の選択とスタイルの問題です。

最初のバージョンはもっと簡潔です。

更新：

回線を経由するデータの量に関しては、もちろん少ないほど良いですがvar、実際の影響を確認するためには、削除された多くの宣言が必要になります。

縮小は、最初の例がより良い縮小のために役立つものとして言及されていますが、ダニエルヴァッサロがコメントで指摘しているように、優れた縮小版はとにかく自動的にそれを行うので、その点では影響はありません。

Question 3

クロックフォードなどを読んだ後、私は変数をコンマだけでチェーニングし始めました。その後、Chrome DevToolsデバッガーに本当に悩まされ、コンマで変数定義を停止しませんでした。デバッガーの場合、コンマでチェーンされた変数定義は単一のステートメントですが、複数のvarステートメントは、デバッガーが停止できる複数のステートメントです。したがって、私は以下から切り替えました：

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

に：

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

今では、デバッガーの問題を解決する利点は言うまでもなく、2番目のバリアントがはるかにきれいになっています。

ミニファイアが存在するため、「ワイヤーを介したコードが少ない」という議論は説得力がありません。

Question 4

私はvar-per-variable記法を好む：

var a = 2
var b = 3

他のcomma-instead-of-another-var表記法には次の3つの欠点があるためです。

1.保守が難しい
次のコードを検討してください。

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

しかし、ちょっと、mogrifyは何をしますか？bを出力して調べてみましょう。

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

ものを壊す

2.読みにくい

行頭の変数は、新しい変数が開始されることを明確に伝えています。

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

地獄は何をしてc = 3いるのですか？

3.一貫していない

このことを考慮：

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

ではvar-per-variable、すべての宣言と同じ構造に従ってください。comma-instead-of-another-var最初の変数は、他のものとは異なる方法で宣言されています。たとえば、最初の変数をforサイクル内に移動する場合は、宣言の途中にvarを追加する必要があります

好み以外は、注目すべきプロジェクトの大部分がvar-per-variable表記を使用しているようです

Question 5

これは主に個人的なスタイルの問題であると他の回答者に同意します。しかし、「権威ある」意見を議論に取り入れるために、これは人気のあるJSLintツールのWebサイトで Douglas Crockfordが言っていることです。

ただし、JavaScriptにはブロックスコープがないため、関数のすべての変数を関数の先頭で宣言する方が賢明です。関数ごとに単一のvarステートメントを使用することをお勧めします。これはonevarオプションで強制できます。

Question 6

他の人が指摘したように、それはスタイルの好みです。JSLintは、var関数ごとに1 つだけを持つように指示する場合があります（「Good Parts」を使用する場合）。したがって、JSLintを使用してコードをチェックする場合（悪い考えではありませんが、IMHO）、最終的には後者よりも最初の形式を使用することになります。

一方、同じ作者であるDouglas Crockfordは、コーディング規則で各変数を独自の行に配置するように言っています。したがって、var使用する場合は、JSLintの[ All one per function]チェックボックスをオフにすることをお勧めします。;-)

Question 7

個人的な好みにすぎないので、目立った違いはないと思います。

私は複数のvar宣言を嫌うので、通常は次のようにします。

var 
   one
  ,two
  ,three
  ,four
;

それは短く、間違いなく読みやすいので、見てvarノイズはありません。

Question 8

私はそれへの参照が表示されないので、ここでのJavaScriptの基礎となる仕様であるECMA-262仕様へのリンクです。そのページの文法はこう言っています：

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

これから収集できるのは、コンマを使用しているかどうかは関係ありません。どちらの方法でも、最終的にはaとして解析され、VariableDeclarationまったく同じように扱われます。スクリプトエンジンが2つの宣言を処理する方法に違いはありません。唯一の違いは、他の回答ですでに言及されているものです。より多くのスペースを節約VariableDeclarationsし、スクリプトがコンパイルされたときにすべてのを見つけるために文法を適用するのにかかる時間の量の実質的に計り知れないほどの違いです。

Question 9

1つ目はいくつかの文字を保存します。したがって、JSファイルのサイズ、したがって帯域幅の消費の点で非常に小さな節約になります。これが顕著になるのは、極端な場合のみです。

Question 10

私は2番目のバージョンを好みます（それぞれに独自のバージョンがありますvar）。私はC ++の出身だからです。C ++では、最初の例と同じように変数を宣言できますが、それは不快感を与えます（そのようにしてポインターを作成しようとすると、間違いが起こりやすくなります）。

Question 11

JavaScriptを縮小する場合、かなり大きなメリットがあります。

var one, two, three, four;

なる

var a, b, c, d;

どこに

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

なる

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

これは、追加の3つのインスタンスでありvar、時間の経過とともに追加されます。

「A List Apart」の記事シリーズ「Better Javascript Minification」パート1およびパート2を参照してください。