Discuss
  • Trailing commas in arguments list, imports and destructuring

Trailing commas in arguments list, imports and destructuring

# Jussi Kalliokoski (10 years ago)

I just noticed that Babel support trailing commas in function arguments lists, imports and destructuring as well:

babeljs.io/repl/#?experimental=true&evaluate=true&loose=false&spec=false&code=import { voo%2C doo%2C } from ".%2Fdat.js"%3B let { x%2C y%2C } %3D voo%3B let [ z%2C m%2C ] %3D doo%3B function qoo ( x%2C y%2C ) {}

Is this correct behavior? I'm not

FWIW as I already use trailing commas object and array literals for better diffs, I really like this feature as it comes in handy especially in function signatures where you define types (TypeScript/flow style annotations), for example:

function sort <T> ( array : Array<T>, compareFn : ((left: T, right: T) => number), ) : Array<T> { ... }

as well as import statements for modules that declare constants:

import { BRAND_COLOR, DEFAULT_TEXT_COLOR, DARK_GRAY, LIGHT_GRAY, } from "./constants/COLORS";

not to mention "options object" style function signatures:

class Person { constructor ({ firstName, lastName, birthDate, country, city, zipCode, }) { this.firstName = firstName; this.lastName = lastName; this.birthDate = birthDate; this.country = country; this.city = city; this.zipCode = zipCode; } }

To me, the spec language as per Jason's HTML version looks like at least for destructuring this is supported, but at least I can't read the spec to allow trailing commas in function signatures. At least this doesn't seem to be incorporated into the spec:

esdiscuss.org/notes/2014-09/trailing_comma_proposal.pdf

Is the proposal still on track for ES7 and am I correct in my reading of the destructuring allowing trailing commas?

# Sebastian McKenzie (10 years ago)

Note that you’ve got the experimental REPL option enabled which means all transformers are enabled which includes the es7.trailingFunctionCommas one which allows trailing commas in function parameter lists and call expressions.

The destructuring grammar does allow trailing commas (people.mozilla.org/~jorendorff/es6-draft.html#sec-destructuring-binding-patterns):

ObjectBindingPattern[Yield,GeneratorParameter] :

{ BindingPropertyList[?Yield,?GeneratorParameter] , }

ArrayBindingPattern[Yield,GeneratorParameter] :

[ BindingElementList[?Yield, ?GeneratorParameter] , Elisionopt BindingRestElement[?Yield, ?GeneratorParameter]opt]

And import specifiers allow trailing commas too (people.mozilla.org/~jorendorff/es6-draft.html#sec-imports

):

NamedImports :

{ ImportsList , }

# Michael Ficarra (10 years ago)

See tc39/ecma262. This proposal is currently at stage one. To find out more about what that means, read the process document docs.google.com/document/d/1QbEE0BsO4lvl7NFTn5WXWeiEIBfaVUF7Dk0hpPpPDzU .

# Jussi Kalliokoski (10 years ago)

Thanks! Had completely missed that GH repo's existence. :)

Cool that this is moving forward!

Thanks to Sebastian for the explanation as well!