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.
Learn About Scopes
We should learn about scopes of variables and functions.
Variable scopes should be easy now with let and const variables.
They’re only accessible within the block so there’s no ambiguity.
Also, we should know what’s accessible from modules.
Only things that are exported can be imported.
The tricky ones are var variables and functions declares with the function keyword.
var is function scoped so it’s available throughout a function.
function declarations can be hoisted.
So functions like:
function foo(){
//...
}
can be called before they’re defined in the code.
Use the Fastest Way to Loop Through Variables
The fastest way to loop through variables if the good old for loop.
So we write:
let arrayLength = array.length;
for(let i = 0 ; i < arrayLength; i++) {
let val = array[i];
}
to loop through items.
However, for convenience, the for-of loop and forEach are also good ways to loop through items without sacrificing performance too much.
If we need to map data, we use map .
If we need to return a new array that has data that matches a given condition, we use filter .
There’s also the while loop to loop through data.
Don’t Do Too Much Nesting
Too much nesting is hard to read.
This also means they’re hard to change and debug.
For example, we shouldn’t have things like:
firstFunction(args, () => {
secondFunction(args, () => {
thirdFunction(args, () => {
//...
});
});
});
The deeper the nesting, the harder it is to work with, so we should avoid something like this.
Beware of the DOM
If we’re creating client-side JavaScript apps, then we need to manipulate the DOM.
It’s a good idea to know how to add, edit, and remove elements from the DOM.
There’re also many kinds of nodes like text and comment nodes that we’ve to be aware of in addition to element nodes.
Event propagation is also something to think about.
Use the Best Libraries and Frameworks
The top client-side JavaScript frameworks are React with some additional libraries, Angular, and Vue.
React with React Router can be considered a framework.
There’s also Svelte, which is up and coming.
The concepts are transferable between them so if we learn one, we can learn the other,
They all have a component-based architecture, so they’re similar.
Also, there are many libraries built for each of them.
Have Efficient Configuration and Translation
We should put all the configuration and translations in one location so that we can use them everywhere.
This way, we only have to change them in one place if we need to change it.
Reduce Access to Variables and Properties
If we don’t need to access variables, then we should avoid it.
For instance, with a for loop, we can cache the array length to a variable outside the for loop.
Instead of writing:
let names = ['mary', 'james', 'may'];
for (let i = 0; i < names.length; i++) {
greet(names[i]);
}
We write:
let names = ['mary', 'james', 'may'];
let length = names.length;
for (let i = 0; i < length; i++) {
greet(names[i]);
}
Don’t Trust Any Data
We shouldn’t trust any data from anywhere.
Therefore, we should validate any input values and check for data from other sources like APIs.
This way, we only work with exactly what we need and avoid any security issues with malicious data.
Use Arrow Functions
Arrow functions are great.
It can be used if we aren’t creating a constructor function.
If we don’t need it to bind to its own this , then we can also use it.
For instance, we can write:
const foo = () => console.log('hello');
It’s shorter and less confusing because it doesn’t bind to its own this .
Use Template Literals
Template literals are much better than concatenation since it’s much easier to read.
And we can put any expressions in them.
For example, instead of writing:
'hello ' + name;
We write:
`hello ${name}`;
Template literals are always delimited by backticks instead of single or double-quotes.
Conclusion
We should use recent features of JavaScript like template literals and arrow functions.
Also, we got to learn about scopes and this .
