15 Rules For Writing Clean JavaScript
By: Mohammad Faisal
Tags: JavaScript, Programming, React, Nodejs, Web Development

15 Rules For Writing Clean JavaScript

From the book “Maintainable JavaScript”

Photo by Sarah Dorweiler on Unsplash

So you are a React developer or Node.js developer. You can write code that works. But can you write code that is visually beautiful and understandable by others?

Today we will see some rules to make your JavaScript code clean and clear.

Rule 1. Don’t Use Random Characters as Variable

Don’t use some random character to express a variable.

//BAD const x = 4;

Name your variable properly so that it describes the value properly.

//GOOD const numberOfChildren = 4;

Rule 2. Use camelCase Variable Name

Don’t use snake_case, PascalCase, or a variable name that starts with a verb.

// Bad: Begins with uppercase letter var UserName = "Faisal"; ----- // Bad: Begins with verb var getUserName = "Faisal"; ----- // Bad: Uses underscore var user_name = "faisal";

Instead, use a camel cased variable name that represents a noun.

// Good const userName = "Faisal";

Rule 3. Use Good camelCase Function Name

Don’t use any noun as a function name to avoid confusion with the variable names.

// Bad: Begins with uppercase letter

function DoSomething() {

// code

} ---- // Bad: Begins with noun

function car() {

// code

} ---- // Bad: Uses underscores

function do_something() {

// code

}

Instead, start the name with a verb and use camel case.

//GOOD function doSomething() {

// code

}

Rule 4. Use PascalCase For Constructor Function Naming

// Bad: Begins with lowercase letter

function myObject() {

// code

} ---- // Bad: Uses underscores

function My_Object() {

// code

} ---- // Bad: Begins with verb

function getMyObject() {

// code

}

Also, Constructor function names should begin with a non verb because new is the action of creating an object instance.

// GOOD function MyObject() {

// code

}

Rule 5. Global Constants

Global constants whose value doesn't change should not be named like normal variables.

// BAD const numberOfChildren = 4; // BAD const number_of_children = 4;

They should be all upper case and separated with underscores.

// GOOD const NUMBER_OF_CHILDREN = 4;

Rule 6. Assignment to Variable

Don’t assign a comparison value to a variable without parentheses.

// BAD const flag = i < count;

Use parentheses around the expression:

// GOOD const flag = (i < count);

Rule 7. Usage of Equality Operators

Don't use “==” or “!=” to compare values. Because they don't type check before comparison.

//BAD if (a == b){

//code

}

Instead, always use “===” or “!==” to avoid type coercion errors.

//GOOD if (a === b){

//code

}

Rule 8. Usage of the Ternary Operator

Don’t use the ternary operator as an alternative to if statement:

//BAD condition ? doSomething() : doSomethingElse();

Only use them to assign values based on some condition:

// GOOD const value = condition ? value1 : value2;

Rule 9. Simple Statement

Although JavaScript supports it. Don’t write multiple statements in a single line.

// BAD a =b; count ++;

Instead, have multiple lines for multiple statements. And always use a semicolon at the end of a line.

// GOOD a = b;

count++;

Rule 10. Use of If Statements

Don’t omit the braces from an if statement and never keep them in a single line.

// BAD: Improper spacing

if(condition){

doSomething();

} ---- // BAD: Missing braces

if (condition)

doSomething(); ---- // BAD: All on one line

if (condition) { doSomething(); } ---- // BAD: All on one line without braces

if (condition) doSomething();

Always use braces and proper spacing:

// GOOD if (condition) {

doSomething();

}

Rule 11. Usage of For Loop

Don’t declare the variable in the initialization of a for loop.

// BAD: Variables declared during initialization for (let i=0, len=10; i < len; i++) {

// code

}

Declare them before the loop.

// GOOD let i = 0; for (i=0, len=10; i < len; i++) {

// code

}

Rule 12. Consistent Indentation Length

Stick to using 2 or 4 all the time.

// GOOD if (condition) {

doSomething();

}

Rule 13. Line Length

Any line should not be more than 80 characters. If it’s more than that they should be broken up into a new line.

// BAD: Following line only indented four spaces doSomething(argument1, argument2, argument3, argument4,

argument5); ---- // BAD: Breaking before operator

doSomething(argument1, argument2, argument3, argument4

,argument5);

The second line should be indented 8 spaces instead of 4 and shouldn't start with a separator.

// GOOD

doSomething(argument1, argument2, argument3, argument4,

argument5);

Rule 14. Primitive Literals

Strings shouldn’t use a single quote.

// BAD const description = 'this is a description';

Instead, they should always use double-quotation

// GOOD const description = "this is a description";

Rule 15: Use of “undefined”

Never use the special value undefined.

// BAD if (variable === "undefined") {

// do something

}

To see if a variable has been defined, use the typeof operator

// GOOD if (typeof variable === "undefined") {

// do something

}

So by following these rules you can make your JavaScript projects cleaner.

These rules are taken from the book “Maintainable Javascript” written by “Nicholas C. Zakas”. So if you don’t agree with some of the points, I guess that’s fine. When it comes to styling there is no single way. But the rules here can be a good starting point for you.

That’s it for today. Happy Coding! :D