JavaScript is a very forgiving language. It’s easy to write code that runs but has mistakes in it.
In this article, we’ll look at the best practices for writing loops and functions like loop length, nesting, and returns.
Make Our Loops Short Enough to View all at Once
Our loops should be short so that the whole thing can be viewed on the page.
Otherwise, it’s too long, and we should break it up.
Limit Nesting to 3 Levels
Nesting usually makes our code harder to read. Therefore, we can limit it to 3 levels max.
Other than that, it’s way too much and we should eliminate them by putting some code into functions for example.
Move Loop Innards of Long Loops into Functions
If we have a long loop, that means that we’ve to break our code into smaller functions.
Small functions and loops are easier to read, so we should write those instead of putting everything into one big loop.
Make Long Loops Especially Clear
If we can’t avoid long loops, then we should make them as clear as possible.
Otherwise, we’ll have a hard time reading our own code.
Correspondence Between Loops and Arrays
Loops and arrays are often related. Many loops are used for manipulating arrays.
Loop counter variables so one to one with array indexes.
However, with JavaScript, we don’t always need to write loops to do array operations.
For instance, there’re many methods in the Array constructor that we can use to create loops with.
We can use map to map each array entry to new values by passing in a callback into it.
For instance, we can use it to square all numbers in an array as follows:
const arr = [1, 2, 3];
const result = arr.map(a => a ** 2);
There’s also the filter method for returning an array with entries that meet some given condition.
We can find all the even numbers in an array as follows:
const arr = [1, 2, 3];
const result = arr.filter(a => a % 2 === 0);
Also, to search for an array item, we can use the find method as follows:
const arr = [1, 2, 3];
const result = arr.find(a => a % 2 === 0);
The code above will find the first even number in the array.
There’re many more methods that we can use instead of writing out loops.
We may want to consider those before using loops.
Multiple Returns from a Function
In JavaScript, we don’t have to exit a function at the end of a function.
We can use the return keyword to stop the function.
For instance, we can write something like:
const fn = () => {
if (invalid) {
return;
}
//...
return {
//...
}
}
We can stop the function when we have invalid set to true in the example above.
This lets us clean up our code by reducing nesting.
Use a return When it Enhances Readability
We can add return statements to enhance readability.
It’s useful for stopping a function when certain conditions are met as we have seen.
Use Guard Clauses to Simplify Complex Error Processing
As we can see from the example above, we can return early.
A group of code that lets us stop running a function early is called a guard clause.
For instance, in the function we have above:
const fn = () => {
if (invalid) {
return;
}
//...
return {
//...
}
}
The following is the guard clause:
if (invalid) {
return;
}
It’s much better than writing things like:
const fn = () => {
if (!invalid) {
//...
return {
//...
}
}
}
which does the same thing but has a lot more nesting.
Nesting is hard to read and the guard clause lets us avoid nesting.
Minimize the Number of returns in Each Function
Guard clauses are great, but we shouldn’t use them too frequently.
The more return statements we have in our code, the harder it is to understand.
Conclusion
Nesting is bad in loops or functions, so we should reduce them.
In functions, we can reduce nesting with return statements. We can return a function before the last line in some cases.
Instead of loops, we can also use array methods to do array operations.
