Virgules finales (trailing commas) - JavaScript | MDN

Basculer la barre latérale

Thème

Automatique
Clair
Sombre

Français

Se souvenir de la langue En savoir plus

Virgules finales (trailing commas)

Baseline Large disponibilité *

Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

* Certaines parties de cette fonctionnalité peuvent bénéficier de prise en charge variables.

Les virgules finales (trailing commas en anglais) s'avèrent utiles lorsqu'on souhaite ajouter de nouveaux éléments, paramètres ou de nouvelles propriétés à du code JavaScript. Si on souhaite ajouter une propriété en fin de course, on peut simplement ajouter une ligne sans avoir à modifier la précédente si celle-ci utilise une virgule finale. Cela permet d'avoir des vues de différences (diffs) plus claires et de simplifier l'édition de code.

Les virgules finales peuvent être utilisées dans les littéraux de tableau depuis le début. Elles sont désormais utilisables dans la liste des paramètres d'une fonction, les imports nommés, les exports nommés, etc.

JSON, en revanche, ne permet pas d'utiliser des virgules finales.

Dans cet article

Description

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 :

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.

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

Exemples

Les virgules finales dans les littéraux

Tableaux

JavaScript ignore les virgules finales dans les tableaux :

js
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.

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

Objets

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

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

Les virgules finales dans les fonctions

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.

js
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 :

js
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 :

js
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 :

js
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 décomposition

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

js
// 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 :

js
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 lèveront une exception SyntaxError :

js
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 :

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

Virgules finales pour les imports et exports nommés

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

Imports nommés

js
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

js
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 autorisées pour les imports dynamiques si le moteur d'exécution implémente le second paramètre options.

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

Quantificateur pour les expressions rationnelles

Note : Dans un quantificateur, une virgule finale change la sémantique et passe de « exactement n » à « au moins n ».

js
/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?/