MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

Virgules finales (trailing commas)

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 été ajoutées dans les littéraux objets à partir d'ECMAScript 5 et ECMAScript 2017 permet de les utiliser dans la liste des paramètres d'une fonction.

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

Les virgules finales dans les littéraux

Tableaux

JavaScript ignore les virgules finales dans les tableaux :

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

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

Objets

À partir d'ECMAScript 5, on peut également utiliser les virgules finales dans les littéraux objets :

var objet = { 
  toto: "truc", 
  bidule: "azerty",
  age: 42,
};

Les virgules finales dans les fonctions

ECMAScript 2017 permet d'utiliser les virgules finales dans la liste des paramètres d'une fonction.

Définitions 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,) {},
}

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

Appels de fonctions

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

f(p);
f(p,);

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

Virgules finales non-autorisées

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

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 :

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

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

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

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

Les virgules finales en JSON

L'utilisation des virgules finales dans les objets a été introduite avec ECMAScript 5. Toutefois, le format JSON est basé sur la syntaxe JavaScript antérieure à ES5 et les virgules finales sont donc interdites en JSON.

Les deux lignes suivantes lèveront une exception 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

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

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

Spécifications

Spécification État Commentaires
ECMAScript 5.1 (ECMA-262) Standard Ajout des virgules finales pour les littéraux objets.
ECMAScript 2015 (6th Edition, ECMA-262) Standard Aucune modification.
ECMAScript 2017 Draft (ECMA-262) Projet ES2017 added trailing function commas.

Compatibilité des navigateurs

Fonctionnalité Chrome Firefox (Gecko) Internet Explorer Opera Safari
Support simple (Oui) (Oui) (Oui) (Oui) (Oui)
Virgule finale dans les littéraux objets (Oui) (Oui) 9 (Oui) (Oui)
Virgule finale dans les fonctions Pas de support 52 (52) Pas de support Pas de support Pas de support
Fonctionnalité Android Chrome pour Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
Support simple (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
Virgule finale dans les littéraux objets (Oui) (Oui) (Oui) (Oui) (Oui) (Oui)
Virgule finale dans les fonctions Pas de support Pas de support 52.0 (52) Pas de support Pas de support Pas de support

Voir aussi

Étiquettes et contributeurs liés au document

 Contributeurs à cette page : SphinxKnight
 Dernière mise à jour par : SphinxKnight,