まあ、好みの問題もあるので、嫌な人にとっては嫌なんでしょうが、、

JavaScriptで、例えば先頭で var をまとめて定義 & 値を代入する際に、

var foo = 1,
    bar = 2;

でなく、

var foo = 1,
var bar = 2;

と、varを並べたほうが、メンテ性も見た目を揃えるにもよいのではないかという、Ben Almanの2年前のブログが最近いくつかtweetされてたので、チェックしてみました。

そもそも、

• 複数varを並べるのは無駄だし、初心者っぽい。
• 単独varの方が見た目がよい。

という意見が相当根強いようですが、それに対して彼の主張は、

Maintenance

もし下記のような内容の変更のため、並び替えて編集したとする。

// Before:
var foo = 1,
    bar = 2;
// After:
var bar = 2,
    foo = bar -1;

上記の単数varより、下記の複数varの方が、修正作業をするときの手間数が少ない。

// Before:
var foo = 1,
var bar = 2;
// After:
var bar = 2,
var foo = bar -1;

Automatic Semicolon Insertion

単数 varでカンマを忘れると、複数varでセミコロンを忘れるよりもインパクトがでかい。リントするので問題にならないというのは、本当？

var foo =1,
    bar = 2 // ASIがここにセミコロンを挿入した...
    baz = 3; // … そうすると外部（グローバル？）変数 bazの値が3に…

一方、こちらの場合は、

var foo = 1;
var bar = 2  // ASIがセミコロンを付加するので問題なし。
var baz = 3;

Indentation

単数varだと、見た目を揃えるのはタブか？インデントか？という議論に巻き込まれるが、複数varで並べると見た目はどのブラウザ、エディタでも揃う。

More indentation: Multi-line expressions

複数行に渡るオブジェクトリタラルなどを表記するときに、

// barを追加後に、全体が揃うように、fooのpropを右にずらすか、
var foo = {
        prop: 123
    },
    bar = {
        prop: 456
    };
// 最初から苦労なくすっきり並べるか。
var foo = {
    prop: 123
};
var bar = {
    prop: 456
};

Even more indentation: Comments

functionの先頭でいくつかの変数を定義すると、それらの変数が実際に利用されるタイミングはもっと後のコードになるので、それぞれの変数の前行にコメントを挿入しておきたくなる。その場合、単独 varで複数の変数を定義した間に順次コメントを置くと、コメントの位置を揃えづらい。変数の並びを変更することになったら更に面倒。

Minification

UglifyJSのような圧縮ツールであれば、複数の連続したvarステートメントを単独のものにまとめてくれる。

In summary

基本的には複数var、値を代入しない場合のみ単独 var にしている。

var foo, bar, baz;
var abc = 1;
var def = 2;

Rick Waldronも最近は似たようなスタイルでやっていて、単数varは変数の宣言のみで利用し、値の代入は必要なときのみfunctionのbodyでやってるとのこと。

#javascript