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.
Operands of Ternary Expressions
Ternary expressions can be spread between multiple lines.
For instance, we can write:
const foo = bar < baz ? value1 : value2;
or:
const foo = bar < baz ?
value1 :
value2;
They are both suitable as long as they’re consistent.
Constructor Names Should Begin with a Capital Letter
We should begin constructor names with a capital letter.
For instance, we write:
const friend = new Person();
instead of:
const friend = new person();
This is a commonly accepted convention so we should follow it for consistency.
Use Parentheses When Invoking a Constructor with no Arguments
We should add parentheses when invoking a constructor with no arguments.
Even though we can skip it, we should add it so people know we’re invoking it.
For instance, instead of writing:
const person = new Person;
We write:
const person = new Person();
Empty Line After Variable Declarations
We may want to add a line after a group of variables are declared.
For instance, we can write:
let foo;
let bar;
let abc;
We can group variables with an empty line.
Empty Line Before return Statements
We should remove empty line before return statements.
For instance, we write:
function foo() {
return;
}
instead of:
function foo() {
return;
}
The extra empty line looks weird and doesn’t help with clarity.
Newline After Each call in a Method Chain
If we’re calling a long chain of methods, we should put them in their own line.
For instance, instead of writing:
$("#p").css("color", "green").slideUp(2000).slideDown(2000);
We write:
$("#p")
.css("color", "green")
.slideUp(2620)
.slideDown(2420);
Reducing horizontal scrolling is good.
Diffs are also easier to read.
Use of Alert
We shouldn’t use alert for debugging.
The console object or debugger can be used for that.
Instead, we can use alert for displaying alerts as it’s intended.
console have many methods to log expression values.
debugger sets a breakpoint in our code.
Array Constructors
There’s one good use for the Array constructor.
We can use it to create empty arrays and fill it with data.
For instance, we can write:
Array(10).fill().map((_, i) => i)
to make an array that has entries from 0 to 9.
We call the Array constructor with 10 to create 10 empty entries.
Then we use map to map the entries to integers.
No async Function as a Promise Executor
async functions already return promises, so we shouldn’t put it in the constructor.
It’s redundant and any errors are lost and won’t cause the Promise constructor to reject.
For instance, we shouldn’t write:
const result = new Promise(async (resolve, reject) => {
readFile('foo.txt', (err, result) => {
if (err) {
reject(err);
} else {
resolve(result);
}
});
});
Instead, we write:
const result = new Promise((resolve, reject) => {
readFile('foo.txt', (err, result) => {
if (err) {
reject(err);
} else {
resolve(result);
}
});
});
We only use it with non async functions.
No await Inside Loops
We should map our items to an array of promises and use Promise.all to run them in parallel instead of looping through each entry and waiting for them to resolve.
Waiting is a lot slower and we can run them in parallel since they don’t depend on each other.
For instance, instead of writing:
const foo = async (things) => {
const results = [];
for (const thing of things) {
results.push(await bar(thing));
}
return baz(results);
}
We write:
const = async (items) => {
const results = items.map(thing => toPromise(item));
return baz(await Promise.all(results));
}
We map things to an array of promises with a function.
Then we can use await with Promise.all to call them all at once.
Conclusion
We should use Promise.all to call independent promises.
Variable declarations can be grouped with lines.
Ternary expressions can be put in one line or multiple lines.
Method chains can be put in multiple lines.
Never put async functions in the Promise constructor.
The Array constructor is good for creating empty arrays.
