JavaScript Best Practices

JavaScript Best Practices — More About Loops

Spread the love

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, especially with how we control flow control in loops.

Make Loop-Termination Conditions Obvious

To make our code easier to read, we should make the loop termination conditions obvious.

If we have a for loop, we shouldn’t use break to end the loop. This is because we already have an ending condition at the top of the loop.

We may want to use those for a while loop through since we’ve to end the loop explicitly inside the loop body by setting a flag or using break .

Don’t Mess With the Loop Index of a for Loop to Make the Loop Terminate

The loop counter shouldn’t be modified in the for loop.

Therefore, we shouldn’t set the loop index to be bigger than the end index to stop the loop.

If we want more flexibility, we should use a while loop instead.

Avoid Code that Depends on the Loop Index’s Final Value

We shouldn’t use the final value of the loop index outside the loop.

We may not know what the final value os, and even if we do, it’s just bad to use them since we don’t know what’s going to happen to the variable outside the loop.

Consider Using Safety Counters

A safety counter prevents us from running too many iterations of a loop.

For instance, if we don’t want a loop to run for more than 100 iterations, we can write:

while (node) {  
  if (i === 100) {  
  node = node.nex;  

In the code above, if we traverse a list for more than 100 iterations, then we end the while loop.

This way, we won’t get a loop that can possibly run forever if the list is circular.

Consider Using break Statements Rather than Boolean Flags in a while Loop

To end a while loop, we may also want to use the break statement to end it.

This is easier than assigning a boolean flag to a different value.

For instance, we can write the following:

while (condition) {  
  if (end) {  

Then we don’t have to worry about assigning condition to something falsy to end the loop.

Be Wary of a Loop with a lot of breaks Scattered Through it

The more break statements we have, the more we’ve to read and understand.

Therefore, we should minimize the use of break even though we can use it to end the loop.

Also, we don’t want to confuse the break in switch statements with the ones for breaking the loop, so we should keep switch statements out of the loop body.

Use continue for Skipping to the Next Iteration

We can use the continue statement to skip to the next iteration of a loop.

For instance, if we have:

for (let i = 0; i < 10; i++) {  
  if (i === 5) {  

In the code above, we have the continue statement to skip the loop body when the i is 5.

Use break and continue Only with Caution

As we mentioned in the previous section, we shouldn’t use break frequently.

This is the same as the continue statement.

It’s just too easy to abuse them by using them too frequently. They’re hard to understand.

If we have too many conditions where we have to end the loop, then the loop is probably doing too much.

Checking Endpoints

We should make sure that we check for off-by-one errors so that we don’t run into them when we’re running a loop.

If our loop does complex calculations, then we should check them to make sure they work properly.

Mental simulations that are hard on our brains should be done on paper.

Use Integers for Limits on Both Arrays and Loops

Array indexes have to be integers, so if we’re looping through a loop with a for loop, then we should use integers for the loop index variable as well.

Otherwise, we may not get the array element that we want.


We should make sure to loop through a loop with an integer index to avoid running into unexpected issues.

Also, we shouldn’t use break and continue to frequently to make our code easier to understand.

Safety counters may also be handy to prevent running a loop for too many iterations.

By John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Leave a Reply

Your email address will not be published. Required fields are marked *