Like any kind of apps, JavaScript apps also have to be written well.
Otherwise, we run into all kinds of issues later on.
In this article, we’ll look at some best practices we should follow when writing JavaScript code.
No Duplicate Keys in Object Literals
We shouldn’t have duplicate keys in object literals.
This will yield unexpected results.
For example, we shouldn’t write:
const user = {
name: 'james',
name: 'joe'
}
Instead, we should remove them or name them differently.
No Duplicate case Labels in switch Statements
We should’t have duplicate case labels in our switch statements.
For example, we shouldn’t write:
switch (id) {
case 1:
// ...
case 1:
//...
}
Only the first one that matches the id value will run.
Therefore, we should combine them or remove them.
Use Single import Per Module
There should only be one import statemen per module in our code.
For example, we shouldn’t have:
import { f1 } from 'module'
import { f2 } from 'module'
Instead, we write:
import { f1, f2 } from 'module'
We save space and remove duplicates.
No Empty Character Classes in Regexes
Our regexes shouldn’t have empty character classes in them.
It’s probably a mistake to have them.
For instance, we shouldn’t write:
const myRegex = /^abc[]/;
No Empty Destructuring Patterns
If we have empty destructuring patterns, it’s probably a mistake.
Also, we probably meant to assign a default value to an empty object to a variable.
For example, we shouldn’t write:
const { a: {} } = foo
Instead, we write:
const { a = {} } = foo
which will assign an empty object to a if foo.a is undefined .
Or we can write;
const { a: { b } } = foo;
to assign something nested in a to another variable.
Don’t Use eval
eval lets us run code from a string.
This is a security risk since we can run any code inside a string.
Also, it prevents the JavaScript interpreter from optimizing our code.
Therefore, we should never use the eval function.
No Reassigning Exceptions in catch clauses
We should never reassign exceptions in catch clauses.
This will discard the original exception data.
For example, we shouldn’t write;
try {
// ...
} catch (e) {
e = 'value'
}
Instead, we write:
try {
// ...
} catch (e) {
const newVal = 'value'
}
Assigning our value to a new variable is much better than assigning something to the exception object.
Don’t Extend Native Objects
Native objects aren’t meant to be extended.
Therefore, we should just what’s built-in.
Having extra properties in the native objects confuses people and they may be surprised if they don’t exist anywhere else.
For example, we should have code like:
Object.prototype.age = 2
No Unnecessary Function Binding
We only need to call bind on a function if we need to change the value of this inside the function.
Therefore, we shouldn’t call it if we don’t need to do that.
So we shouldn’t write:
const name = function () {
getName()
}.bind(user)
Instead, we write:
const name = function () {
this.getName()
}.bind(user)
No Unnecessary Boolean Casts
If we have a boolean already, then we shouldn’t have to cast them.
For example, if we have:
const result = true;
Then we shouldn’t write:
if (!!result) {
// ...
}
We can just use it as-is:
if (result) {
// ...
}
No Unnecessary Parentheses Around Function Expressions
We don’t need to wrap a function around parentheses.
For instance, we shouldn’t have code like:
const foo = (function () { })
We don’t need the parentheses around the function expression.
Instead, we write:
const foo = function () { }
Use break to Prevent Fallthrough in switch Cases
We should always add break at the end of each case block or statement so that the code below it won’t get executed.
For instance, instead of writing:
switch (filter) {
case 1:
foo()
case 2:
bar()
}
We write:
switch (filter) {
case 1:
foo();
break;
case 2:
bar();
break;
}
Conclusion
If we have bad code like missing break statements, we should add them.
If we have redundant operations like converting a boolean to a boolean, then we should remove them.
Duplicates members and variables should also be eliminated.
