More than 1 year has passed since last update.

最後のカンマについて（JavaScript）

Last updated at 2022-05-01Posted at 2022-03-28

最後のカンマとは？

最後のカンマとは、JavaScriptにおけるアレイやオブジェクトの括弧の内部で使用するカンマについて、一番最後のエレメントに対してカンマをつけるのかとうか？という話です。
ちなみに、英語では、trailing commaと呼び、trailとは、足跡や引きずった跡のことなので、カンマを引きずった跡に見立てているわけです。

JavaScript Arrays

最初にアレイですが、JavaScriptでは最後のカンマがあってもなくても、問題ありません。


var arr = [ "絵梨花","瑞穂","紗理菜", ];

console.log(arr); // [ "絵梨花","瑞穂","紗理菜" ]
console.log(arr.length) // 3

ただし、もう一つカンマを付け加えると変なことになりますので、注意しましょう。


var arr = [ "絵梨花","瑞穂","紗理菜",, ];

console.log(arr); // [ "絵梨花","瑞穂","紗理菜", (empty) ]
console.log(arr.length) // 4

JavaScriptでは、アレイについては、ECMAScript 1（1997）より最後のカンマはあってもなくてもよい仕様となっています。

JavaScript Objects

オブジェクトについても、最後のカンマがあってもなくてもOKです。

var member = {
    firstName: "Sarina", 
    lastName: "Ushio",
    team:"Hinatazaka 46",
    eyeColor:"brown",
}
console.log(member); 
// { firstName: "Sarina", lastName: "Ushio", team:"Hinatazaka 46", eyeColor:"brown" }
console.log(Object.keys(member).length) // 4

オブジェクトについてはECMAScript 2009（ES5）より最後のカンマがあってもなくても問題ない仕様となりました。（それまでは、最後のカンマがあるとエラーになっていました。）

JavaScript Functions

ファンクションのパラメータにおいて最後のカンマを付けても、問題なく動作します。
また、一度宣言したファンクションを起動する場合、そのパラメータにおける最後のカンマも許容されます。

function add (a,b) {
    return a + b;
}

function parameterwithtrailingcomma (a,b,) {
    return a + b;
}

console.log(add(2,3)) // 5
console.log(add(2,3,)) // 5
console.log(parameterwithtrailingcomma(2,3)) // 5
console.log(parameterwithtrailingcomma(2,3,)) // 5

ファンクションのパラメータについては、ECMAScript 2017（ES8）より最後のカンマがあってもなくても問題ない仕様となりました。（それまでは、最後のカンマがあるとエラーになっていました。）

ただし、rest parameterについては、最後のカンマを付けるとエラーになります。こちらは、最後のカンマを付けない、正しい使い方。

function show (...numbers) {
    return numbers;
}
console.log(show(1,2,3,4,5)); //[1,2,3,4,5]

こちらは、rest parameterに最後のカンマが付いていて、SyntaxErrorになるケース。JavaScriptがこのファンクションを読み込む段階でエラーになるので、コンソールログは出力されません。

function show (...numbers,) {
    return numbers;
}
console.log(show(1,2,3,4,5));

JSON

JSONは、JavaScript Object Notationの略ですが、広く利用されているデータ交換のためのフォーマットです。ただし、その名前とは裏腹に、JavaScriptとは独立した仕様になっていて、最後のカンマをつけるとエラーになります。

//正しいフォーマットのサンプル
{ "name":"Erika", "height":162, "address":"Tokyo" }

//最後にカンマを付けるとエラーになります
{ "name":"Erika", "height":162, "address":"Tokyo", }

//正しいJSONフォーマットの場合
const jsonText = '{ "name":"Erika", "height":162, "address":"Tokyo" }';
const obj = JSON.parse(jsonText);
console.log("obj:", obj); //{ name:"Erika", height:162, address:"Tokyo" }

//最後にカンマを付けた間違ったフォーマットの場合
const jsonText2 = '{ "name":"Erika", "height":162, "address":"Tokyo", }';
const obj2 = JSON.parse(jsonText2); //最後のカンマがあるため、SyntaxErrorにより中止
console.log("obj2:", obj2);