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.
Don’t Use of the null Literal
Using undefined for everything is better than using null and undefined .
So we just stick with undefined for everything.
For instance, instead of writing:
let foo = null;
or:
if (bar == null) {}
We write:
let foo;
or:
if (foo === null) {}
No process.exit()
We don’t want to use process.exit to exit code.
It exists the program abruptly without giving it a chance to clean up.
Instead of writing:
process.exit(0);
We write:
process.on('SIGINT', () => {
console.log('Got SIGINT');
process.exit(1);
});
Use Array#reduce() and Array#reduceRight()
reduce and reduceRight make code hard to read.
They can replaced with map , filter or the for-of loop.
For instance, instead of writing:
array.reduce(reducer, initialValue);
We write:
let result = initialValue;
for (const element of array) {
result += element;
}
No Unreadable Array Destructuring
If we write an array destructuring code, then we should make them readable.
For instance, instead of writing:
const [, , foo] = parts;
We write:
const [foo] = parts;
No Unused Object Properties
If we have object properties that aren’t used, then we may want to remove them.
For instance, instead of writing:
const obj = {
used: 1,
unused: 2
};
console.log(obj.used);
We write:
const obj = {
used: 1
};
console.log(obj.used);
No Useless undefined
We shouldn’t use undefined in places where they aren’t usefil.
For instance, instead of writing:
let foo = undefined;
const {
foo = undefined
} = bar;
const baz = () => undefined;
function foo() {
return undefined;
}
function* foo() {
yield undefined;
}
function foo(bar = undefined) {}
function foo({
bar = undefined
}) {}
foo(undefined);
We write:
let foo;
const {
foo
} = bar;
const baz = () => {};
function foo() {
}
function* foo() {
}
function foo(bar) {}
function foo({
bar
}) {}
foo();
We don’t need a function that return undefined .
And should return or yield undefined since they’re done automatically.
No Number Literals with Zero Fractions or Dangling Dots
We don’t want to add dangling dots or zero fractions since they’re redundant.
For instance, instead of writing:
const foo = 1.0;
const foo = -1.0;
const foo = 1.;
We write:
const foo = 1;
const foo = -1;
const foo = 1;
Enforce Proper Case for Numeric Literals
We should have proper casing for numeric literals.
For instance, instead of writing:
const foo = 0XFF;
const foo = 0B10;
const foo = 0O76;
We write:
const foo = 0xFF;
const foo = 0b10;
const foo = 0o76;
Use .addEventListener() and .removeEventListener() Over on-Functions
Instead of using on functions for adding event listeners, we can use addEventListener and removeListener .
With addEventListener , we can add and remove the listener.
We can also specify capture mode rather than bubbling.
Also, we can register an unlimited number of handlers.
It also separates logic from the document structure.
And confusion with correct event names is eliminated.
on- properties don’t respond to mistakes properly.
We can assign anything to it and get no errors, which isn’t good.
Therefore, instead of writing:
foo.onclick = () => {};
We should write:
foo.addEventListener('click', onClick);
and:
foo.removeEventListener('click', onClick);
Use .dataset on DOM Elements over .setAttribute
Instead of using the setAttribute property to set custom attributes, we can use the dataset property instead.
It’s harder to make mistakes with it.
For instance, instead of writing:
element.setAttribute('data-foo', 'bar');
We write:
element.dataset.foo = 'bar';
Use KeyboardEvent#key over KeyboardEvent#keyCode
The keyCode property is deprecated. So we should use the key property to check for key codes.
For instance, instead of writing:
window.addEventListener('keydown', event => {
console.log(event.keyCode);
});
We write:
window.addEventListener('keydown', event => {
console.log(event.key);
});
Conclusion
We should use undefined instead of null .
Also, we should use addEventListener and removeEventListener instead of using on functions.
Loops and other array methods are better than reduce since the code is more readable.
