JavaScriptで複数の変数を宣言する

JavaScriptでは、次のように複数の変数を宣言することができます。

var variable1 = "Hello World!";
var variable2 = "Testing...";
var variable3 = 42;

...またはこのように：

var variable1 = "Hello World!",
    variable2 = "Testing...",
    variable3 = 42;

ある方法が他の方法よりも優れている/速いですか？

最初の方法は保守が簡単です。各宣言は1行の1つのステートメントなので、宣言を簡単に追加、削除、および並べ替えることができます。

2番目の方法では、varキーワードとセミコロンが含まれているため、最初または最後の宣言を削除するのは面倒です。また、新しい宣言を追加するたびに、古い行のセミコロンをコンマに変更する必要があります。

保守性に加えて、最初の方法は、事故のグローバル変数の作成の可能性を排除します。

(function () {
var variable1 = "Hello World!" // semicolon is missed out accidently
var variable2 = "Testing..."; // still a local variable
var variable3 = 42;
}());

2番目の方法は許容度が低くなりますが、

(function () {
var variable1 = "Hello World!" // comma is missed out accidently
    variable2 = "Testing...", // becomes a global variable
    variable3 = 42; // a global variable as well
}());

組織のスコープごとに1 つのvarステートメントを使用するのが一般的です。すべての「スコープ」が同様のパターンに従ってコードを読みやすくする方法。さらに、エンジンはそれらすべてをとにかく上に「巻き上げ」ます。したがって、宣言をまとめておくと、実際に何がより厳密に起こるかを模倣します。

このようにすると、より読みやすくなります。

var hey = 23;
var hi = 3;
var howdy 4;

しかし、この方法では、スペースとコード行が少なくて済みます。

var hey=23,hi=3,howdy=4;

スペースの節約には理想的ですが、JavaScriptコンプレッサーがそれを処理してくれます。

たぶんこんな感じ

var variable1 = "hello world"
, variable2 = 2
, variable3 = "how are you doing"
, variable4 = 42;

最初または最後の変数を変更する場合を除いて、維持および読み取りは簡単です。

それは単に個人的な好みの問題です。空白を取り除いた場合に2番目の形式で保存される数バイト以外は、これら2つの方法に違いはありません。

ECMAScript6は、かなりうまく機能する破壊的な割り当てを導入しました：

[a, b] = [1, 2] a等しく1なり、b等しくなる2。

var variable1 = "Hello World!";
var variable2 = "Testing...";
var variable3 = 42;

より読みやすいです：

var variable1 = "Hello World!",
    variable2 = "Testing...",
    variable3 = 42;

しかし、彼らは同じことをします。

ES6 Destructuring割り当てを使用：配列の値またはオブジェクトのプロパティを個別の変数にアンパックします。

let [variable1 , variable2, variable3] = 
["Hello World!", "Testing...", 42];

console.log(variable1); // Hello World!
console.log(variable2); // Testing...
console.log(variable3); // 42

私の唯一の、しかし本質的なコンマの使用法はforループ内にあります：

for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}

JavaScriptでこれが問題ないかどうかを調べるために、ここに行きました。

それが機能するのを見ても、nが関数に対してローカルであるかどうかという疑問が残りました。

これは、nがローカルであることを確認します。

a=[3,5,7,11];
(function l () { for (var i = 0, n = a.length; i < n; i++) {
  var e = a[i];
  console.log(e);
}}) ();
console.log(typeof n == "undefined" ?
  "as expected, n was local" : "oops, n was global");

少しの間、私は確信が持てませんでした。言語を切り替えました。

どちらも有効ですが、2番目を使用すると、経験の浅い開発者がvarステートメントをあちこちに配置して、巻き上げの問題を引き起こすことを防ぎます。関数の上部に関数ごとに1つの変数しかない場合は、コード全体をデバッグする方が簡単です。これは、変数が宣言されている行が一部の行ほど明確ではないことを意味します。

開発者が「var」を好きな場所にドロップするのをやめることを意味するのであれば、トレードオフはそれだけの価値があると思います。

人々はJSLintについて文句を言うかもしれませんが、私もそうですが、その多くは言語の問題を修正することではなく、コーダーの悪い習慣を正すことで、彼らが書くコードの問題を防ぐことに向けられています。したがって：

