Categories
JavaScript Best Practices

JavaScript Best Practices — Cases and 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 how case statements should be used and the best practices for writing loops.

Order Cases Alphabetically or Numerically

We may want to order our cases alphabetically or numerically to read them easier.

For instance, we can write:

switch (val) {
  case 1:
    //...
    break;
  case 2:
    //...
    break;
  default:
    //...
    break;
}

or write:

switch (val) {
  case 'a':
    //...
    break;
  case 'b':
    //...
    break;
  default:
    //...
    break;
}

Put the Normal Case First

If we put the normal case first, then we don’t have to go to the other cases as often because of short-circuiting.

So if we have the 'success' case as the normal case, we can write:

switch (val) {
  case 'success':
    //...
    break;
  case 'error':
    //...
    break;
  default:
    //...
    break;
}

Keep the Actions of Each Case Simple

Cases should be short to keep them readable. If the actions inside the case statement or block are complex, we should write functions to contain them.

For instance, we can write the following:

switch (val) {
  case 'success':
    handleSuccess();
    break;
  case 'error':
    handleError();
    break;
  default:
    //...
    break;
}

Don’t Make Up Phony Variables to be Able to Use the case Statement

A case statement should ve used for data that can easily be categorized.

Therefore, we should write something like:

const action = command[0];
switch (action) {
  case 'a':
    //...
    break;
  case 'b':
    //...
    break;
  default:
    //...
    break;
}

The variables that we pass into switch should be a simple variable. We shouldn’t have to do something like taking the first letter from a string before checking the cases.

The first letter can be used by more than one word, so we want to avoid using the first letter for our cases.

Use the default Clause Only to Detect Legitimate Defaults

default clause should only be used for real defaults.

If we don’t have a real default value, then we don’t need a default clause.

Use the default Clause to Detect Errors

If there’re cases that aren’t supposed to happen, we can use the default clause to catch those cases.

For instance, we can write something like:

switch (action) {
  case 'a':
    //...
    break;
  case 'b':
    //...
    break;
  default:
    handleError();
    break;
}

Then we handle errors in the default case in case it’s encountered.

Avoid Dropping Through the End of a case Statement

JavaScript doesn’t automatically break at the end of each case statement or block.

Therefore, we should write the break keyword to stop the execution at the end of the statement or block.

For example, instead of writing:

switch (action) {
  case 'a':
    //...
  case 'b':
    //...
}

We write:

switch (action) {
  case 'a':
    //...
    break;
  case 'b':
    //...
    break;
}

When to Use a while Loop

We should use while to test conditions for the exit at the beginning of the end of the loop.

To do that, we write:

while (!done) {
  if (condition) {
    done = true;
  }
  //...
}

This will check the condition at the beginning of the loop body.

We can also check at the end by moving the if block to the end.

Also, we have the do...while loop to run the loop body first before checking the condition for continuing the loop.

For instance, we can write:

do {
  if (condition) {
    done = true;
  }
  //...
}
while (!done)

Then the first iteration always runs.

Use a Loop-With-Exit Loop

We can also put a loop condition inside the middle of the loop body.

Then we can avoid errors that result from any invalid values that are produced before the exit check.

For instance, we can write:

while (!done) {
  //...
  if (length < 0 || width < 0) {
    done = true;
  }
  //...
}

Then if length or width are less than 0, we can avoid running the rest of the code that need them.

Conclusion

We can use the while loop to repeated run code and check for the condition in each iteration so we can end it.

There’s also the do...while loop to always run the first iteration before checking our condition.

If we use switch statements, we may want to order our case statements in order, and always have break at the end of the block.

Alternatively, we can also put the normal case first, and the error cases later.

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 *