To make code easy to read and maintain, we should follow some best practices.
In this article, we’ll look at some best practices we should follow to make everyone’s lives easier.
Return After Callback
If we call a callback early, we should add a return to it so that we don’t run the code below it.
It doesn’t matter what the callback returns.
For instance, instead of writing:
const foo = (err, callback) => {
if (err) {
callback(err);
}
callback();
}
We write:
const foo = (err, callback) => {
if (err) {
return callback(err);
}
callback();
}
The return ends the execution of foo so the code outside the if won’t run.
Require CamelCase
Camel case is used for most identifiers.
Variable, property, and function names should be camel case.
For instance, instead of writing:
function do_work() {
// ...
}
or:
function foo({ no_camelcased }) {
// ...
};
or:
const { category_id = 1 } = query;
We write:
function doWork() {
// ...
}
or:
function foo({ camelCased }) {
// ...
};
or:
const { categoryId = 1 } = query;
Capitalization of the First Letter of a Comment
Comments can be sentences or short clauses.
They are both fine.
We don’t always need to write complete sentences.
For instance, we can write:
// Capitalized comment
or:
/* eslint semi:off */
We can write anything in our comments.
Enforce that Class Methods Use this
If we define instance methods, we should reference this .
For instance, we can write:
class A {
constructor() {
this.a = "foo";
}
print() {
console.log(this.a);
}
sayHi() {
console.log("hi");
}
}
instead of:
class A {
constructor() {
this.a = "foo";
}
sayHi() {
console.log("hi");
}
}
We should make them static if we don’t reference this :
class A {
constructor() {
this.a = "foo";
}
static sayHi() {
console.log("hi");
}
}
Brace Style
The most common JavaScript brace style is like this:
if (foo) {
bar();
} else {
baz();
}
We have the braces as the same line as the keywords.
Trailing Commas
Trailing commas make moving objects entries easier and make diffs cleaner.
So we can write:
const obj = {
bar: "foo",
qux: "baz",
};
Spacing Around Commas
Spacing around commas makes items easy to read.
For instance, we can write:
const foo = 1, bar = 2;
or:
const arr = [1, 2];
or:
const obj = {"foo": "bar", "baz": "qur"};
instead of:
const foo = 1,bar = 2;
or:
const arr = [1,2];
or:
const obj = {"foo": "bar","baz": "qur"};
A space character makes reading things easier.
Comma Style
We put commas after an entry.
For instance, instead of writing;
const foo = ["apples"
, "oranges"];
or:
const foo = 1
, bar = 2;
or:
const foo = 1
,
bar = 2;
We write:
const foo = 1,
bar = 2;
const foo = 1,
bar = 2;
const foo = ["apples",
"oranges"
];
const obj = {
"a": 1,
"b": 2
};
}
We keep the commas after an item.
Limit Cyclomatic Complexity
To make our code easier to understand, we can limit the paths of the code.
For instance, we can limit the number of paths to 2.
We instead of writing:
function a(x) {
if (true) {
return x;
} else if (false) {
return x + 1;
} else {
return 2;
}
}
We write:
function a(x) {
if (true) {
return x;
} else if (false) {
return x + 1;
}
}
We reduce the number of branches in our if statements.
Spaces Inside of Computed Properties
Computed properties don’t need spaces.
For instance, we write:
const a = "prop";
const x = obj[a];
or:
const obj = {
[a]: "value"
};
instead of:
const a = "prop";
const x = obj[ a ];
or:
const obj = {
[a ]: "value"
};
Conclusion
We should have spaces where it’s appropriate.
Also, we should return early in our functions to stop the code below it from running.
If we have instance methods, we should reference this in it.
Comments can have any case.
