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 laying out and styling JavaScript code.
Layout Fundamentals
We want to have spacing and indentation so that we can actually read the code.
Therefore, we should have spacing like the following:
while (val < data[pos - 1]) {
data[pos] = data[pos - 1];
pos += 1;
}
data[pos] = val;
We have spaces after some keywords like while and operators.
Also, we have indentation before lines in blocks. 2 spaces are standard and are portable, so it’s a good amount of indentation to have.
After a block, we have a line to make things readable.
The Fundamental Theorem of Formatting
The Fundamental Theorem of Formatting states that good visual layout shows the logical structure of the program.
We got to format our code neatly so that we can see the logical flow of our program.
Human and Computer Interpretations of a Program
Humans and computers don’t read code the same way.
Humans need code to be neat and tidy so that we can read them easily.
The names have to be descriptive so that we can understand them.
Computers don’t need spacing and descriptive names to read programs.
Also, operations may mean different things for humans and computers.
For instance, if we have this expression:
3 + 1 * 2 + 8
Then humans may put the parentheses like:
(3 + 1) * (2 + 8)
A computer might read it as:
3 + (1 * 2) + 8
How Much Is Good Layout Worth?
A good layout makes ou code easier to understand.
However, small differences are fine. We just need something that’s easy to read.
To make our lives easier, we should just let code formatters tidy up the code for us and be done with it.
This will make our code easy to read for humans in a pinch.
Layout as Religion
Good programmers should be open-minded about code layouts.
There’re some layouts that are clearly bad, but arguing about small changes isn’t productive.
Objectives of Good Layout
A good layout should make our code easy to understand. They should achieve the following things.
Accurately Represent the Logical Structure of the Code
Logical structures should be accurately represented. Therefore, we should use indentation and spacing to show the logic structure.
Consistently Represent the Logical Structure of the Code
The layout should be consistent so that the code is easy to follow.
We should apply the same good styles everywhere.
This can be done easily with a good code formatter.
Improve Readability
Improving readability is important. If we understand the code easier, then we can work on it faster and make fewer bugs.
Withstand Modifications
Having a good layout makes our code hold up well to modifications.
We shouldn’t require to modify several other lines if we modify one line of code.
Also, we should minimize the number of statements that we need to change or add.
White Space
White spaces are important for readability.
In JavaScript, we usually indent with 2 spaces and have spacing in between operators and parentheses.
Anything separated by commas also has a space after the comma.
If we don’t have some spacing, it’s very hard to read the code.
Grouping
Grouping related statements are also important for distinguishing them from others.
Like we group thoughts into paragraphs in English, we should do the same with code.
We group related statements together and separate groups by one blank line.
Blank Lines
Blank lines are useful for separating groups of statements from each other.
Therefore, we should add them to make them easier to read.
Indentation
Indentations should be added to code inside a block so that we know that they’re inside the block.
2 spaces are pretty standard for indentation so we can consider using that when we indent.
Parentheses
Parentheses are also important to form groups of code. These are useful for grouping expressions.
For instance, we can use them to group arithmetic operations like:
let x = (3 + 1) * (2 + 8);
Also, parentheses are used for function signatures except for arrow functions that only have one parameter so we also use them there.
Conclusion
Code layout is important for improving readability.
We can clean up our code with a code formatter.
Indentation can be done with 2 spaces, parentheses are useful for grouping expressions.
Spaces and blank lines also make our code easier to read by grouping related code.
