JavaScript Best Practices — Compound Statements

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 compound statements with JavaScript.

Write Pairs of Braces Together

It’s easy to forget braces when we’re writing blocks.

Therefore, we may want to write the braces first and then fill in the statements next.

For instance, we first write:

if (i < maxLines)

Then we write:

if (i < maxLines){}

Then we fill in the statements inside:

if (i < maxLines){
  // do something
}

Use Braces to Clarify Conditionals

We should add braces in conditional blocks to clarify them.

Even though JavaScript lets us write single line conditional statements without braces, we can put in the braces:

if (denominator !== 0) {
  result = a / denominator;
}

Dangerously Deep Nesting

Nesting is bad since they’re hard to read. And changing hard to read code increase the chance of making bugs.

Therefore, we should reduce or eliminate nesting as much as possible.

If we have:

if (foo) {
  //...
  if (bar) {
    //...
    if (qux) {
      //...
      if (baz) {
        //...
      }
    }
  }
}

Then we should rewrite it to eliminate the nesting.

Simplify a Nested if by Using a break Block

If we have nested in loops, we may be able to eliminate them with break statements.

For instance, we can write the following:

while (condition) {
  if (shouldEnd) {
    break;
  }
  //...
}

And we end the loop when shouldEnd is true .

We can add break blocks for any condition that should end the loop.

Convert a Nested if to a Set of if-else Blocks

If we have nested if statements, we can eliminate them by turning into if...else blocks.

For instance, if we have:

if (10 < subtotal) {
  if (100 < subtotal) {
    if (1000 < subtotal) {
      total *= 0.9;
    } else {
      total *= 0.8;
    }
  } else {
    total *= 0.7;
  }
}

Then we should restructure it in a cleaner way by removing the nesting by writing:

if (10 < subtotal) {
  total *= 0.7;
} else if (100 < subtotal) {
  total *= 0.8;
} else if (1000 < subtotal) {
  total *= 0.9;
}

It’s just much easier to read without the nesting.

Convert a Nested if to a case Statement

We can also convert nested if statement to switch statements.

For instance, we can write:

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

There’s no nesting, so it’s easy to read and we can see all the conditions.

Factor Deeply Nested Code into its Own Function

Moving deeply nested code into its own function will reduce the nesting, so we should do that.

It also makes each part shorter, so that’s even better.

Use a More Object-Oriented Approach

Instead of writing out long procedures that have lots of similar code and nesting, we can use classes and objects to encapsulate them into one package and use them instead.

This way, we can create similar objects that do similar things instead of writing them all out line by line.

Redesign Deeply Nested Code

Deeply nested code should be redesigned to reduce nesting.

It’s too complex and it hurts people’s brains to read them. Changing them will be error-prone.

Reducing Complexity

Reducing complexity will make our lives easier.

No one likes to be overwhelmed with complex things.

We can measure the complexity of a piece of code by counting the number of straight paths.

Then we add that by the number of if , while , for , && and || .

Then we add that total by the number of case statements or blocks.

The higher the total, the more complex the code is.

Conclusion

Reducing complexity will make our lives easier.

We can do that by counting the branches and straight-line code a group of code has.

Also, nesting is always hard on our brains, so we can move them to functions or classes.

We can write braces first so that we won’t forget them when we define functions.