Virgules finales (trailing commas)

JavaScript permet d'utiliser des virgules finales à tout endroit où une liste de valeurs séparées par des virgules est acceptée et où plus de valeurs pourraient être attendues après le dernier élément. Cela inclut :

• Les littéraux de tableau
• Les littéraux objet
• Les définitions de paramètres
• Les appels de fonction
• Les imports nommés
• Les exports nommés
• Les imports dynamiques
• Les virgules finales et la décomposition

Pour tous ces cas, la virgule finale est tout à fait optionnelle et ne modifie en rien la sémantique du programme.

La virgule finale sert notamment pour ajouter, retirer ou réordonner les éléments d'une liste écrite sur plusieurs lignes, car elle réduit le nombre de lignes à modifier, ce qui facilite l'édition et la revue de différence de code.

  [
    "toto",
+   "bidule",
    "truc",
-   "bidule",
  ]

Tableaux

JavaScript ignore les virgules finales dans les tableaux :

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

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

Si plusieurs virgules finales sont utilisées, cela crée un vide dans le tableau. Un tableau avec des vides est parfois qualifié de parsemé (ou sparse en anglais). Lorsqu'on parcourt un tableau avec les méthodes Array.prototype.forEach() ou Array.prototype.map(), par exemple, ces vides sont ignorés. De façon générale, les tableaux parsemés possèdent d'autres inconvénients, et mieux vaudra éviter d'avoir plusieurs virgules finales à la suite.

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

Objets

On peut également utiliser les virgules finales dans les littéraux objets :

const objet = {
  toto: "truc",
  bidule: "ergo-L",
  age: 42,
};

Les virgules finales peuvent être utilisées dans la liste des paramètres d'une fonction.

Définition des paramètres

Pour chacune des deux paires de définitions qui suivent, les deux définitions sont autorisées et équivalentes entre elles. Les virgules finales n'ont pas d'impact sur la propriété length de la fonction ni sur l'objet arguments.

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

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

Les virgules finales peuvent également être utilisées lors des définitions de méthodes dans les objets et les classes :

class C {
  un(a,) {}
  deux(a, b,) {}
}

const obj = {
  un(a,) {},
  deux(a, b,) {},
};

Appels de fonction

Pour chacune des deux paires d'appels qui suivent, les deux appels sont équivalents :

f(p);
f(p,);

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

Virgules finales interdites

Les définitions de paramètres ou les appels de fonctions qui ne contiennent qu'une seule virgule lèveront une exception SyntaxError. Par ailleurs, on ne peut pas utiliser de virgule finale avec les paramètres du reste :

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

On peut aussi utiliser une virgule finale dans l'opérande gauche lorsqu'on utilise l'affectation par décomposition :

// Décomposition d'un tableau avec
// une virgule finale
[a, b,] = [1, 2];

// Décomposition d'un objet avec une
// virgule finale
const o = {
  p: 42,
  q: true,
};
const { p, q, } = o;

Là encore, si on utilise un élément du reste, une exception SyntaxError sera levée :

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

Le format JSON est basé sur un sous-ensemble restreint de la syntaxe JavaScript, les virgules finales sont interdites en JSON.

Les deux lignes suivantes lèveront une exception SyntaxError :

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

Pour analyser le JSON correctement, on évitera les virgules finales :

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

Les virgules finales sont valides dans les imports nommés et les exports nommés.

Imports nommés

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

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

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

Exports nommés

export {
  A,
  B,
  C,
};

export { A, B, C, };

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

Les virgules finales sont uniquement autorisées pour les imports dynamiques si le moteur d'exécution implémente le second paramètre options.

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

• Le guide sur la grammaire et les types JavaScript