Trailing comma in ECMAScript 2017 function parameter list
Object and array literals allow us to leave a comma dangling off the final item since the third version of ECMAScript (although the implementation in IE8 and below is a clear exception). Other programming languages (Python, D, Hack and probably many more) allow it in functions as well. JavaScript will be joining this list very soon people! Jeff Morrison is the author of the Trailing Commas in Function Param Lists proposal that is going to be merged with the upcoming ECMAScript 2017 spec. If you don’t know what the heck I’m talking about, have a look at this basic example.
// Array without trailing comma
const someArray = [
'pawel',
29
];
// Array with trailing comma
const someArray = [
'pawel',
29,
];
// Object without trailing comma
const someObject = {
name: 'pawel',
age: 29
};
// Object with trailing comma
const someObject = {
name: 'pawel',
age: 29,
};
// Function declaration without trailing comma
function someFunction(
name,
age
) {
// blah blah blah
}
// Function declaration with trailing comma
function someFunction(
name,
age,
) {
// blah blah blah
}
// Function invocation without trailing comma
someFunction(
'pawel',
29
);
// Function invocation with trailing comma
someFunction(
'pawel',
29,
);
This article is not one of those stylistic dilemmas like “semicolon or die”. In my opinion it is 100% about personal preference. Let’s talk a bit about the benefits of the new feature and how to deal with it now.
Nice VCS diff and easier code manipulations
The new feature won’t supercharge the output of your app whatsoever but can definitely benefit your codebase manipulation and maintainability. Here’s a few reasons why:
- Nicer to read diffs
- Easier code rearranging
- You can programmatically generate code without extra logic for the last item
Babel to use, ESLint to check
Babel is like a time capsule that allows us to use the syntax of the future today. Babel-preset-es2017 is something worth including in your .babelrc file. As an another confirmed feature that is coming with ES2017 — async functions support comes with this preset as well.
# install the cli and this preset
npm install --save-dev babel-cli babel-preset-es2017
# make a .babelrc (config file) with the preset
echo '{ "presets": ["es2017"] }' > .babelrc
ESLint is my gramma checker of choice. The comma-dangle allows you to enforce a dangling comma in object and array literals. It doesn’t work with function declarations and invocations yet, but with the recently added support for ES2017 it is just a matter of time. Have a look at the example of this .eslint.js config file that enables this rule.
module.exports = {
'env': {
'browser': true,
'node': true,
},
'extends': 'eslint:recommended',
'parserOptions': {
"ecmaVersion": 2017,
'sourceType': 'module',
},
'rules':
'comma-dangle': [
2,
'always-multiline',
],
},
};
Dangle conclusion
A trailing comma is one of those things that definitely won’t make you a better JavaScript developer. However, it is cool to see the progress of a language after the adoption of a yearly release plan. The spec for 2017 is still shaping up and you can follow the stage of all proposals on the TC39 repository. Personally I’m still digesting the 2015 update. Stay tuned and wait for more articles about upcoming front-end goodies. Until next time pals :*
But there should be a comma at the end of
'front-end-developer'in the “new” example 😅My habits still stronger than examples :-)
I spent a sec and changed incorrect image. Thanks for reporting @simevidas:disqus
someObject should be object, not array, fix that
Thanks for reporting a bug. Fixed.
Paweł, that was the thing in JS which I got caught many times on. I've noticed that improvement, but I didn't thought a one can write an article about that which is worth to read. Anyway, because of that improvements we will get many codebases with that trailing comma left at the end of an object. Who knows if it's a good change ;-) ....
I am not a big fan of trailing commas, but I can live with them. Some people do go on a holy war whether or not to support trailing commas. It's very much like being penny-wise and pound fool.
The article itself is very useful, as most developers have to go through setting up or revising their ESLint configuration, and this is when your resource comes into play right on page 1 of Google. I will link this post in my upcoming article.
Great! Link your article when its ready please! Have a great day!