末尾カンマ

解説

JavaScript で、カンマ区切りの値のリストが受け入れられ、最後のアイテムの後にさらに値が続くことがある場合、末尾カンマを使用することができます。次のようなものがあります。

• 配列リテラル
• オブジェクトリテラル
• 引数定義
• 関数呼び出し
• 名前付きインポート
• 名前付きエクスポート
• 動的インポート
• 配列やオブジェクトの構造分解

これらすべての場合において、末尾のカンマは完全に任意であり、プログラムの意味づけに何ら影響を与えません。

特に、複数行にわたるリストのアイテムを追加・除去・並べ替えを行う際に有用です。これは、変更が必要な行数を減らすことができるため、編集作業や差分レビューの両方に役立ちます。

  [
    "foo",
+   "baz",
    "bar",
-   "baz",
  ]

例

リテラルの末尾カンマ

配列

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

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

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

2 つ以上の末尾カンマがある場合、省略（または穴）が作られます。穴がある配列は疎配列と呼ばれます (密配列は穴がありません)。配列を、たとえば Array.prototype.forEach() や Array.prototype.map() で反復処理するとき、穴はスキップされます。疎配列は一般的に好ましくないため、末尾に複数のカンマを持つことは避けるべきです。

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

オブジェクト

オブジェクトリテラルでも末尾カンマを使用できます。

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

関数の末尾カンマ

関数の引数リストでも、末尾カンマが使用できます。

引数定義

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

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

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

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

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

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

関数呼び出し

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

f(p);
f(p,);

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

不正な末尾カンマ

関数の定義や呼び出しにおいて引数がカンマしかないと、SyntaxError が発生します。さらに、残余引数を使用しているときは、末尾カンマは使用できません。

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 ','

構造分解での末尾カンマ

末尾カンマは、構造分解パターンの中でも使用できます。

// 末尾カンマ付きで配列を構造分解
[a, b,] = [1, 2];

// 末尾カンマ付きでオブジェクトを構造分解
const o = {
  p: 42,
  q: true,
};
const { p, q, } = o;

ただし、残余要素が存在する場合、その後にカンマを付けることはできません。

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

JSON の末尾カンマ

JSON は JavaScript の構文のとても限られたサブセットに基づいているため、JSON では末尾カンマは使用することができません。

どちらの行も 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 }');

名前付きインポートおよび名前付きエクスポートの末尾カンマ

末尾カンマは名前付きインポートや名前付きエクスポートでも有効です。

名前付きインポート

import {
  A,
  B,
  C,
} from "D";

import { X, Y, Z, } from "W";

import { A as B, C as D, E as F, } from "Z";

名前付きエクスポート

export {
  A,
  B,
  C,
};

export { A, B, C, };

export { A as B, C as D, E as F, };

動的インポートの末尾カンマ

末尾カンマは、実行環境が 2 つ目の options 引数も実装している場合に限り、動的インポートで使用することができます。

import("D",);
import(
  "D",
  { with: { type: "json" } },
);

数量接頭辞

/x{2}/; // Exactly 2 occurrences of "x"; equivalent to /xx/
/x{2,}/; // At least 2 occurrences of "x"; equivalent to /xx+/
/x{2,4}/; // 2 to 4 occurrences of "x"; equivalent to /xxx?x?/

仕様書

ブラウザーの互換性

関連情報

• 文法とデータ型ガイド