15 simple JS coding standards to make your code cleaner

The author | Daniel Anderson

This article originally appeared on Medium. It has been translated and shared with permission from the author.

Coding standards can help with:

• Keep code consistent
• Easy to read and understand
• Easy to maintain

The following coding standards are my helpful thoughts on the above points.

1. Use === instead of == for comparison

This is important because JavaScript is a dynamic language, so using == can give you unexpected results because it allows for different types.

Fail:

if (val == 2)

Copy the code

Pass:

if (val === 2)

Copy the code

2. Never use var, use let instead

Using lets will help avoid the scoping problems caused by the various var’s in JavaScript.

Fail:

var myVar = 10;

Copy the code

Pass:

let myVar = 10;

Copy the code

3. Use const instead of let

This prevents developers from trying to change things they shouldn’t do, and really helps with readability.

Fail:

let VAT_PERCENT = 20;

Copy the code

Pass:

const VAT_PERCENT = 20;

Copy the code

4. Always use semicolons (;)

Although this is optional in JavaScript, semicolons are not required as statement terminators in other languages. But use; Helps keep the code consistent.

Fail:

const VAT_PERCENT = 20;

let amount = 10

return addVat(amount, vatPercent)

Copy the code

Pass:

const vatPercent = 20;

let amount = 10;

return addVat(amount, vatPercent);

Copy the code

5. Naming conventions in JavaScript

• Lets should be named hump.

• Const if uppercase snake nomenclature is used at the top of the file. If not at the top of the file, use the camel name.

• Class should be the PASCAL nomenclature :MyClass

• Functions should be hump nomenclature :myFunction

6. Use template strings when concatenating strings

Embedding expressions is allowed in template strings.

Fail:

let fullName = firstName + "" + lastName;

Copy the code

Pass:

let fullName = `${firstName} ${lastName}`;

Copy the code

7. Use ES6 arrow functions whenever possible

The arrow function is a more concise syntax for writing function expressions.

Fail:

var multiply = function(a, b) {

  return a* b;

};

Copy the code

Pass:

const multiply = (a, b) = > { return a * b};

Copy the code

8. Always use curly braces around control structures

All control structures must use curly braces (for example, if, else, for, do, while, etc.) so that later maintenance is less prone to errors.

Fail:

if (valid)

   doSomething();

if (amount > 100) 

    doSomething();

else if(amount > 200)

    doSomethingElse();

Copy the code

Pass:

if (valid) {

   doSomething();

}

if (amount > 100) {

   doSomething();

} 

else if(amount > 200) {

    doSomethingElse();

}

Copy the code

9. Make sure the braces start on the same line with Spaces between them

Fail:

if (myNumber === 0)

{

    doSomething();

}

Copy the code

Pass:

if (myNumber === 0) {

    doSomething();

}

Copy the code

10. Try to reduce nesting

The if inside the if becomes confusing and difficult to read. Sometimes you won’t be able to solve the problem, but take a good look at the structure of the code and see if you can improve it.

Fail:

if (myNumber > 0) {

  if (myNumber > 100) {

       if(! hasDiscountAlready) {

           return addDiscountPercent(0);

       } else {

           return addDiscountPercent(10);

       }

  } else if (myNumber > 50) {

    if (hasDiscountAlready) {

       return addDiscountPercent(5);

    }

  } else {

    if(! hasDiscountAlready) {

      return addDiscountPercent(0);

    } else {

      return addDiscountPercent(1);

    }

  }

} else {

     error();

}

Copy the code

Pass:

if (myNumber <= 0) {

   return error;

}

if(! hasDiscountAlready) {

    return addDiscountPercent(0);

}

if (myNumber > 100) { 

    return addDiscountPercent(10);

}

if (myNumber > 50) { 

    return addDiscountPercent(5);

}

return addDiscountPercent(1);

Copy the code

As you can see from the above example, when you reduce nesting, it becomes easier to read.

11. Use default parameters whenever possible

In JavaScript, if you call a function without passing an argument, its value is undefined

Fail:

myFunction(a, b) {

  return a + b;

}

Copy the code

Pass:

myFunction(a = 0, b = 0) { 

   return a + b;

}

Copy the code

12. The ‘Switch’ statement should use ‘break’ and have ‘default’

I usually try not to use the switch statement, but if you really want to use it, make sure every condition breaks and write defalut.

Fail:

switch (myNumber)

{

  case 10: 

   addDiscountPercent(0);

  case 20: 

   addDiscountPercent(2);

  case 30:

   addDiscountPercent(3);

}

Copy the code

Pass:

switch (myNumber)

{

  case 10: 

    addDiscountPercent(0);

    break;

  case 20: 

    addDiscountPercent(2);

    break;

  case 30:

    addDiscountPercent(3);

    break;

  default: 

    addDiscountPercent(0);

    break;

}

Copy the code

13. Do not use wildcard imports

Fail:

import * as Foo from './Foo';

Copy the code

Pass:

import Foo from './Foo';

Copy the code

14. Use Boolean shortcuts

Fail:

if (isValid === true)

if (isValid === false)

Copy the code

Pass:

if (isValid)

if(! isValid)

Copy the code

15. Try to avoid unnecessary ternary statements

Fail:

const boo = a ? a : b;

Copy the code

Pass:

const boo = a || b;

Copy the code

conclusion

Coding standards in any language can really help improve the readability and maintainability of your application. If you work in a team, one of the hardest things to do is enforce coding standards. Here are some tips to help you:

• Code review, line by line Pass code.
• Tidy up or use some kind of code analyzer
• When creating new content, have one of your senior developers initialize it, and other developers can use the code as a guide.

Original link: https://medium.com/javascript-in-plain-english/19-simple-javascript-coding-standards-to-keep-your-code-clean-7422d6f9bc0