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.
Make the Incompleteness of a Statement Obvious
If statements have to be broken across lines, then we should make that obvious.
For instance, we write:
str.incluees('a') &&
str.incluees('z') &&
str.incluees(0) &&
str.incluees(9)
Now we know that the expression continues to the next line since we have && at the of the line.
Keep Closely Related Elements Together
Related elements should be kept together to let us follow the code more easily.
For instance, instead of writing:
const name = person['firstName'] + ' ' + person[
'lastName'
]
we write:
const name = person['firstName'] + ' ' +
person['lastName']
so that we can have the object property access code in the same line.
Indent Function-Call Continuation Lines the Standard Amount
If we’re calling a function, we should indent all long expressions by the same amount.
2 spaces are also pretty standard for indenting argument expressions, so we can write:
fn(
'foo',
'bar'
)
Make it Easy to Find the End of a Continuation Line
Having each argument on their own line is also a good idea to make the arguments more readable.
So we may want to put them in their own line, especially if they’re long.
Indent Control-Statement Continuation Lines the Standard Amount
Conditionals and loops should also be indented the same amount.
For instance, we should write:
while (!done) {
//...
doSomething();
}
for loops. We have 2 spaces to indent the body.
For conditional statements, we write:
if (!done) {
//...
doSomething();
}
Which has the same indentation as the loops.
Do not Align Right Sides of Assignment Statements
We shouldn’t align the right sides of the assignment statements.
For instance, we shouldn’t write:
bill = bill + purchases;
totalBill = bill + previousBalance( customerID ) +
lateCharge( customerID );
It just takes extra effort and doesn’t improve readability that much.
We should just let our code formatter decide on the alignment, so we write:
bill = bill + purchases;
totalBill = bill + previousBalance(customerID) +
lateCharge(customerID);
Using Only One Statement Per Line
Only one statement per line makes sense for readability. Shorter lines are more readable.
So instead of writing:
let i = 0, j = 0, k = 0; destroy(i, j, k);
We write:
let i = 0,
j = 0,
k = 0;
destroy(i, j, k);
In addition to better readability, it also provides a more accurate view of our program’s complexity.
Putting several statements in one line also doesn’t provide optimization clues to compilers.
We can also follow the left margin of the code to following it line by line
Syntax errors are also easier to find if everything is on their own line.
Individual statements can also be edited or deleted more easily if they’re on their own line.
Use Only One Data Declaration Per Line
We should declare variables and constants on their own line.
For instance, we can write the following:
let i = 0;
let j = 0;
const k = 0;
This makes each declaration clear. We can also see what kind of data they are.
Declare Variables Close to Where They’re First Used
Variables should be declared close to where they’re first used.
It’s better to declare close to where they’re first used to avoid accidental assignments and group related code together.
It’s also easier to follow how variables are used if they’re only used in a few lines apart.
Order Declarations Sensibly
Grouping declarations by type makes sense since they’re grouped logically.
It’s easier to read logically related things.
Indent a Comment with its Corresponding Code
If we have comments, they should be indented the same way as code.
For instance, if we have a loop, we write:
while (!done) {
// comment
doSomething();
}
Conclusion
We should only have one statement per line to make them easier to read.
Also, we shouldn’t align the right side of assignment statements since it’s just extra effort for not much reward.
Indentation should be consistent with code and comments.
