ECMAScript 2015: With Great Power Comes Great Responsibility

Last summer a revolutionary version of ECMAScript was released with native classes, modules, arrow functions and many other long-awaited features.

Accordingly, the latest release of the Sonarqube JavaScript plugin has a bunch of new rules targeting ES2015 syntax. With our new rules we try to enforce some conventions which have already become the standard in JavaScript world.

Let’s go through some of them.

Put parameters with default values at the end

Otherwise your default values will be pointless: the only way to benefit from them will be to pass undefined. It’s not pretty, is it?
Rule Function parameters with default values should be last

Be neat: use destructuring

The new ES ability to destructure objects and arrays allows you to declare variables initialized with object properties of the same names in a very compact way. Instead of this:

var name = person.name, age = person.age, address = person.address, email = person.email;

do this:

var { name, age, address, email } = person;

Much more readable!
Rule Destructuring syntax should be used for assignments

Do not use “var” to declare variables

How many times have you done this

for (var i = 0; i < N; i++) {
// ...
}
for (i=0; i < N; i++) {
// ...
}

Or even worse: used "var" in front of "i" in the second loop (which does nothing in fact). When you do this, "i" is available in the entire function scope, and there were no way to avoid it. But with ES2015 you have the “let" and “const" keywords, which create block-scope variables (e.g. in the code "i" will be available only inside a loop). Try hard to think of a case when "var" is a better solution.
To find every use of the old-world “var" declaration, use rule Variables should be declared with "let" or "const".

Use “const" whenever possible

Read-only variables always make code more stable, but it’s hard to get used to this approach due to the dynamic nature of JS. So start with the variables you don’t update: declare them with “const" keyword (rule Unchanged variables should be marked "const").

Do not update constants

It sounds stupid, but most current browser implementations of const simply ignore updates to variables.

const name = “John";
…
name = “Michael";
foo(name);  // name is “John" at this point

Attempts should not be made to update "const" variables

ES2015 is ready to use. The most annoying problems with JavaScript are solved: modules, classes, variable scoping became standards. The community is full of tutorials and articles on these new JavaScript features. And despite the fact that not all of them are supported by browsers yet, you can transpile your code to an older version of JS without losing functionality. Yes, you add an extra step to your workflow, but you gain a codebase that’s easier to read and much more reliable.

Don’t be afraid to use something new: SonarQube is here to help you to avoid the common traps!

© 2008-2016, SonarSource S.A, Switzerland. All content is copyright protected. SONARQUBE, SONARLINT and SONARSOURCE are
trademarks of SonarSource SA. All other trademarks and copyrights are the property of their respective owners. All rights are expressly reserved.