「ブロックスコープの言語では、通常、変数を最初に使用する場所で宣言することをお勧めします。ただし、JavaScriptにはブロックスコープがないため、関数のすべての変数を関数の上部で宣言する方が賢明です。関数ごとに単一のvarステートメントを使用することをお勧めします。」- http://www.jslint.com/lint.html#scope

それは個人的な好みの問題だと思います。私は次の方法でそれを行うことを好みます：

   var /* Vars */
            me = this, that = scope,
            temp, tempUri, tempUrl,
            videoId = getQueryString()["id"],
            host = location.protocol + '//' + location.host,
            baseUrl = "localhost",
            str = "Visit W3Schools",
            n = str.search(/w3schools/i),
            x = 5,
            y = 6,
            z = x + y
   /* End Vars */;

単一ステートメントのバージョン（単一のvar）を回避するもう1つの理由は、デバッグです。例外がスローされた場合の割り当て行、スタックトレースには1行のみが表示されます。

コンマ構文で定義された10個の変数がある場合、どの変数が原因であるかを直接知る方法はありません。

個々のステートメントのバージョンは、このあいまいさに悩まされることはありません。

「結合上の結合」の概念は、単なるオブジェクト/モジュール/関数よりも一般的に適用できます。この状況でも機能します。

OPが提案する2番目の例では、すべての変数を同じステートメントに結合しています。これにより、行の1つを取得して、何かを壊さずに別の場所に移動することができません（高結合）。彼の最初の例では、変数の割り当てを互いに独立させています（低結合）。

「低結合は、適切に構造化されたコンピューターシステムと優れた設計の兆候であることが多く、高い凝集性と組み合わせると、高い可読性と保守性の一般的な目標をサポートします。」

http://en.wikipedia.org/wiki/Coupling_(computer_programming）

だから最初のものを選択してください。

古い投稿ですが、Google社員の視点を少し追加します。

保守性の問題は、このような小さなフォーマットでかなり簡単に克服できます。

let
  my_var1 = 'foo',
  my_var2 = 'bar',
  my_var3 = 'baz'
;

私は個人的な好みの問題として、このフォーマットを厳密に使用しています。もちろん、この宣言は、単一の宣言の場合、または単純に作品を構成する場合はスキップします。

ES6の使用を開始する前は、単一のvar宣言を使用するアプローチは良くも悪くもなかったと思います（リンターとがある場合）'use strict'。これは本当に好みの好みでした。しかし、今は状況が変わりました。複数行宣言を支持する私の考えがあります。 ：

1. 現在、2種類の新しい変数があり、var廃止されました。const本当に必要になるまで、どこでも使用することをお勧めしますlet。そのため、コードの中央に代入を含む変数宣言がコードに含まれることがよくあります。また、ブロックスコープのため、小さな変更の場合は、ブロック間で変数を移動することがよくあります。複数行の宣言でそれを行う方が便利だと思います。

2. ES6の構文はより多様になり、デストラクタ、テンプレート文字列、矢印関数、オプションの割り当てが追加されました。単一のvar宣言でそのすべての機能を多用すると、読みやすさが低下します。

私の意見では読むのが難しい（Knockoutを使用するアプリケーションからの）他の方法でそれが終わる可能性があるため、最初の方法（複数の変数）が最良であると思います。

    var categories = ko.observableArray(),
        keywordFilter = ko.observableArray(),
        omniFilter = ko.observable('').extend({ throttle: 300 }),
        filteredCategories = ko.computed(function () {
            var underlyingArray = categories();
            return ko.utils.arrayFilter(underlyingArray, function (n) {
                return n.FilteredSportCount() > 0;
            });
        }),
        favoriteSports = ko.computed(function () {
            var sports = ko.observableArray();
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        sports.push(a);
                    }
                });
            });
            return sports;
        }),
        toggleFavorite = function (sport, userId) {
            var isFavorite = sport.IsFavorite();

            var url = setfavouritesurl;

            var data = {
                userId: userId,
                sportId: sport.Id(),
                isFavourite: !isFavorite
            };

            var callback = function () {
                sport.IsFavorite(!isFavorite);
            };

            jQuery.support.cors = true;
            jQuery.ajax({
                url: url,
                type: "GET",
                data: data,
                success: callback
            });
        },
        hasfavoriteSports = ko.computed(function () {
            var result = false;
            ko.utils.arrayForEach(categories(), function (c) {
                ko.utils.arrayForEach(c.Sports(), function (a) {
                    if (a.IsFavorite()) {
                        result = true;
                    }
                });
            });
            return result;
        });