web-dev-qa-db-ja.com

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

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

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

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

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

1つの方法は他の方法よりも優れていますか？

javascriptvariablescoding-styleperformancedeclaration
303
Steve Harrison

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

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

313
Jeremy Ruten

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

(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
}());
202
Kenny Ki

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

33
user215871

こうすると読みやすくなります。

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

しかし、こうすることでスペースとコード行数を減らすことができます。

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

スペースを節約するのには理想的ですが、JavaScriptコンプレッサーで処理するようにしてください。

25
Jason Stackhouse

それは個人的な好みの問題です。これら2つの方法の間に違いはありませんが、空白を削除しても2番目の形式で保存される数バイトは違います。

14
Brian Campbell

たぶんこんな感じ

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

最初または最後の変数を変更するときを除いて、それは維持して読むのが簡単です。

12
joe nerdan

ECMAScript6は 破壊的な代入 を導入しました。

[a, b] = [1, 2]aは1に等しく、bは2に等しくなります。

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

より読みやすいです：

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

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

10
Kevin Crowell

私の唯一の、まだ本質的なコンマの使用は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");

しばらくの間、私は確信が持てず、言語を切り替えました。

7
codelion

ES6分割代入 を使います。配列からの値、またはオブジェクトからのプロパティを別々のものに展開します。変数.

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

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

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

開発者が自分の好きな場所に 'var'を削除しないようにすることを意味するのであれば、トレードオフは価値があると思います。

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

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

6
Wade Harrell

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

   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 */;
5
v1r00z

単文バージョン（single var）を回避するもう1つの理由はデバッグです。代入行のanyで例外がスローされた場合、スタックトレースには1行だけが表示されます。

コンマ構文で10個の変数が定義されている場合、どの変数が原因であるかを直接知ることはできません。

個々のステートメントのバージョンは、このあいまいさの影響を受けません。

3
shawn

"Cohesion over Coupling"の概念は、単なるオブジェクト/モジュール/関数よりも一般的に適用できます。それはまたこの状況で役立つことができます：

OPが提案した2番目の例では、すべての変数を同じステートメントに結合しています。このため、行を壊して1行を取り出して別の場所に移動することは不可能です（高度な結合）。彼が挙げた最初の例では、変数の割り当てを互いに独立させています（カップリングが低い）。

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

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

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

2
Magne

私たちがES6を使い始める前は、単一のvar宣言によるアプローチは良くも悪くもありませんでした（あなたがlintersと'use strict'を持っている場合）。それは本当に好みの好みでした。宣言：

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

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

1
Kirill Reznikov

私は最初の方法（複数の変数）が最善だと思います。そうでなければ（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;
        });
0
vegemite4me

古い投稿です、私は知っていますが、仲間のグーグラーのために遠近法の細部を加えるために：

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

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

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

0
Beau