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.
Objects Must Contain a Getter When a Setter is Defined
Objects should have a getter when a setter is defined.
A setter without a getter isn’t very useful, so we should add one.
For instance, we write:
const person = {
set name (value) {
this._name = value
},
get name () {
return this._name
}
}
instead of:
const person = {
set name (value) {
this._name = value
}
}
Constructors of Derived Classes Must Call super
We should call super in derived classes.
For instance, we should write:
class Cat extends Animal {
constructor () {
super()
this.legs = 4;
}
}
We’ll get an error if we don’t call super before setting properties in our class as we did in the example.
Use Array Literals Instead of Array Constructors
The Array constructor just adds extra complexity to our array declarations.
It does 2 different things.
If it has one argument passed into it, then it returns an empty array with the number of empty slots in the array.
Otherwise, it returns an array with the arguments we passed in.
Therefore, we should just use array literals.
For example, we write:
const nums = [1, 2, 3];
instead of:
const nums = new Array(1, 2, 3);
Don’t Use arguments.callee and arguments.caller
We shouldn’t use any properties in the arguments object, including the callee and caller properties.
They make code optimizations impossible. Also, they’re deprecated and are forbidden in strict mode.
Therefore, we should never use them.
Don’t Modify Variables of Class Declarations
If we have a class, then we shouldn’t assign it to something else.
This will avoid lots of confusion.
For instance, we shouldn’t have code like:
class Dog {}
Dog = 'woof';
That’s just confusing.
Avoid Modifying Variables Declared Using const
Reassigning a const variable with a new value will give us an error.
Therefore, we shouldn’t do that.
For instance, we shouldn’t have:
const score = 100;
score = 125;
Instead, we can remove the second line or create a new variable an assign the value to it.
No Constant Expressions in Conditional Statements
Constant expressions aren’t very useful in conditional statements.
This is because they always evaluate to the same thing, so it’s useless to have the conditional statement.
For example, we shouldn’t have code like:
if (false) {
// ...
}
The code inside the block never runs since we have false as the condition.
However, we can have them in loops:
while (true) {
// ...
}
since we may want infinite loops.
No Control Characters in Regular Expressions
We shouldn’t have control characters in regexes.
They are invisible and they’re rarely used in JavaScript strings.
Therefore, it’s probably a mistake that we include them.
So we shouldn’t have code like:
const re = /x1f/;
No debugger Statements
The debugger statement is used for adding breakpoints in our code so that we can inspect the variables.
However, we should remember to remove them when we’re done with them so that our app won’t pause when it’s in production.
No delete Operator on Variables
The delete operator is used for removing properties.
Therefore, they shouldn’t be used on variables.
So we shouldn’t write:
let foo;
delete foo;
No Duplicate Arguments in Function Signatures
We should never have duplicate arguments in function signatures.
It’s invalid syntax and will give us unexpected results.
For example, we shouldn’t write:
function sum (a, a, b) {
// ...
}
Instead, we write:
function sum (a, b, c) {
// ...
}
No Duplicate Name in Class Members
We shouldn’t have 2 class members with the same name.
That will yield unexpected results.
For example, we shouldn’t have:
class Cat {
meow() {}
meow() {}
}
We should name them with different names.
Conclusion
We shouldn’t use operators in invalid ways in our JavaScript code.
Also, we shouldn’t have duplicate expressions where we shouldn’t have them.
Any extraneous characters and debugger statements should be removed from our code.
