JavaScriptで;ではなく,で区切る意図は？

Question

JavaScriptを眺めていると、以下のようなコードに出くわすことがあります。

1,2,3,4,5;6,7,8;9

私はこれまで、文は;で区切るものだと思っていたのですが、コンソールで動かしてみると、たしかに,でも文を区切ることができるようです。

不思議なのは、同じソースのなかに、,と;が混在していることがあるということです。

この２つには何か違いがあるのでしょうか、どのような意図で、,を選択することがあるのでしょうか。

Answer 1

カンマ演算子

カンマ演算子(,)を使う事で複数の式(Expression)をまとめる事で、一つの式文(Expression statement)として扱うことが出来ます。
式文は文(Statement)に分類されます。

• 12.16 Comma Operator ( , ) - ECMAScript® 2016 Language Specification
• 13.5 Expression Statement - ECMAScript® 2016 Language Specification

省略記法

for, while, if, 三項演算子、アロー関数等、一部の機能は、Stetament 内で一つの文(Statement)が後続する事を求めます。
一般にブロック文(BlockStatement)が使われる事が多いですが、文であれば何が入っても良い為、カンマ演算子で式文を指定する事も出来ます。

• 13.2 Block - ECMAScript® 2016 Language Specification

if (x === 1) {  // BlockStatement
  a = 2;
  b = 3;
}

if(x===1)a=2,b=3; // ExpressionStatement

人間が書く場合のコーディング規約では可読性の高い前者が推奨されますが、minified のような機械的処理の場合は、可読性を落としてでも、最短コードである事を優先する為、後者に変換されます。

変数文 (Variable Statement)

変数文におけるカンマ(,)はカンマ演算子ではありません。
VariableStatement の文法上でカンマ(,)を含むことを許可しています。

• 13.3.2 Variable Statement - ECMAScript® 2016 Language Specification

Syntax

VariableStatement[Yield]:
  varVariableDeclarationList[In, ?Yield];

VariableDeclarationList[In, Yield]:
  VariableDeclaration[?In, ?Yield]
  VariableDeclarationList[?In, ?Yield],VariableDeclaration[?In, ?Yield]

### セミコロン(`;`)

`for` 文など、一部の例外はありますが、セミコロン(`;`)は原則として**文(Statement)**を区切る為に使われます。
カンマ演算子(`,`)は**式(Expression)**であり、式は式文(ExpressionStatement)の中に含むことが出来ます。
文(Statement)と式(Expression)は区別する必要があります。

Re: sannye さん

Comments

[sannye]

すごく丁寧で、とても参考になります。ありがとうございます。

Answer 2

カンマ演算子でつないでいる箇所のことでしょうか。

【カンマ演算子 - JavaScript | MDN】
https://developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/Comma_Operator

Comments

[sannye]

そうなのですが、for文ではない普通のコードで出くわすのが不思議なのです。

```
var x = func1(); func2(), func3()
```

みたいな。minifyされたコードを見ているので、何か、最適化の結果かもしれませんが、実装者が`,`に特別な意図を持たせることがあるのかどうか、気になったのです。

[Lhankor_Mhy]

横からすみません。
>実装者が`,`に特別な意図を持たせることがあるのかどうか

これは、文法上の要請だと思います。
var x = func1(); func2(), func3()
↑はエラーにならないと思いますが、
var x = func1(), func2(), func3()
↑はエラーになると思います。
varは文なのでカンマ演算子が使えない（var文のカンマと解釈される）ことによるものです。
同様の理由で、letやconstも同じ文におけないので、
let a,b; const c,d; f();
↑みたいな記述はありえると思います。

Answer 3

MDNのカンマ演算子という箇所は読んだことがなかったので、勉強になりました。
しかし、次のようなコードがまかり通ると、私としては勘弁ならないなあとは思いました。

//x = 10;
x = 20;

if (x === 10)
  y = 20, console.log(y);
else
  y = 30, console.log(y);

Comments

[sannye]

改行するなら; しないなら, ということなのですかねえ……。

[anndonut]

違いますよ。上のコードはifの中に２文書いてあるので本来的には;で区切ってブロック化するべきものです。２文書いてあるのにブロック化されてなければ、大抵のプログラマはぎょっとするはずです。

[sannye]

なるほど、確かにこれはびびります。

[Tak1016]

;は文末を明示するものですが、実は必須ではなく、改行するとセミコロンの自動挿入という問題を引き起こしたりしますよね。
余談ですみません。