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.
Variable and Function Naming Conventions
We should have variable and function names that are clear.
In JavaScript, names are usually camelCase except for constants and constructors.
For example, we can write:
const firstName = 'james';
We name constants with:
const MAX_RETRIES = 50;
And we name constructors and classes with PascalCase:
class Dog {}
Using Global Variables
We want to avoid creating global variables.
They’re accessible everywhere so they can be modified by anything.
That leads to hard to trace issues.
So we should share variables with other ways like modules.
Functions
Functions should do one thing at a time.
If it has to do more, then we should separate it into a helper function.
Progressive Enhancement
We shouldn’t assume that everyone has JavaScript enabled.
To display something to users that don’t have JavaScript enabled, we can put stuff in the noscript
tag for them.
Don’t Change Variable Type After Init
To make our lives easier, we shouldn’t change the variable type after a variable is initialized.
For example, we shouldn’t write:
let status = "Success";
status = 1;
Changing types makes debugging harder.
Instead, we can assign values with different types to different variables.
Use Inline Commenting
We can add inline commenting in our code for comments.
We should keep them short and to a single line.
For example, we can write:
addtoCart(order) // add to cart
Control Variable Scope
To control variable scope, we can use let
and const
.
They’re all block-scoped so there won’t be any confusion as to where they’ll be available.
For example, we can write:
for (let i = 0; i < 10; i++) {
console.log(i);
}
We use let
to define i
so that it’s only available within the loop.
JavaScript is Case-Sensitive
We should remember that JavaScript is a case sensitive language.
So foo
is different from Foo
.
This applies to everything.
So we should make sure our code has the right case.
Traverse an Array From the Right End
We can traverse an array from the right end with the array instance’s slice
method.
For instance:
const arr = ['a', 'b', 'c', 'd', 'e', 'f'];
console.log(arr.slice(-1));
returns ['f']
and:
console.log(arr.slice(-2));
returns ['e', 'f']
and so on.
slice
doesn’t modify the array is called on.
Substitute Loop with map()
If we want to map array entries from one thing to another, we don’t have to use a loop.
Instead, we use the map
instance method.
For example, we can write:
const itemsIds = items.map((item) => {
return item.id;
});
to get the IDs from items in the items
array.
Replace All Occurrences of a String
We can call replace
with the g
flag to replace all occurrences of a string.
For example, we can write:
const str = "foo foo bar baz";
console.log(str.replace(/foo/g, "qux"));
Then ‘qux qux bar baz’
is returned.
Conclusion
There’re many tricks we should be aware of to improve our JavaScript code.