Trailing commas

JavaScript allows trailing commas wherever a comma-separated list of values is accepted and more values may be expected after the last item. This includes:

• Array literals
• Object literals
• Parameter definitions
• Function calls
• Named imports
• Named exports
• Dynamic import
• Array and object destructuring

In all these cases, the trailing comma is entirely optional and doesn't change the program's semantics in any way.

It is particular useful when adding, removing, or reordering items in a list that spans multiple lines, because it reduces the number of lines that need to be changed, which helps with both editing and reviewing the diff.

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

Arrays

JavaScript ignores trailing commas in arrays literals:

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

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

If more than one trailing comma is used, an elision (or hole) is produced. An array with holes is called sparse (a dense array has no holes). When iterating arrays for example with Array.prototype.forEach() or Array.prototype.map(), array holes are skipped. Sparse arrays are generally unfavorable, so you should avoid having multiple trailing commas.

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

Objects

Trailing commas in object literals are legal as well:

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

Trailing commas are also allowed in function parameter lists.

Parameter definitions

The following function definition pairs are legal and equivalent to each other. Trailing commas don't affect the length property of function declarations or their arguments object.

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

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

The trailing comma also works with method definitions for classes or objects:

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

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

Function calls

The following function invocation pairs are legal and equivalent to each other.

f(p);
f(p,);

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

Illegal trailing commas

Function parameter definitions or function invocations only containing a comma will throw a SyntaxError. Furthermore, when using rest parameters, trailing commas are not allowed:

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 trailing comma is also allowed on the left-hand side when using destructuring assignment:

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

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

Again, when using a rest element, a SyntaxError will be thrown:

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

As JSON is based on a very restricted subset of JavaScript syntax, trailing commas are not allowed in JSON.

Both lines will throw a 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

Omit the trailing commas to parse the JSON correctly:

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

Trailing commas are valid in named imports and named exports.

Named imports

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

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

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

Named exports

export {
  A,
  B,
  C,
};

export { A, B, C, };

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

Trailing commas are only allowed in dynamic imports if the runtime also implements the second options parameter.

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

• Grammar and types guide