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.
Consistent Name for This
If we assign this to a variable, we should set it to a consistent name.
We can pick that , self , or me .
For instance, we write:
const that = this;
jQuery('p').click(function(event) {
that.setFoo(42);
});
or:
const self = this;
or:
let me;
function f() {
me = this;
}
Sticking with one name reduce confusion.
Calls of super() in Constructors
We need to call super before assigning instance variables to values.
For instance, we write:
class A extends B {
constructor() {
super();
this.foo = 'bar';
}
}
We call super before the foo assignment.
This way, we won’t get errors.
We need to call super for subclasses.
We don’t need it for parent classes:
class A {
constructor() {}
}
Following Curly Brace Conventions
We should just put curly braces in our blocks.
Instead of writing:
if (foo) foo++;
or:
if (foo) {
baz();
} else qux();
We write:
if (foo) {
foo++;
}
or:
if (foo) {
baz();
} else {
qux();
}
Then we won’t be confused with where a block starts or ends.
Default Case in Switch Statements
We should put a default case in switch statements.
This way, we handle cases that we don’t expect.
For instance, instead of writing:
switch (foo) {
case 1:
doWork();
break;
case 2:
doWork();
break;
}
We write:
switch (foo) {
case 1:
doWork();
break;
case 2:
doWork();
break;
default:
// do nothing
}
Default Parameters to be Last
If we put default parameters to be last, then we know that default parameters are always last.
This makes discerning arguments easier.
For instance, instead of writing:
function createUser(isMember = false, id) {}
We can write:
function createUser(id, isMember = false) {}
Now we don’t have any confusion.
Enforce Newline Before and After Dot
Newline usually comes before the dot.
For instance, we can write:
const a = universe
.earth;
instead of:
const a = universe.
earth;
It’s conventional to write it the first way and it’s less confusing.
Dot Notation
Dot notation should be used for most property access code.
Brackets notation should be used for variable properties or properties that aren’t valid identifiers.
For instance, we write:
const x = foo.bar;
instead of:
const x = foo["bar"];
But we can write:
const x = foo[bar];
or:
const x = foo['bar baz'];
Identifiers can’t have spaces so we can use bracket notation to access those.
Newline at the End of Files
Newlines at the end of the file make concatenating files together correctly easier, so we should have them.
For instance, instead of writing:
function work() {
var foo = 2;
}
We write:
function work() {
var foo = 2;
}
Return Statements can Return Nothing
We don’t have to return something with return .
It can just be used to end execution of a function.
For instance, we can write:
function doWork(condition) {
if (condition) {
return;
} else {
return true;
}
}
return can return nothing to end a function earlier.
This reduces nesting since the example above is the same as:
function doWork(condition) {
if (condition) {
return;
}
return true;
}
Require === and !==
=== and !== should be used for comparison.
They compare the type and the content and don’t do type coercion.
For instance, instead of writing:
[] == false
we write:
[] === false
And instead of writing:
'hello' != 'world'
We write:
'hello' !== 'world'
“for” Loop Update Clause Moving the Counter in the Right Direction
We should make sure that the loop counter moves in the right direction so that we don’t get an infinite loop.
For instance, instead of writing:
for (var i = 0; i < 10; i--) {
}
We write:
for (var i = 0; i < 10; i++) {
}
Conclusion
We should make sure we don’t make infinite loops accidentally.
Also, we should make sure that super and this should be used properly in classes.
A default case is also useful for switch statements.
