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.
Placing Object Properties on Separate Lines
We should place object properties on separate lines if we have many of them.
For instance, instead of writing:
const obj = {a: 1, b: [2, {c: 3, b: 4}]};
We write:
const obj = {
a: 1,
b: [2, {
c: 3,
b: 4
}]
};
Now it won’t overflow the page.
Object Literal Shorthand Syntax
We should use the literal shorthand syntax to save typing and space.
For instance, instead of writing:”
const bar = {
x: x,
y: y,
z: z,
};
We write:
const bar = {
x,
y,
z,
};
For methods, instead of writing:
const bar = {
x: function(){},
y: function(){}
};
We write:
const bar = {
x(){},
y(){}
};
Newlines Around Variable Declarations
We want to add new lines to variable declarations if they’re long.
If we have:
var a, b;
Then we can leave it.
If it’s longer, then we break them into their own lines.
Linebreak Style for Operators
We can place the line breaks where we want as long as we’re consistent.
For instance, we can write:
const fullHeight = paddingTop +
innerHeight +
paddingBottom;
or:
const fullHeight = paddingTop
+ innerHeight
+ borderBottom;
No Padding within Blocks
We can skip paddinbg within blocks.
For instance, instead of writing:
if (a) {
b();
}
We write:
if (a) {
b();
}
Padding Lines Between Statements
We can add padding lines between statements to group them.
For instance, we can write:
function foo() {
let a = 1;
return a;
}
Using Arrow Functions for Callbacks
If we don’t need to reference their ownthis in our callback, then we should use arrow functions for callbacks.
For instance, instead of writing:
foo(function(a) { return a; });
We write:
foo(a => a);
Use const
We can declare constants with const .
We can’t assign them to a new value once we defined it.
For instance, we can write:
const a = 0;
or:
for (const a of [1, 2, 3]) {
console.log(a);
}
Prefer Destructuring from Arrays and Objects
We can use the destructuring assignment syntax for arrays of objects.
They let us break their entries into variables.
For instance, instead of writing:
const foo = array[0];
We write:
const [foo] = array;
And instead of writing:
const foo = object.foo;
We write:
const { foo } = object;
Replace Math.pow in favor of the ** Operator
We can do exponentiation with the ** operator instead of using Math.pow .
It’s shorter and we don’t have to call a method.
Instead of writing:
const foo = Math.pow(2, 8);
We write:
const foo = 2 ** 8;
Use Named Capture Group in Regular Expression
Since ES2018, we can name our capture groups.
This makes the pattern clearer for everyone.
For instance, instead of writing:
const regex = /(?d{4})/;
We write:
const regex = /(?<year>d{4})/;
Now we know we’re looking for the year number.
Replace parseInt() and Number.parseInt() with Binary, Octal, and Hexadecimal Literals
We can replace parseInt and Number.parseInt calls with the number literals instead.
For instance, instead of writing:
parseInt("1010101", 2)
and:
Number.parseInt("1010101", 2)
We can write:
0b1010101
It’s much shorter.
Use Object Spread Over Object.assign
We can use the spread operator with objects,
Therefore, we should use them since it’s shorter.
For instance, instead of writing:
Object.assign({}, {foo: 'bar'})
We write:
const obj = {foo: 'bar'};
const copy = {...obj};
Use Error Objects as Promise Rejection Reasons
We should use Error instances for promise rejection reasons.
They include the stack trace, which tells us useful information for debugging.
We need it to find where the error comes from.
For instance, instead of writing:
Promise.reject('error');
We write:
Promise.reject(new Error("error"));
Conclusion
The Error instance tells us more information than other objects for errors.
We can also format our code with linebreaks and spaces.
With new syntax, we can write less code.
They include the object spread, exponentiation, and destructuring assignments syntax.
Also, we can use named capture groups for regex.
