末尾のカンマ

末尾のカンマ ("最後のカンマ" と呼ばれることもあります) は、JavaScript のコードに新しい要素や引数、プロパティを追加するときに役立ちます。新しいプロパティを追加するとき、最終行ですでに末尾のカンマを使用していれば、最終行を修正することなく新しい行を追加できます。これによって、バージョン管理の差分がより洗練され、コード編集の煩雑さを軽減できます。

JavaScript は、当初から配列リテラルで末尾のカンマを使用できました。そして、ECMAScript 5 でオブジェクトリテラルの、ECMAScript 2017 で関数の引数の末尾のカンマが使用できるようになりました。

しかし、JSON では末尾のカンマを使用できません。

,

配列

JavaScript は配列の末尾のカンマを無視します。

var arr = [
  1,
  2,
  3,
];

arr; // [1, 2, 3]
arr.length; // 3

1 つ以上の末尾のカンマがある場合、省略 (または穴) が作られます。穴がある配列は希薄な (密集した配列は穴がありません) 配列と呼ばれます。たとえば、Array.prototype.forEach() や Array.prototype.map() で配列をイテレートするとき、穴はスキップされます。

var arr = [1, 2, 3,,,];
arr.length; // 5

オブジェクト

ECMAScript 5 から、オブジェクトリテラルの末尾のカンマも使用できるようになりました:

var object = {
  foo: "bar",
  baz: "qwerty",
  age: 42,
};

ECMAScript 2017 では、関数の引数リストで末尾のカンマが使用できるようになりました。

引数定義

次の 2 つの関数定義はともに有効で等しいものです。末尾のカンマは、関数の length プロパティや arguments オブジェクトに影響を与えません。

function f(p) {}
function f(p,) {}

(p) => {};
(p,) => {};

末尾のカンマは 、クラスやオブジェクトのメソッド定義でも使用できます。

class C {
  one(a,) {}
  two(a, b,) {}
}

var obj = {
  one(a,) {},
  two(a, b,) {},
};

関数呼び出し

次の 2 つの関数呼び出しはともに有効で等しいものです。

f(p);
f(p,);

Math.max(10, 20);
Math.max(10, 20,);

不正な末尾のカンマ

カンマしか含まない関数の引数定義や関数呼び出しは、SyntaxError を投げます。さらに、rest parameters を使用しているときは、末尾のカンマは許可されません。

function f(,) {} // SyntaxError: missing formal parameter
(,) => {};       // SyntaxError: expected expression, got ','
f(,)             // SyntaxError: expected expression, got ','

function f(...p,) {} // SyntaxError: parameter after rest parameter
(...p,) => {}        // SyntaxError: expected closing parenthesis, got ','

末尾のカンマは、分割代入の左辺でも使用できます。

// array destructuring with trailing comma
[a, b,] = [1, 2];

// object destructuring with trailing comma
var o = {
  p: 42,
  q: true,
};
var {p, q,} = o;

また、rest element で使用すると、SyntaxError を投げます。

var [a, ...b,] = [1, 2, 3];
// SyntaxError: rest element may not have a trailing comma

オブジェクトリテラルの末尾のカンマは、ECMAScript 5 でのみ導入されました。JSON は ES5 以前の JavaScript 構文に基づいているため、末尾のカンマを使用できません。

次の行は SyntaxError を投げます。

JSON.parse('[1, 2, 3, 4, ]');
JSON.parse('{"foo" : 1, }');
// SyntaxError JSON.parse: unexpected character
// at line 1 column 14 of the JSON data

正しく JSON をパースするには、カンマを省略します。

JSON.parse('[1, 2, 3, 4 ]');
JSON.parse('{"foo" : 1 }');

• Initial ECMAScript proposal: trailing function commas by Jeff Morrison