Virgules finales (trailing commas)

Description

JavaScript permet d'utiliser des virgules finales tout endroit o une liste de valeurs spares par des virgules est accepte et o plus de valeurs pourraient tre attendues aprs le dernier lment. Cela inclut :

• Les littraux de tableau
• Les littraux objet
• Les dfinitions de paramtres
• Les appels de fonction
• Les imports nomms
• Les exports nomms
• Les imports dynamiques
• Les virgules finales et la dcomposition

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

La virgule finale sert notamment pour ajouter, retirer ou rordonner les lments d'une liste crite sur plusieurs lignes, car elle rduit le nombre de lignes modifier, ce qui facilite l'dition et la revue de diffrence de code.

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

Exemples

Les virgules finales dans les littraux

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 utilises, cela cre 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 mthodes Array.prototype.forEach() ou Array.prototype.map(), par exemple, ces vides sont ignors. De faon gnrale, les tableaux parsems possdent d'autres inconvnients, 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 littraux objets :

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

Les virgules finales dans les fonctions

Les virgules finales peuvent tre utilises dans la liste des paramtres d'une fonction.

Dfinition des paramtres

Pour chacune des deux paires de dfinitions qui suivent, les deux dfinitions sont autorises et quivalentes entre elles. Les virgules finales n'ont pas d'impact sur la proprit length de la fonction ni sur l'objet arguments.

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

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

Les virgules finales peuvent galement tre utilises lors des dfinitions de mthodes 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 dfinitions de paramtres ou les appels de fonctions qui ne contiennent qu'une seule virgule lveront une exception SyntaxError. Par ailleurs, on ne peut pas utiliser de virgule finale avec les paramtres 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 ','

Les virgules finales et la dcomposition

On peut aussi utiliser une virgule finale dans l'oprande gauche lorsqu'on utilise l'affectation par dcomposition :

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

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

L encore, si on utilise un lment du reste, une exception SyntaxError sera leve :

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

Les virgules finales en JSON

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 lveront 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 }');

Virgules finales pour les imports et exports nomms

Les virgules finales sont valides dans les imports nomms et les exports nomms.

Imports nomms

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 nomms

export {
  A,
  B,
  C,
};

export { A, B, C, };

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

Virgules finales pour l'import dynamique

Les virgules finales sont uniquement autorises pour les imports dynamiques si le moteur d'excution implmente le second paramtre options.

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

Quantificateur pour les expressions rationnelles

/x{2}/; // Exactement 2 occurrences de "x" ; quivalent  /xx/
/x{2,}/; // Au moins 2 occurrences de "x" ; quivalent  /xx+/
/x{2,4}/; // 2  4 occurrences de "x" ; quivalent  /xxx?x?/

Spcifications

Compatibilit des navigateurs

Voir aussi

• Le guide sur la grammaire et les types JavaScript