Maintainable JavaScript — Blocks

Creating maintainable JavaScript code is important if want to keep using the code.

In this article, we’ll look at the basics of creating maintainable JavaScript code by writing statements properly.

Block Statements

Block statements should have curly braces surround them.

The body should also be in a separate line.

Skipping the curly braces and putting everything on the same line is valid, but it’s hard to read.

They’re also disallowed by various style guides and linters like ESLint or JSHint.

Therefore, we should add braces and have blocks that occupy multiple lines.

For instance, if we have:

if (condition)  
  doWork();  
  doSomethingElse();

Then many people will be mistaken that both lines are in the if block.

However, this isn’t the case.

Only the first line if within in the if block.

Therefore, we should just add the curly braces so that we separate the blocks clearly.

We write:

if (condition) {  
  doWork();  
}  
doSomethingElse();

and make everything clearer.

Braces should be used for all block statements, which includes:

• if
• for
• while
• do…while
• try…catch…finally

Brace Alignment

The braces should be aligned properly.

One way to add the braces is to have the opening brace at the same line as the start of the block.

For example, we can write:

if (condition) {  
  doWork();  
} else {  
  doSomething();  
}

This is similar to Java’s style, and it’s recommended in most style guides like Google, Airbnb, and ESLint.

Another style is to have the opening braces on their own line.

For instance, some people may write:

if (condition)   
{  
  doWork();  
} else   
{  
  doSomething();  
}

This is more popular with C# since this is enforced by Visual Studio.

However, there’s no style guide that recommended this style.

And Google forbids this since it may introduce automatic semicolon insertion errors.

Block Statement Spacing

The spacing around the first line of the block is a matter of preference.

There’re 3 kinds of styles.

One of them if having the spaces between each item in the first line.

We have:

if (condition) {  
  doWork();  
} else {  
  doSomething();  
}

We have spaces between the if and the opening parentheses, and the closing parentheses and the opening brace.

This is preferred by some programmers because it’s compact but still have adequate spacing to make the code easy to read.

Another style would be:

if(condition){  
  doWork();  
}else{  
  doSomething();  
}

We have no space between anything but it’s compact.

So it’s hard to recommend this style.

The 3rtd style add spaces after the opening parentheses and before the closing parentheses, like:

if ( condition ) {  
  doWork();  
} else {  
  doSomething();  
}

This style takes more space but it’s more readable.

The first style is a good compromise between the amount of space it takes while maintaining readability.

Conclusion

Block statements can be written in a better way.

There’re ways that gives us enough space to improve readability while not taking too much space.

Also, curly braces should always be surround blocks so that we always know where they start or end.