JavaScript Best Practices — Blocks and Lines

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 layout code with blocks and lines.

Pure Blocks

JavaScript uses curly braces to delimit blocks.

We can use them to denote functions, loops, and standalone blocks.

For instance, we can write:

while (x < 10) {
  //...
}

to define a while loop.

To define a function, we can write:

const foo = (x) => {
  //..
}

We can write conditional statements as follows:

if (val == 1) {
  //..
}

or:

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

To define standalone blocks, we can write:

{
  let x = 1;
}

Whatever block-scoped variables and constants are only available inside the block.

With braces, we can define blocks easily as braces denote block boundaries.

Endline Layout

For single-line body if blocks, we can write the following:

if (x === 1)
  doSomething()

However, we should just put braces around the block so that we can distinguish the block easily.

Laying Out Control Structures

We should take note of a few things when we’re laying out control structures.

Avoid Unindented Begin-End Pairs

We can write the following for loops and conditional:

for (let i = 0; i < MAX_LINES; i++) {
  //...
}

and:

if (i === 0) {
  //...
}

In the code above, we have the opening curly brace on the first line so that they’re associated with the loop and conditional rather than staying separate on their own line.

Avoid Double Indentation with Begin and End

We shouldn’t write something like:

for (let i = 0; i < MAX_LINES; i++)
  {
    //...
  }

since the braces are part of the loop rather than subordinate to it, we shouldn’t write like that.

Use Blank Lines Between Paragraphs

We should separate groups of code with blank lines.

This way, we should which lines of code are related to each other.

Blank lines also open up natural spaces for comments.

Format Single-Statement Blocks Consistently

A single statement block is a statement followed by a control structure.

A statement followed by an if test is one example of this.

We should just treat them like any other blocks by putting in curly braces and indentation as follows:

if (i === 0) {
  doSomething();
}

For Complicated Expressions, Put Separate Conditions on Separate Lines

If we have complex expressions, then we should put the parts in their own line.

For instance, if we have:

str.incluees('a') && str.incluees('z') && str.incluees(0) && str.incluees(9)

Then we should put each check onto their own line:

str.incluees('a') &&
str.incluees('z') &&
str.incluees(0) &&
str.incluees(9)

Now it’s much easier to read.

No End Line Exception for Case Statements

We should format case statements by indenting with 2 spaces like any other blocks.

For instance, we should write:

switch (color) {
  case 'red':
    //...
    break;
  case 'green':
    //...
    break;
  case 'blue':
    //...
    break;
  default:
    //...
    break;
}

This way, we keep the spacing the same other kinds of code.

Statement Length

Statements should be short enough so that we don’t have to scroll horizontally to read the whole thing.

80 characters maximum is an ideal length since that fits on most screens.

The limit also discourages deep nesting.

Using Spaces for Clarity

Spaces are great for clarity. Therefore we should use them.

Use Spaces to Make Logical Expressions Readable

Spaces should be used to make logical expressions more readable. For instance, instead of writing:

a<1 && a<10

we should write:

a < 1 && a < 10

Having extra space is a lot better than without them.

Use Spaces to Function Arguments Readable

When we call functions, we should separate the arguments with spaces, so that we can read them more easily.

For example, instead of writing:

add(1,2,3)

We write:

add(1, 2, 3)

Conclusion

To keep our code easy to read, we should make sure that our blocks are formatted with blocks and indentation.

Also, we should keep related code on the same line or group.

Spaces between arguments and operands also make our code much clearer.