【JavaScript】オブジェクト・配列・関数引数の末尾カンマ

末尾カンマ

JavaScriptでは、配列リテラルの末尾要素後ろに対してカンマを記述することを許容しています。またECMAScript5にてオブジェクトリテラルの末尾カンマが、ECMAScript2017にて関数引数の末尾カンマが許容されるようになっています。

// 配列末尾カンマ
let ary = [1,2,3,4,]; //OK

// オブジェクト末尾カンマ
let obj = { hoge: "hoge", fuga: "fuga", };

// 関数引数の末尾カンマ
function f  = (a, b) = {a + b};
f(1,2,); // OK

末尾カンマのメリット

末尾カンマを許容することで、要素やプロパティ、引数追加時のカンマ未挿入によるシンタックスエラーを防止できます。

// Syntax Error
{
    name: "Taro",
    age: 20
    weight: 60
}

また末尾カンマによって、コード間差分をより明確にすることができます。

例えば、下記のような改行区切りの末尾カンマなしオブジェクトがあり、新しいプロパティを追加するとした場合、行単位diffを取るときにカンマ行のdiffも混入してしまいます。

diff --git a/obj.js b/obj.js
index 1f16f89..5952c5a 100644
--- a/obj.js
+++ b/obj.js
@@ -1,4 +1,5 @@
 let obj = {
     name: "Taro",
-    age: 20
+    age: 20,
+    weight: 60
 };

最初からオブジェクトの末尾カンマを許容していた場合、追加プロパティ行の差分が明確になります。

diff --git a/obj.js b/obj.js
index 1f16f89..5952c5a 100644
--- a/obj.js
+++ b/obj.js
@@ -1,4 +1,5 @@
 let obj = {
     name: "Taro",
     age: 20,
+    weight: 60
 };

末尾カンマのデメリット

末尾カンマのデメリットとして、カンマ区切りをサポートできないブラウザで対応できない点が挙げられます。

具体的には、

• ECMAScript2015をサポートしていないブラウザはオブジェクト末尾カンマ不可能
• ECMA2017をサポートしていないブラウザは関数引数末尾カンマ不可能

となります。

ただし、babelなどのトランスコンパイラを使って末尾カンマが削除されたスクリプトを生成することで対応することができます。

また、JSONはJavaScriptのオブジェクトフォーマットを踏襲していますが、末尾カンマを許容していないので注意が必要です。

例えば、以下のようなJSONはNGです。

{
     name: "Taro",
     age: 20,
     weight: 60, 
 }